点击时如何更改标签栏颜色答案

【问题标题】：How to change tab bar color when it tapped点击时如何更改标签栏颜色
【发布时间】：2021-02-09 04:26:15
【问题描述】：

我想在点击时更改标签的背景颜色？我怎样才能改变颜色我有这个测试项目：

    @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.pink,
          bottom: TabBar(
            labelColor: Colors.yellow,
            indicatorColor: Colors.yellow,
            onTap: (index) {
              // Should not used it as it only called when tab options are clicked,
              // not when user swapped
            },
            controller: _controller,
            tabs: list,
          ),
          title: Text('Tabs Demo'),
        ),
        body: TabBarView(
          controller: _controller,
          children: List<Widget>.generate(3, (int index){
            return Center(
              child: Text(index.toString()),
            );
          }),
        ),
      ),
    );

【问题讨论】：

标签： android ios flutter tabbar

【解决方案1】：

您可以使用控制器的index 属性来检查当前处于活动状态的选项卡并监听控制器以了解它何时更改。例如，在 Tab 小部件周围使用 AnimatedBuilder

【讨论】：

【解决方案2】：

这些事情要考虑：

使用选项卡控制器并检查 indexIsChanging
在 Tab 中使用用于颜色更改的小部件包装文本
移除 labelPadding

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  TabController tabController;
  List<Color> tabBackground;
  List colors = [Colors.red, Colors.green, Colors.yellow];
  Random random = Random();

  @override
  void initState() {
    super.initState();
    tabController = TabController(length: 3, vsync: this);
    tabBackground = [Colors.blue, Colors.pink, Colors.cyan];
    tabController.addListener(() {
      if (tabController.indexIsChanging) {
        setState(() {
          tabBackground[tabController.index] = colors[random.nextInt(3)];
        });
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.pink,
        bottom: TabBar(
          labelPadding: EdgeInsets.zero,
          labelColor: Colors.yellow,
          indicatorColor: Colors.black,
          controller: tabController,
          tabs: [
            Tab(
              child: Container(
                alignment: Alignment.center,
                constraints: BoxConstraints.expand(),
                color: tabBackground[0],
                child: Text(
                  'Tab 1',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
            ),
            Tab(
              child: Container(
                alignment: Alignment.center,
                constraints: BoxConstraints.expand(),
                color: tabBackground[1],
                child: Text(
                  'Tab 2',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
            ),
            Tab(
              child: Container(
                alignment: Alignment.center,
                constraints: BoxConstraints.expand(),
                color: tabBackground[2],
                child: Text(
                  'Tab 3',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ],
        ),
        title: Text('Tabs Demo'),
      ),
      body: TabBarView(
        controller: tabController,
        children: List<Widget>.generate(3, (int index) {
          return Center(
            child: Text(index.toString()),
          );
        }),
      ),
    );
  }
}

【讨论】：