首页 文章

Flutter BottomNavigationBar Colors

提问于
浏览
0

我正在尝试更改BottomNavigation图标的选定颜色,但我似乎要实现的只是更改文本颜色 . 请协助:

目前,文本颜色在选中时会变为黄色,但图标会保持白色,我希望它也是黄色的,我尝试将非活动图标的图标颜色设置为灰色,如 Headers 但它没有变形 .
enter image description here

这是我的代码:

new Theme(
        data: Theme.of(context).copyWith(
          canvasColor: Colors.black,
          splashColor: Colors.yellowAccent,
            unselectedWidgetColor: Colors.green,
          primaryColor: Colors.red,
          textTheme: Theme.of(context).textTheme.copyWith(caption: new TextStyle(color: Colors.grey))
        ),
        child: new BottomNavigationBar(
          items: <BottomNavigationBarItem>[
            new BottomNavigationBarItem(
                icon: const Icon(Icons.add_shopping_cart, color: Colors.white,),
                title: new Text("Services"),
            ),
            new BottomNavigationBarItem(
                icon: new Theme(
                  data: new ThemeData(

                  ),
                    child: const Icon(Icons.calendar_today, color: Colors.white,)),
                title: new Text("Appointment")
            ),
            new BottomNavigationBarItem(
                icon: const Icon(Icons.face, color: Colors.white,),
                title: new Text("Profile")
            )
          ],
          currentIndex: index,
          onTap: (int i){setState((){index = i;});},
          fixedColor: Colors.yellowAccent,
          type: BottomNavigationBarType.fixed,
        ),
      )

1 回答

  • 1

    您已为每个图标明确设置 color: Colors.white ,因此它们将为白色,否则您将设置它们 .

    你有几个选择:

    1)将BottomNavigationBar的类型设置为 type: BottomNavigationBarType.fixed 并设置 fixedColor: Colors.orange 或您想要的任何颜色 . 请注意,您必须删除 color: Colors.white ,否则它们仍然是白色的 .

    2)您可以测试正确设置的索引,然后决定将图标直接设置为哪种颜色,即第一项为 color = index == 0 ? selectedColor : unselectedColor ,第二项为 index==1 ,第三项为 item==2 .

    3)稍微替代的方法是在整个BottomNavigationBar周围设置一个带有color = unselectedColor的IconTheme,然后只用 color = index == 0 ? selectedColor : null 设置所选项目 .

    我建议阅读BottomNavigationBar documentation,特别是关于固定与移位的部分,因为它描述了你所遇到的确切问题的答案 .

相关问题