flutter - 如何更改 Flutter 底部导航栏中的 SVG 图标?
问题描述
我正在尝试在被点击时更改我的 SVG 图标颜色。我试过了,selectedColor
但图标没有改变颜色。所以我试图使用快捷方式 if...else 语句,但我仍然没有改变颜色。
这是代码:
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: SvgPicture.asset('assets/dashboard-outline.svg', width: 25),
label: 'Dashboard'
),
BottomNavigationBarItem(
icon: SvgPicture.asset('assets/tank-outline.svg', color: Colors.black54, width: 30),
label: 'Tanks',
),
BottomNavigationBarItem(
icon: SvgPicture.asset('assets/activity-outline.svg', width: 18),
label: 'Activity'
),
BottomNavigationBarItem(
icon: SvgPicture.asset('assets/account-outline.svg', width: 20),
label: 'Account'
),
],
currentIndex: _index,
onTap: _onItemTapped,
selectedItemColor: Color.fromRGBO(0,99,183,1)
),
我有一个不同的 SVG 图片图标文件,可以在点击时更改它。
这是我正在尝试的代码:
bool onSelected = true;
Widget build(BuildContext context) {
return Scaffold(
body: _myPages[_index],
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: SvgPicture.asset(onSelected == false ? 'assets/dashboard-outline.svg' : 'assets/dashboard-fill.svg', width: 25),
label: 'Dashboard'
),
任何帮助,将不胜感激。
解决方案
您可以更改您的项目并验证此属性以定义正确的颜色:
SvgPicture.asset(
'assets/dashboard-outline.svg',
width: 25),
color: _currentIndex == 0 ? Colors.red : Colors.black,
推荐阅读
- angular - 如何在 Angulrar Schematics 中添加包依赖(官方)
- nginx - 将 nginx www 重定向到 https
- xamarin.forms - 适用于 Xamarin.Forms 弹出菜单的 SlideOverKit
- youtube-api - 如何使用 Youtube API 上传视频并运行版权检查?
- python - Debian 软件包是否有标准/推荐的目录结构?
- excel - 从多维数组中找到的 TODAY() 获取标题行值
- reactjs - MapboxGL 显示用户位置,精度差
- html - 在 2 个链接之间切换
- javascript - Chart.js 图表未显示
- sql - 如何将一个大而慢的 PostgreSQL 查询分割成更小的查询然后合并?