Flutter底部导航栏图标颜色不变.这是某种setState错误还是我的代码有什么问题

Question

我是Flutter的新手——事实上，我不是一名程序员，但我正在尝试构建一个应用程序，它可以做一些基本的事情，比如登录页面、注册、用户数据显示在屏幕上，而且我还可以从我卡在底部的应用程序中看到彼此的个人资料。导航栏我从未想过这会很难通过
我没有放弃，而是决定四处搜索，得出不同的结果(其中一些结果很难理解，令人困惑(。我正在尝试构建一个导航栏，以最低的内存使用率(高效代码(路由到不同的页面
我很困惑，现在不知道该怎么办！请帮助另一个编码器(如果有人修复了这个问题，我会认为自己是一个编码器，不要想太多(

@override
Widget build(BuildContext context) {
PageController _pageController = PageController();
final List<Widget> _tabs = [FeedPage(), ListingPage(), SettingPage()];
int _selectedIndex = 0;
void _onPageChanged(int index) {
setState(() {                                //Is something wrong with my setState?
_selectedIndex = index;
});
}
void _onItemTapped(int _selectedIndex) {
_pageController.jumpToPage(_selectedIndex);
}
return Scaffold(
body: PageView(
controller: _pageController,
children: _tabs,
onPageChanged: _onPageChanged,                         //Check it out
physics: NeverScrollableScrollPhysics(),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedIndex,                          //I use this
onTap: _onItemTapped,
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.home,
),
title: Text("Home"),
),
BottomNavigationBarItem(
icon: Icon(
Icons.list,
),
title: Text("List"),
),
BottomNavigationBarItem(
icon: Icon(
Icons.person,
),
title: Text("Profile"),
),
],
),
);
}
}
//is this the code bugged? or something wrong in my flutter IED or something I am confused

Answer 1

尝试下面的代码，在scaffold perntesis之前插入此代码，也不要忘记插入packagege。

bottomNavigationBar: CurvedNavigationBar(
color: Colors.black26,
backgroundColor: Color(0xFFFFC5C5),
buttonBackgroundColor: Colors.greenAccent,
height: 50.0,
animationCurve: Curves.bounceInOut,
items: <Widget>[
Icon(Icons.translate, size: 20, color: Colors.black),
Icon(Icons.translate, size: 20, color: Colors.black),
Icon(Icons.list, size: 20, color: Colors.black),
Icon(Icons.account_balance, size: 20,
color: Colors.black),
//            Icon(Icons.camera, size: 20, color: Colors.black),
],
index: 2,
animationDuration: Duration(milliseconds: 400),
onTap: (index) {
debugPrint("Curent index is $index");
}
)

Answer 2

好吧，我看到你在图标中没有提到颜色，所以页面更改让我们应用相同的逻辑来避免混淆。

因此，让我们在_tabs 的最终列表下面声明一个颜色列表

List<Color> selectedColor = [Colors.grey[900],Colors.grey[900],Colors.grey[900]];

现在我们已经将这些分配给我们的图标作为

items: [
BottomNavigationBarItem(
icon: Icon(
Icons.home,
color: selectedColor[0],                      //Add here
),
title: Text("Home"),
),
BottomNavigationBarItem(
icon: Icon(
Icons.list,
color: selectedColor[1],                      //Add here
),
title: Text("List"),
),
BottomNavigationBarItem(
icon: Icon(
Icons.person,
color: selectedColor[2],                      //Add here
),
title: Text("Profile"),
),
],

现在，由于列表中提到的这一点，所有的都是灰色的

void updateColor(int num){
//here I am again declaring it because when I select the other color the list should //always remain same for the effect you want
selectedColor = [Colors.grey[900],Colors.grey[900],Colors.grey[900]];
setState(() {
switch(num){
case 1 : selectedColor[0] = Colors.Red;
break;
case 2 : selectedColor[1] = Colors.Red;
break;
case 3 : selectedColor[2] = Colors.Red;
break;

}
});
}

现在我们要做的是在你的onChanged函数上调用它，或者你也可以在onTap中提到它，但我不明白你为什么同时使用

我将使用

void _onItemTapped(int _selectedIndex) {
setState(() {                                //Is something wrong with my setState?
_selectedIndex = index;
updateColor(_selectedIndex);
});
_pageController.jumpToPage(_selectedIndex);
}

Answer 3

您可以简单地更改底部导航栏中的颜色，如下所示。

1. 更改的主颜色

   color: Colors.orange,
   

2. 更改背景色

   backgroundColor: Colors.white,
   

3. 更改图标背景色

   buttonBackgroundColor: Colors.orangeAccent,
   

4. 更改图标大小

   Icon(Icons.person, size: 30),
   

示例代码如下

bottomNavigationBar: CurvedNavigationBar(
color: Colors.orange,
backgroundColor: Colors.white,
buttonBackgroundColor: Colors.orangeAccent,
items: <Widget>[
Icon(Icons.person, size: 30),
Icon(Icons.close, size: 30),
Icon(Icons.settings, size: 30),
],
onTap: (index) {

//Handle button tap

},
),

希望这能解决你的问题。