flutter - 颤动BottomAppBar选择颜色
问题描述
所以我目前有以下用于我的底部导航
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
child: Container(
decoration:
new BoxDecoration(color: new Color(0xFFFF0000)),
height: 75,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(left: 28.0),
icon: Icon(Icons.home),
onPressed: () {
setState(() {
onTabTapped(0);
});
},
),
IconButton(
iconSize: 30.0,
//padding: EdgeInsets.only(left: 28.0),
icon: Icon(Icons.view_headline),
onPressed: () {
setState(() {
onTabTapped(2);
});
},
),
/* IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(right: 28.0),
icon: Icon(Icons.search),
onPressed: () {
setState(() {
onTabTapped(1);
});
},
),
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(left: 28.0),
icon: Icon(Icons.notifications),
onPressed: () {
setState(() {
onTabTapped(2);
});
},
),*/
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(right: 28.0),
icon: Icon(Icons.info_outline),
onPressed: () {
setState(() {
onTabTapped(1);
});
},
)
],
),
),
),
但是,我注意到它不会使活动页面或选择变成不同的颜色。例如,我想要的是因为第一页是主页图标应该是白色而不是黑色。
我想知道我需要添加什么来制作?基本上如果选择的颜色应该是白色的。
我找到的解决方案是将代码更改为以下内容:
bottomNavigationBar: new Theme(
data: Theme.of(context).copyWith(
// sets the background color of the `BottomNavigationBar`
canvasColor: Colors.red,
// sets the active color of the `BottomNavigationBar` if `Brightness` is light
primaryColor: Colors.black,
textTheme: Theme
.of(context)
.textTheme
.copyWith(caption: new TextStyle(color: Colors.black))), // sets the inactive color of the `BottomNavigationBar`
child: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.view_headline),
title: Text('News'),
),
BottomNavigationBarItem(
icon: Icon(Icons.more),
title: Text('More'),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.white,
onTap: onTabTapped,
),
),
解决方案
老问题,但没有答案,所以也许这将有助于指导某人
处理此问题的一种方法是使用三元检查索引。基于OP的示例:
_selectedIndex
为您的班级中的 int 做一个参考:
int _selectedIndex = 0;
你IconButton
在你的BottomAppBar
(我在这里删除了setState
电话):
IconButton(
iconSize: 30.0,
icon: Icon(Icons.view_headline, color: _selectedIndex == 2 ? Colors.white : Colors.black),
onPressed: () {
onTabTapped(2);
},
),
你的OnTabTapped
方法:
void onTabTapped(int index) {
setState(() {
_selectedIndex = index;
///call your PageController.jumpToPage(index) here too, if needed
});
}
现在,当您点击图标时,它将更改_selectedIndex
内的变量setState
,然后将重建您的图标并适当地选择它们的颜色(所选图标将为白色,其余为黑色)。
推荐阅读
- c++ - 动态创建在 C++ 中完美转发的函数参数
- python - python在if语句中超出索引
- c# - 如何避免带有重复控制器名称的 AmbiguousMatchException
- visual-studio-code - 如何从 vscode 中的全局 launch.json 中删除配置
- r - 带有 facet_wrap 的数学符号无法正确显示
- c# - 在 C# 中正确使用 VB 的 GetObject
- sabre - API 令牌:如何访问 Sabre SOAP API?
- .net-core - 使用 Projections 不会加载使用数据加载器解析的字段
- xamarin.forms - Xamarin 表单 PropertyChanged 对象为空
- r - 错误:“命名空间:ff”未导出对象“克隆”