BottomNavigationBar 通过unselectedLabelStyle 设置 item的文字颜色不起效果。

实现底部导航栏的切换时设置文字的选中和未选中颜色,不起效果,相关代码:

class _TabsState extends State<Tabs> {
  int _currentIndex = 0;
  final List<BottomNavigationBarItem> _bottomTabs = [
    BottomNavigationBarItem(
        icon: Image.asset('images/icon_home_02.png', width: 24, height: 24),
        activeIcon:
            Image.asset('images/icon_home_01.png', width: 24, height: 24),
        label: '首页'),
    BottomNavigationBarItem(
        icon: Image.asset('images/icon_devices_02.png', width: 24, height: 24),
        activeIcon:
            Image.asset('images/icon_devices_01.png', width: 24, height: 24),
        label: '设备'),
    BottomNavigationBarItem(
        icon: Image.asset('images/icon_account_02.png', width: 24, height: 24),
        activeIcon:
            Image.asset('images/icon_account_01.png', width: 24, height: 24),
        label: '我的')
  ];

  List _bottomTabsBodies = [HomePage(), DevicesPage(), AccountPage()];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: this._bottomTabsBodies[this._currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this._currentIndex,
        onTap: (int index) {},
        backgroundColor: Colors.white,
        items: this._bottomTabs,
        elevation: ScreenUtil().setHeight(48),
        // unselectedLabelStyle: TextStyle(fontSize: 20, color: Colors.blue),
        unselectedLabelStyle: TextStyle(fontSize: 40, color: Colors.red),
      ),
    );
  }
}

其中关键代码:unselectedLabelStyle: TextStyle(fontSize: 40, color: Colors.red)
其中 设置字体效果是正常的,但是颜色无效果。请教,如何正确设置该颜色变化,望指点,非常感谢。

最佳答案

找到了设置办法:unselectedItemColor: Colors.green 。 但unselectedLabelStyle 不就是设置 label 的样式的么,这里为什么不起作用呢??

3个月前 评论
讨论数量: 1

找到了设置办法:unselectedItemColor: Colors.green 。 但unselectedLabelStyle 不就是设置 label 的样式的么,这里为什么不起作用呢??

3个月前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!