是否可以更改 Flutter 中所选标签栏图标的大小?

Posted

技术标签:

【中文标题】是否可以更改 Flutter 中所选标签栏图标的大小?【英文标题】:Is it possible to change the size of the selected tab bar icon in Flutter? 【发布时间】:2021-11-26 08:34:41 【问题描述】:

我正在处理一个 Flutter 项目,但我的 TabBar 出现了问题。 我想增加所选图标 tabBar 的大小。有可能吗?我看到我们可以增加文本大小,但它当然不能使用图标。

这是我正在使用的代码:

return DefaultTabController(
      length: 5,
      child: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [
                Theme.of(context).primaryColor,
                const Color.fromRGBO(0, 60, 99, 1.0)
              ]),
        ),
        child: Scaffold(
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            backgroundColor: Colors.transparent,
            shadowColor: Colors.transparent,
            flexibleSpace: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: const [
                TabBar(
                  tabs: [
                    Tab(
                      icon: Icon(
                        CupertinoIcons.add,
                      ),
                    ),
                    Tab(
                      icon: Icon(CupertinoIcons.add),
                    ),
                    Tab(
                      icon: Icon(CupertinoIcons.add),
                    ),
                    Tab(
                      icon: Icon(CupertinoIcons.add),
                    ),
                    Tab(
                      icon: Icon(CupertinoIcons.add), 
                    )
                  ],
                  unselectedLabelColor: Color.fromRGBO(142, 142, 147, 1),
                  labelColor: Color.fromRGBO(0, 60, 255, 1),
                  unselectedLabelStyle: TextStyle(fontSize: 15), // Test with text
                  labelStyle: TextStyle(
                    fontSize: 20,
                  ),
                ),
              ],
            ),
          ),
          body: TabBarView(
            physics: NeverScrollableScrollPhysics(),
            children: [
              FirstScreen(),
              SecondScreen(),
              ThirdScreen(),
              FourthScreen(),
              FifthScreen()
            ],
          ),
        ),
      ),
    );

我真的卡住了,希望有解决办法!

【问题讨论】:

【参考方案1】:

试试这个:

int _selectedTab = 0;

return DefaultTabController(
      length: 5,
      child: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [
                Theme.of(context).primaryColor,
                const Color.fromRGBO(0, 60, 99, 1.0)
              ]),
        ),
        child: Scaffold(
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            backgroundColor: Colors.transparent,
            shadowColor: Colors.transparent,
            flexibleSpace: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: const [
                TabBar(
                  onTap: (index) 
                    _selectedTab = index;
                    setState(());
                  ,
                  tabs: [
                    Tab(
                      icon: Icon(
                        CupertinoIcons.add,
                        size: _selectedTab == 0 ? 30 : 18
                      ),
                    ),
                    Tab(
                      icon: Icon(
                        CupertinoIcons.add,
                        size: _selectedTab == 1 ? 30 : 18
                      ),
                    ),
                    Tab(
                      icon: Icon(
                        CupertinoIcons.add,
                        size: _selectedTab == 2 ? 30 : 18
                      ),
                    ),
                    Tab(
                      icon: Icon(
                        CupertinoIcons.add,
                        size: _selectedTab == 3 ? 30 : 18
                      ),
                    ),
                    Tab(
                      icon: Icon(
                        CupertinoIcons.add,
                        size: _selectedTab == 4 ? 30 : 18
                      ),
                    )
                  ],
                  unselectedLabelColor: Color.fromRGBO(142, 142, 147, 1),
                  labelColor: Color.fromRGBO(0, 60, 255, 1),
                  unselectedLabelStyle: TextStyle(fontSize: 15), // Test with text
                  labelStyle: TextStyle(
                    fontSize: 20,
                  ),
                ),
              ],
            ),
          ),
          body: TabBarView(
            physics: NeverScrollableScrollPhysics(),
            children: [
              FirstScreen(),
              SecondScreen(),
              ThirdScreen(),
              FourthScreen(),
              FifthScreen()
            ],
          ),
        ),
      ),
    );

【讨论】:

【参考方案2】:

您需要一个 TabController,为此您应该将 TickerProviderStateMixin 添加到您的类中。然后将控制器设置为 Tabbar 并在条件下使用 tabController.index 来调整图标的大小。但是当你切换选项卡时它不起作用,所以你应该添加一个监听器和 setState。 这是代码:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:task_manager_v3/Utilities/CBase.dart';

class Test extends StatefulWidget 
  const Test(Key? key) : super(key: key);

  @override
  _TestState createState() => _TestState();


class _TestState extends State<Test> with TickerProviderStateMixin 
  TabController? tabController;
  @override
  void initState() 
    super.initState();
    tabController = TabController(length: 5, vsync: this);
    tabController!.addListener(() 
      setState(() );
    );
  

  @override
  Widget build(BuildContext context) 
    return DefaultTabController(
      length: 5,
      child: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [
                Theme.of(context).primaryColor,
                const Color.fromRGBO(0, 60, 99, 1.0)
              ]),
        ),
        child: Scaffold(
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            backgroundColor: Colors.transparent,
            shadowColor: Colors.transparent,
            flexibleSpace: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                TabBar(
                  controller: tabController,
                  tabs: [
                    Tab(
                      icon: Icon(
                        CupertinoIcons.add,
                        size: tabController!.index == 0 ? 20 : 10,
                      ),
                    ),
                    Tab(
                      icon: Icon(
                        CupertinoIcons.add,
                        size: tabController!.index == 1 ? 20 : 10,
                      ),
                    ),
                    Tab(
                      icon: Icon(
                        CupertinoIcons.add,
                        size: tabController!.index == 2 ? 20 : 10,
                      ),
                    ),
                    Tab(
                      icon: Icon(
                        CupertinoIcons.add,
                        size: tabController!.index == 3 ? 20 : 10,
                      ),
                    ),
                    Tab(
                      icon: Icon(
                        CupertinoIcons.add,
                        size: tabController!.index == 4 ? 20 : 10,
                      ),
                    )
                  ],
                  unselectedLabelColor: Color.fromRGBO(142, 142, 147, 1),
                  labelColor: Color.fromRGBO(0, 60, 255, 1),
                  unselectedLabelStyle:
                      TextStyle(fontSize: 15), // Test with text
                  labelStyle: TextStyle(
                    fontSize: 20,
                  ),
                ),
              ],
            ),
          ),
          body: TabBarView(
            physics: NeverScrollableScrollPhysics(),
            children: [
          FirstScreen(),
          SecondScreen(),
          ThirdScreen(),
          FourthScreen(),
          FifthScreen()
            ],
          ),
        ),
      ),
    );
  

【讨论】:

谢谢!看起来与其他答案的推理相同(使用 tabIndex !) 不客气 ;)

以上是关于是否可以更改 Flutter 中所选标签栏图标的大小?的主要内容,如果未能解决你的问题,请参考以下文章

如何更改选项卡布局中所选选项卡的形状?

如何快速更改标签栏未选择图标的颜色?

更改 Android 上的导航栏图标颜色

如何使用 Flutter 更改状态栏颜色?

状态栏中图标的颜色 (Flutter)

React-navigation tabbar 中间的大图标