我试图在点击时更改我的 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,
关于flutter - 如何更改 Flutter 底部导航栏中的 SVG 图标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65914067/