flutter - flutter 如何创建可点击的标签

如何创建基本设计，例如从图像素描。具有选项卡列表的第一个容器是静态的，位于其上方的容器是动态的，并且包含文本-如果单击选项卡1，则选项卡1的文本，如果单击选项卡2，则选项卡2的文本。如果单击Tab1或Tab2的文本，也必须在其下划线。
像这样:

最佳答案

使用GestureDetector小部件来告诉用户何时单击选项卡，然后使用setState更新状态可能是最简单的方法。
这是使用有状态的小部件和setState更新页面的非常基本的示例。但是，您可以使用任何状态管理策略来解决此问题。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(body: MyHomePage()),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String selectedTab;
  static const String TAB_1 = 'Tab 1';
  static const String TAB_2 = 'Tab 2';

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Expanded(
          flex: 1,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              GestureDetector(
                onTap: () {
                  setState(() => selectedTab = TAB_1);
                },
                child: Container(
                  padding: const EdgeInsets.all(12.0),
                  child: Text(TAB_1),
                  decoration: selectedTab == TAB_1
                      ? BoxDecoration(border: Border(bottom: BorderSide()))
                      : null,
                ),
              ),
              GestureDetector(
                onTap: () {
                  setState(() => selectedTab = TAB_2);
                },
                child: Container(
                  padding: const EdgeInsets.all(12.0),
                  child: Text(TAB_2),
                  decoration: selectedTab == TAB_2
                      ? BoxDecoration(border: Border(bottom: BorderSide()))
                      : null,
                ),
              )
            ],
          ),
        ),
        Container(height: 20.0),
        Expanded(
          flex: 2,
          child: Container(
            decoration: BoxDecoration(
                border: Border.all(width: 5),
                borderRadius: BorderRadius.circular(12.0)),
            child: Center(child: Text(textForTab(selectedTab))),
          ),
        )
      ],
    );
  }

  String textForTab(String tabId) {
    switch (tabId) {
      case TAB_1:
        return 'Text for Tab 1';
      case TAB_2:
        return 'Text for Tab 2';
      default:
        return 'Select Tab';
    }
  }
}

关于flutter - flutter 如何创建可点击的标签，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/63602324/