Flutter改变NavigationBarThemeData标签的textstyle颜色

Question

我在底部导航栏中使用了NavigationBarTheme。我想问一下，如果有可能改变labelTextStyle时选择?目前，我只有灰色。

bottomNavigationBar: NavigationBarTheme(
data: NavigationBarThemeData(
height: 65,
indicatorColor: Colors.transparent,
backgroundColor: Colors.white,
labelTextStyle: MaterialStateProperty.all(
const TextStyle(
fontSize: 13.0,
fontWeight: FontWeight.w700,
color: Colors.grey,
letterSpacing: 1.0,
),
),
),

Answer 1

既然BottomNavigationBar有一个叫做selectedLableStyle的属性，你可以像下面这样使用它-

bottomNavigationBar: BottomNavigationBar(
// this is the property use to style lable
selectedLabelStyle: TextStyle(fontSize: 22),
selectedItemColor: Colors.red,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
],
),

如果你想在你的问题中使用NavigationBarTheme，那么使用MaterialStateProperty.resolveWith而不是MaterialStateProperty。都像下面-

bottomNavigationBar: NavigationBarTheme(
data: NavigationBarThemeData(
height: 65,
indicatorColor: Colors.transparent,
backgroundColor: Colors.white,
labelTextStyle: MaterialStateProperty.resolveWith((states) {
if (states.contains(MaterialState.selected)) {
return const TextStyle(
fontSize: 13.0,
fontWeight: FontWeight.w700,
color: Colors.red,
letterSpacing: 1.0,
);
}
return const TextStyle(
fontSize: 13.0,
fontWeight: FontWeight.w700,
color: Colors.grey,
letterSpacing: 1.0,
);
}
),
),

查看更多信息- BottomNavigationBar, MaterialStateProperty