为什么点击后BottomNavigationBarItem的标签没有变化?
Why the label of BottomNavigationBarItem doesn't change after clicking?
我选择的和未选择的 BottomNavigationBarItems 的标签颜色没有改变...我尝试了很多方法,比如
selectedItemColor: Colors.blue,
unselectedItemColor: Colors.black,
和
unselectedLabelStyle: const TextStyle(color: Colors.grey, fontSize: 14),
selectedLabelStyle: const TextStyle(color: Colors.blue, fontSize: 14),
等等。
我究竟做错了什么?这是代码:
class RandomWordsState extends State<RandomWords> {
var _currentIndex = 0;
var _pageList = [HomePage(), RecommendPage(), PersonalPage()];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('APPBAR'),
centerTitle: true,
elevation: 10,
),
//body: this._pageList[this._currentIndex],
body: IndexedStack(index: _currentIndex, children: _pageList,),
bottomNavigationBar: BottomNavigationBar(
selectedItemColor: Colors.blue,
unselectedItemColor: Colors.black,
//unselectedItemColor: Colors.black,
//selectedItemColor: Colors.blue,
//selectedLabelStyle: TextStyle(fontSize: 22),
//selectedItemColor: Colors.red,
//fixedColor: Colors.blue,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(
Icons.home,
//color: _currentIndex == 0 ? Colors.blue : Colors.grey,
),
label: "A",
),
BottomNavigationBarItem(
label: "B",
icon: Icon(
Icons.recommend,
//color: _currentIndex == 1 ? Colors.blue : Colors.grey,
),
),
BottomNavigationBarItem(
icon: Icon(
Icons.person,
//color: _currentIndex == 2 ? Colors.blue : Colors.grey,
),
label: "C",
)
],
onTap: (value){
setState(() {
this._currentIndex = value.toInt();
});
},
// unselectedLabelStyle: const TextStyle(color: Colors.grey, fontSize: 14),
// selectedLabelStyle: const TextStyle(color: Colors.blue, fontSize: 14),
type: BottomNavigationBarType.fixed,
),
);
}
}
或者,另一方面,有没有办法改变 BottomNavigationBarItem 中标签的颜色?
谢谢
需要在BottomNavigationBar
上提供currentIndex
才能看到效果
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
更多关于 BottomNavigationBar。
我选择的和未选择的 BottomNavigationBarItems 的标签颜色没有改变...我尝试了很多方法,比如
selectedItemColor: Colors.blue,
unselectedItemColor: Colors.black,
和
unselectedLabelStyle: const TextStyle(color: Colors.grey, fontSize: 14),
selectedLabelStyle: const TextStyle(color: Colors.blue, fontSize: 14),
等等。 我究竟做错了什么?这是代码:
class RandomWordsState extends State<RandomWords> {
var _currentIndex = 0;
var _pageList = [HomePage(), RecommendPage(), PersonalPage()];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('APPBAR'),
centerTitle: true,
elevation: 10,
),
//body: this._pageList[this._currentIndex],
body: IndexedStack(index: _currentIndex, children: _pageList,),
bottomNavigationBar: BottomNavigationBar(
selectedItemColor: Colors.blue,
unselectedItemColor: Colors.black,
//unselectedItemColor: Colors.black,
//selectedItemColor: Colors.blue,
//selectedLabelStyle: TextStyle(fontSize: 22),
//selectedItemColor: Colors.red,
//fixedColor: Colors.blue,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(
Icons.home,
//color: _currentIndex == 0 ? Colors.blue : Colors.grey,
),
label: "A",
),
BottomNavigationBarItem(
label: "B",
icon: Icon(
Icons.recommend,
//color: _currentIndex == 1 ? Colors.blue : Colors.grey,
),
),
BottomNavigationBarItem(
icon: Icon(
Icons.person,
//color: _currentIndex == 2 ? Colors.blue : Colors.grey,
),
label: "C",
)
],
onTap: (value){
setState(() {
this._currentIndex = value.toInt();
});
},
// unselectedLabelStyle: const TextStyle(color: Colors.grey, fontSize: 14),
// selectedLabelStyle: const TextStyle(color: Colors.blue, fontSize: 14),
type: BottomNavigationBarType.fixed,
),
);
}
}
或者,另一方面,有没有办法改变 BottomNavigationBarItem 中标签的颜色? 谢谢
需要在BottomNavigationBar
上提供currentIndex
才能看到效果
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
更多关于 BottomNavigationBar。