如何在颤动的选中和未选中状态下更改选项卡图标的颜色？

Question

我想在选项卡中定义图标的未选择颜色，就像unselectedLabelColor一样。

  TabBar(
          indicatorColor: Colors.grey,
          labelColor: Colors.black,
          unselectedLabelColor: Colors.grey,
          tabs: [
            Tab(
                text: 'first',
                icon: Icon(Icons.directions_car, color: Colors.grey)),
            Tab(
                text: 'second',
                icon: Icon(Icons.directions_transit, color: Colors.grey)),
            Tab(
                text: 'third',
                icon: Icon(Icons.directions_bike, color: Colors.grey)),
          ],
        )

Answer 1

现在您可以简单地更改labelColor属性的颜色

bottomNavigationBar: TabBar(
    tabs: [
      
    ],
    labelColor: Colors.deepPurpleAccent,
  ),

还要记住设置unSelectedLabelColor不同。

Answer 2

按照Britannio的指示，我已经解决了我的问题，但我想分享我的解决方案，以便它可以帮助其他人。我对必须用空主体调用setState（）感到困惑，不建议这样做，因此，如果有人有更好的解决方案，请发表评论。我会更新。

     TabController _tabController;

     @override
     void initState() {
       super.initState();
      _tabController = new TabController(vsync: this, length: 3);
      _tabController.addListener(_handleTabSelection);
     }

     void _handleTabSelection() {
        setState(() {
         });
     }

     TabBar(
            controller: _tabController,
            indicatorColor: Colors.grey,
            labelColor: Colors.black,
            unselectedLabelColor: Colors.grey,
            tabs: [
              Tab(
                  text: 'Sale',
                  icon: Icon(Icons.directions_car,
                      color: _tabController.index == 0
                          ? Colors.black
                          : Colors.grey)),
              Tab(
                  text: 'Latest',
                  icon: Icon(Icons.directions_transit,
                      color: _tabController.index == 1
                          ? Colors.black
                          : Colors.grey)),
              Tab(
                  text: 'Popular',
                  icon: Icon(Icons.directions_bike,
                      color: _tabController.index == 2
                          ? Colors.black
                          : Colors.grey)),
            ],
          )

Answer 3

我在标签栏中使用图像图标时使用的代码。

它也适用于标签和滑动。

TabBar(
      tabs: [
        Tab(
            text: 'one',
            icon: CustomIcon('assets/1.png', size: 24,)),
        Tab(
            text: 'two',
            icon: CustomIcon('assets/2.png', size: 24,)),
      ],
    )

----------------------------------------

class CustomIcon extends StatelessWidget{
  const CustomIcon(this.name, { Key key, this.size, this.color, }) : super(key: key);

  final String name;
  final double size;
  final Color color;

  @override
  Widget build(BuildContext context) {

    final IconThemeData iconTheme = IconTheme.of(context);
    final double iconOpacity = iconTheme.opacity;
    Color iconColor = color ?? iconTheme.color;

    if (iconOpacity != 1.0) iconColor = iconColor.withOpacity(iconColor.opacity * iconOpacity);
    return Image.asset(name, color: iconColor, height: size,);
  }
}

Answer 4

我的例子，我使用资产中的自定义图像，这段代码对我有用。

TabBar(
  indicatorColor: Colors.grey,
  labelColor: Colors.black,
  unselectedLabelColor: Colors.grey,
  tabs: [
    Tab(
        text: 'first',
        icon: ImageIcon(AssetImage('assets/1.png')
    ),
    Tab(
        text: 'second',
        icon: ImageIcon(AssetImage('assets/2.png')
    ),
    Tab(
        text: 'third',
        icon: ImageIcon(AssetImage('assets/3.png')
    ),
  ],
)

Answer 5

从图标中删除属性 'color' 将使用unselectedLabelColor 上设置的默认颜色。

TabBar(
  indicatorColor: Colors.grey,
  labelColor: Colors.black,
  unselectedLabelColor: Colors.grey,
  tabs: [
    Tab(
        text: 'first',
        icon: Icon(Icons.directions_car)),
    Tab(
        text: 'second',
        icon: Icon(Icons.directions_transit)),
    Tab(
        text: 'third',
        icon: Icon(Icons.directions_bike)),
  ],
)