Flutter 如何创建可点击的标签页答案

【问题标题】：Flutter how to create clickable tabsFlutter 如何创建可点击的标签页
【发布时间】：2020-08-26 16:56:32
【问题描述】：

如何从图像中的草图创建基本设计。带有选项卡列表的第一个容器是静态的，其上方的容器是动态的，并且包含文本 - 如果单击选项卡 1，则选项卡 1 的文本，或者如果单击选项卡 2，则选项卡 2 的文本。如果我们点击它，Tab1 或 Tab2 的文本也必须加下划线。

类似这样的：

【问题讨论】：

将一排按钮与PageView结合使用。

标签： flutter dart tabs

【解决方案1】：

使用 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';
    }
  }
}

【讨论】：

【解决方案2】：

您可以使用 TabBar 小部件来做到这一点。

class CustomTabBar extends StatefulWidget {
 @override
 _CustomTabBarState createState() => _CustomTabBarState();
}

class _CustomTabBarState extends State<CustomTabBar>
  with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
   _tabController = TabController(length: 2, vsync: this);
   super.initState();
  }

  @override
  void dispose() {
   super.dispose();
   _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
   return Scaffold(
    appBar: AppBar(
     title: Text(
      'Tab Demo',
     ),
    ),
    body: 
     Column(
      children: [
        Container(
          height: 45,
          child: TabBar(
            controller: _tabController,
            indicator: BoxDecoration(
              border: Border(bottom: BorderSide(color: Colors.blue,width: 2,style: 
              BorderStyle.solid)),
            ),
            labelColor: Colors.blue,
            unselectedLabelColor: Colors.black,
            tabs: [
              // first tab
              Tab(
                text: 'Home',
              ),

              // second tab
              Tab(
                text: 'Profile',
              ),
            ],
          ),
        ),
        // tab bar view
        Expanded(
          child: TabBarView(
            controller: _tabController,
            children: [
              // first tab widget 
              Center(
                child: Text(
                  'Home',
                  style: TextStyle(
                    fontSize: 26,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),

              // Second tab widget
              Center(
                child: Text(
                  'Profile',
                  style: TextStyle(
                    fontSize: 26,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  );
  }
}

【讨论】：

【解决方案3】：

我不确定我是否完全理解你。
但是如果你想实现一个 TabBar，你可以使用 flutter TabBar() 记录在这里： https://flutter.dev/docs/cookbook/design/tabs

或者有一个你可以使用的包： https://pub.dev/packages/tabbar

【讨论】：

或者，如果您想手动操作，您可以创建一些按钮和一些页面，然后将这些页面放在一个列表中，并使用索引来了解您应该使用 setState() 在底部显示哪一个。