Flutter BottomNavigationBar报错:命名参数'title'未定义
报错原因
这是Flutter版本升级后的API不兼容变更导致的编译错误:
Flutter 1.22之前的版本中,BottomNavigationBarItem组件确实提供title命名参数用于传入导航项的文本组件,但从1.22版本开始官方废弃了该参数,在Flutter 2.0及之后的所有正式稳定版本中,title参数已经被彻底移除,取而代之的是字符串类型的label参数用于配置导航项文本。代码中传入已经被移除的title参数时,就会触发“命名参数'title'未定义”的编译报错。
修改方案
- 将所有
BottomNavigationBarItem中的title参数替换为label,参数值无需传入Text组件,直接填写对应的文本字符串即可 - 原代码中写在
Text组件里的未选中文本样式,不需要在每个导航项中单独配置,统一在BottomNavigationBar根组件上通过unselectedLabelStyle属性设置即可,选中状态的文字颜色会自动复用已配置的selectedItemColor值,无需额外调整。
修改后的完整可运行代码如下:
return BottomNavigationBar( type: BottomNavigationBarType.fixed, // 统一配置未选中状态的文字样式 unselectedLabelStyle: const TextStyle(color: Color(0xFF545454)), items: const <BottomNavigationBarItem>[ BottomNavigationBarItem( icon: Icon(Icons.home), label: 'Home', ), BottomNavigationBarItem( icon: Icon(FontAwesomeIcons.heart), label: 'Wish List', ), BottomNavigationBarItem( icon: Icon(FontAwesomeIcons.shoppingBag), label: 'Cart', ), BottomNavigationBarItem( icon: Icon(FontAwesomeIcons.dashcube), label: 'Dashboard', ), ], currentIndex: _selectedIndex, selectedItemColor: Color(0xFFAA292E), onTap: _onItemTapped, ); } }
内容的提问来源于stack exchange,提问作者dh-pal
相关产品推荐
相关产品推荐

