英文:
New Navigation Bar label colour in Flutter
问题
我有一个导航栏，想要更改其颜色，但在文档中找不到有关更改标签颜色的任何信息，有关如何做到这一点的任何想法吗？我的当前代码：
bottomNavigationBar: NavigationBar(
backgroundColor: Colors.lightBlue[100]!,
destinations: const [
NavigationDestination(
icon: Icon(Icons.home, color: Colors.white,),
label: 'Home',
),
NavigationDestination(
icon: Icon(Icons.money, color: Colors.white),
label: 'Expenses',
),
],
),
就我所看，标签是一个字符串，但我如何更改这个字符串的颜色呢？我的第一个想法是使用Text()，但标签只接受字符串。
非常感谢您的帮助！
英文:
I have a navigation bar and I would like to change its colour, but I can't seem to find in the documentation anything about changing the label colour, any ideas on how to do so? My current code:
bottomNavigationBar: NavigationBar(
backgroundColor: Colors.lightBlue[100]!,
destinations: const [
NavigationDestination(
icon: Icon(Icons.home, color: Colors.white,),
label: 'Home',
),
NavigationDestination(
icon: Icon(Icons.money, color: Colors.white),
label: 'Expenses',
),
],
),
as far as I can see the label is a string, but how do I change the colour of this string? My first idea was to use Text(), but label only accepts strings.
Thank you so much in advance!
答案1
得分: 2
- 创建一个名为"your_file_name_theme.dart"的文件。(您可以更改您喜好的颜色)
final ThemeData myappTheme = ThemeData(
navigationBarTheme: NavigationBarThemeData(
labelTextStyle: MaterialStateProperty.resolveWith((state) {
if (state.contains(MaterialState.selected)) {
return const TextStyle(color: Colors.orange);
}
return const TextStyle(color: Colors.green);
}),
),
);
- 在您的MaterialApp小部件中添加以下内容。(在我的情况下，我称之为myappTheme)
MaterialApp(
theme: myappTheme,
- 重新启动应用程序
英文:
You have to do as the following:
- create "your_file_name"_theme.dart. (You may change the color of your preference)
final ThemeData myappTheme = ThemeData(
navigationBarTheme: NavigationBarThemeData(
labelTextStyle: MaterialStateProperty.resolveWith((state) {
if (state.contains(MaterialState.selected)) {
return const TextStyle(color: Colors.orange);
}
return const TextStyle(color: Colors.green);
}),
),
);
- In your MaterialApp widget, add the following. (In my case, I called it myappTheme)
MaterialApp(
theme: myappTheme,
- Restart the app
答案2
得分: 2
你可以使用NavigationBarTheme包裹NavigationBar小部件，然后可以根据需要应用样式。要更改标签颜色，可以执行以下操作：
bottomNavigationBar: NavigationBarTheme(
data: NavigationBarThemeData(
labelTextStyle: MaterialStateProperty.resolveWith<TextStyle>(
(Set<MaterialState> states) => states.contains(MaterialState.selected)
? const TextStyle(color: Colors.blue)
: const TextStyle(color: Colors.black),
),
),
child: NavigationBar(
backgroundColor: Colors.lightBlue[100]!,
destinations: const [
NavigationDestination(
icon: Icon(Icons.home, color: Colors.white,),
label: 'Home',
),
NavigationDestination(
icon: Icon(Icons.money, color: Colors.white),
label: 'Expenses',
),
],
),
)
英文:
You can wrap the NavigationBar widget with NavigationBarTheme and then you can apply styles as you like. To change label color you can do the following:
bottomNavigationBar: NavigationBarTheme(
data: NavigationBarThemeData(
labelTextStyle: MaterialStateProperty.resolveWith<TextStyle>(
(Set<MaterialState> states) => states.contains(MaterialState.selected)
? const TextStyle(color: Colors.blue)
: const TextStyle(color: Colors.black),
),
),
child: NavigationBar(
backgroundColor: Colors.lightBlue[100]!,
destinations: const [
NavigationDestination(
icon: Icon(Icons.home, color: Colors.white,),
label: 'Home',
),
NavigationDestination(
icon: Icon(Icons.money, color: Colors.white),
label: 'Expenses',
),
],
),)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论