选择选项卡时的 TabBar 图标颜色

Question

我正在尝试在 select 编辑选项卡时更改选项卡图标的颜色。我知道如何更改图标的颜色，但我不知道如何在 select 选项卡时更改颜色。

我的代码：

child: AppBar(
    bottom: TabBar(
        tabs: <Tab>[
            Tab(
                child: new Row(
                    children: <Widget>[
                        new Text("Select", textAlign: TextAlign.start),
                        new SizedBox(
                            width: 24.0,
                        ),
                        new Icon(
                            Icons.arrow_drop_down,
                            color: Colors.blue.shade400,
                        ),
                    ],
                    ....
                )
            )
        ]
    )
)

Answer 1

如图所示创建自定义选项卡控制器
执行类似 _tabController.index 的操作以获取当前选项卡的索引。
对于每个选项卡，检查其位置（从 0 开始）是否与 TabController 索引匹配并显示相应的图标

Answer 2

要更改选定的选项卡颜色，只需将其添加到 TabBar 即可：

labelColor: Colors.
unselectedLabelColor: Colors.white,

完整代码：

DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            labelColor: Colors.deepOrange,
            unselectedLabelColor: Colors.white,
            tabs: <Tab>[
              Tab(
                child: Row(
                  children: <Widget>[
                    Text("Select", textAlign: TextAlign.start),
                    SizedBox(
                      width: 24.0,
                    ),
                    Icon(
                      Icons.arrow_drop_down,
                      color: Colors.blue.shade400,
                    ),
                  ],
                ),
              ),
              Tab(
                child: Row(
                  children: <Widget>[
                    Text("Select", textAlign: TextAlign.start),
                    SizedBox(
                      width: 24.0,
                    ),
                    Icon(
                      Icons.arrow_drop_down,
                      color: Colors.blue.shade400,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        body: Center(
          child: Container(
            child: Text("This is a page blahblah"),
          ),
        ),
      ),
    )

编辑： 如果您只想更改图标颜色，则为文本添加颜色并从选项卡中的图标中删除颜色，代码：

DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            labelColor: Colors.deepOrange,
            unselectedLabelColor: Colors.white,
            tabs: <Tab>[
              Tab(
                child: Row(
                  children: <Widget>[
                    Text("Select", textAlign: TextAlign.start, style: TextStyle(color: Colors.white),),
                    SizedBox(
                      width: 24.0,
                    ),
                    Icon(
                      Icons.arrow_drop_down,
                    ),
                  ],
                ),
              ),
              Tab(
                child: Row(
                  children: <Widget>[
                    Text("Select", textAlign: TextAlign.start, style: TextStyle(color: Colors.white),),
                    SizedBox(
                      width: 24.0,
                    ),
                    Icon(
                      Icons.arrow_drop_down,

                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        body: Center(
          child: Container(
            child: Text("This is a page blahblah"),
          ),
        ),
      ),
    )

编辑#2 现在，此代码更改了图标颜色，但将文本颜色更改保留为默认值（您可以自定义文本颜色的更改，如图标颜色）。代码：

import 'package:flutter/material.dart';

class FirstPage extends StatefulWidget {
  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  int _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            onTap: (index){
              setState(() {
               _currentIndex = index; 
              });
            },

            tabs: <Tab>[
              Tab(
                child: Row(
                  children: <Widget>[
                    Text("Select", textAlign: TextAlign.start,),
                    SizedBox(
                      width: 24.0,
                    ),
                    Icon(
                      Icons.arrow_drop_down,
                      color: _currentIndex == 0 ? Colors.deepOrange : Colors.white54
                    ),
                  ],
                ),
              ),
              Tab(
                child: Row(
                  children: <Widget>[
                    Text("Select", textAlign: TextAlign.start,),
                    SizedBox(
                      width: 24.0,
                    ),
                    Icon(
                      Icons.arrow_drop_down,
                      color: _currentIndex == 1 ? Colors.deepOrange : Colors.white54,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        body: Center(
          child: Container(
            child: Text("This is a page blahblah"),
          ),
        ),
      ),
    );
  }
}

Answer 3

TabBar 具有 labelColor 和 unselectedLabelColor 属性，可以为 Tabs 中的任何图标和文本设置 selected/unselected 颜色。

如果您希望 Tabs 中的图标或文本具有固定颜色，您只需在 Icon 或 Text 中指定颜色 [=17] =] 以覆盖 TabBar 的属性 labelColor 和 unselectedLabelColor 中定义的颜色。

所以，在你的情况下，如果你想为图标使用 selected/unselected 颜色，为文本设置固定颜色，你必须在中设置 labelColor 和 unselectedLabelColor TabBar 为图标设置颜色，并在 Tabs.

内的文本上设置特定颜色

选择选项卡时的 TabBar 图标颜色

TabBar icon color when tab is selected

tabs

colors

flutter