Question

我有带有图标和文本的 TabBar：

child: TabBar(
    labelColor: Colors.white,
    unselectedLabelColor: Colors.grey,
    labelStyle: TextStyle(fontSize: 13.0),
    indicator: BoxDecoration(
        borderRadius: BorderRadius.circular(50), // Creates border
        color: const Color(0xFF62A6E9)),
    tabs: [
        Tab(icon: SvgPicture.asset(
            'assets/trending.svg',
            color: const Color(0xFF71768D),
                width: 15,
                height: 15
        ), text: "Популярное"),
        Tab(icon: SvgPicture.asset(
            'assets/new.svg',
            color: const Color(0xFF71768D),
                width: 15,
                height: 15
        ), text: "Новые"),
        Tab(icon: SvgPicture.asset(
            'assets/comingsoon.svg',
            color: const Color(0xFF71768D),
                width: 15,
                height: 15
        ), text: "Ожидаемые"),
    ],
),

我需要更改选中的选项卡图标颜色，SvgPicture 具有填充图标的颜色属性

Answer 1

您需要为您选择的选项卡提供一个 TabController 并根据 TabController 的索引，您可以更改颜色。

 TabController _tabController;

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

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


TabBar(
 controller: _tabController,
 labelColor: Colors.white,
 unselectedLabelColor: Colors.grey,
 labelStyle: TextStyle(fontSize: 13.0),
 indicator: BoxDecoration(
     borderRadius: BorderRadius.circular(50), // Creates border
     color: const Color(0xFF62A6E9)),
 tabs: [
    Tab(icon: SvgPicture.asset(
        'assets/trending.svg',
        color: _tabController.index == 0
                      ? Colors.black
                      : Color(0xFF71768D),
            width: 15,
            height: 15
     ), text: "Популярное"),
     Tab(icon: SvgPicture.asset(
        'assets/new.svg',
        color: _tabController.index == 1
                      ? Colors.black
                      : Color(0xFF71768D),
            width: 15,
            height: 15
     ), text: "Новые"),
     Tab(icon: SvgPicture.asset(
        'assets/comingsoon.svg',
        color: _tabController.index == 2
                      ? Colors.black
                      : Color(0xFF71768D),
            width: 15,
            height: 15
     ), text: "Ожидаемые"),

编辑：

请同时处理 TabController。

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

Answer 2

第一件事你写'const'颜色，这意味着颜色属性不能改变，因为它是解决这个问题的常量：

创建颜色变量例如：

颜色 color1 = 颜色(0xFF71768D); // 对于第一个标签...等等
在 TabBar 上有一个属性调用 'onTap' 这将使用函数来在单击时更改选项卡的颜色.. 例如：

点击：(){ 设置状态（（）{ color1 = //新颜色 color2 = //新颜色 // 等等 }) }

Answer 3

您可以使用 selectedItemColor 和 unselectedItemColor 属性，您将在此代码中找到它们 =>

class TabsScreen extends StatefulWidget {
  @override
  _TabsScreenState createState() => _TabsScreenState();
}

class _TabsScreenState extends State<TabsScreen> {
  final BorderStyle borderStyle = BorderStyle.solid;
  final List<Map<String, Object>> _pages = [
   {'page': HomeView(), 'title': 'Doctors'},
   {'page': MyCoursesView(), 'title': 'My Courses'}
  ];
  int _selectedPageIndex = 0;

  void _selectPage(int index) {
    setState(() {
      _selectedPageIndex = index;
    });
  }

  Future<void> showExitDialogConfirmation(
     BuildContext context,) async {
       await DialogManager.showExitDialog(context);
  }

  @override
  Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(
            bottom: Radius.circular(20),
          ),
        ),
        title: Text(_pages[_selectedPageIndex]['title'],
          style: TextStyle(
            color: white,
            fontWeight: FontWeight.w700,
            fontFamily: "Roboto",
            fontStyle: FontStyle.normal,
            fontSize: 25)),
          centerTitle: true,
          actions: [
            FlatButton(
              onPressed: () async {
                   await showExitDialogConfirmation(context);
              },
              child: Icon(
                Icons.logout, color: white,),
            ),
         ],
       ),
       body: _pages[_selectedPageIndex]['page'],
       bottomNavigationBar: Container(
       decoration: BoxDecoration(
        //  color: Color(0xfff7f7f7),
         border: Border.all(
         color: mainGoldColor, 
         style: borderStyle,
         width: 3.0,
       ),
       borderRadius: BorderRadius.vertical(
         top: Radius.circular(15.0),
       ),
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(15.0),
          topRight: Radius.circular(15.0),
        ),
        child: BottomNavigationBar(
        onTap: _selectPage,
        backgroundColor: white, 
        unselectedItemColor: Colors.grey,
        selectedItemColor: mainGreenColor, 
        currentIndex: _selectedPageIndex,
        items: [
          BottomNavigationBarItem(
            icon: Icon(
              Icons.person,
              size: 25,
            ),
            title: Text('Doctors',
                style:
                    TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.article,
              size: 25,
            ),
            title: Text(
              'My Courses',
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
              ),
            ),
          ],
        ),
      ),
     ),
   );
  }
 }

Answer 4

工作解决方案

在您的情况下，您应该使用 ld-linux 在 TabBar 上进行更多自定义。要获得活动标签，您应该使用 tabController 并获得活动索引 _tabController.indexIsChanging。

输出

完整代码：

_tabController.index

更改选定的选项卡图标颜色

4 个答案: