英文:
How to create a transparent Material 3 NavigationBar in Flutter?
问题
我想要使我的NavigationBar透明。我尝试了在Scaffold上使用extendBody: true以及将surfaceTintColor=Colors.transparent应用于NavigationBar小部件，但没有任何变化。
英文:
I want to make my NavigationBar transparent. I have tried extendBody: true on Scafold with surfaceTintColor=Colors.transparent to the NavigationBar widget, but nothing changed.
答案1
得分: 0
根据文件，SurfaceTintColor 是应用于应用栏的背景颜色的表面色调叠加的颜色，用于指示高程。
如果您想使 AppBar 透明，只需使用属性 backgroundColor。
Scaffold(
extendBody: true,
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.transparent, // 使 appBar 透明
/// 这不是必要的。您可以尝试调整
/// 当 AppBar 透明时的 surfaceTintColor
surfaceTintColor: Colors.redAccent,
elevation: 3,
title: Text(widget.title),
),
),
它也应用于 NavigationBar
bottomNavigationBar: NavigationBar(
surfaceTintColor: Colors.amber, // 不是必要的
backgroundColor: Colors.transparent,
destinations: [
Icon(Icons.book, color: Colors.blue,),
Icon(Icons.map, color: Colors.blue,),
],
),
英文:
According to the document, SurfaceTintColor is the color of the surface tint overlay applied to the app bar's background color to indicate elevation.
If you want to make the AppBar transparent, just use the property backgroundColor instead.
Scaffold(
extendBody: true,
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.transparent, // To make appBar transparent
/// This is not necessary. You can play around
/// to see surfaceTintColor when the AppBar is transaprent
surfaceTintColor: Colors.redAccent,
elevation: 3,
title: Text(widget.title),
),
),
It is also applied to NavigationBar
bottomNavigationBar: NavigationBar(
surfaceTintColor: Colors.amber, // not neccessary
backgroundColor: Colors.transparent,
destinations: [
Icon(Icons.book, color: Colors.blue,),
Icon(Icons.map, color: Colors.blue,),
],
),
答案2
得分: 0
你可以使用SystemChrome.setSystemUIOverlayStyle和ColoredBox来使NavigationBar变为透明。
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(
const SystemUiOverlayStyle(
systemNavigationBarColor: Colors.transparent,
),
);
return Scaffold(
bottomNavigationBar: ColoredBox(
color: Colors.transparent,
child: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: 'Settings',
),
],
),
),
// 其他部分...
);
}
它适用于Android和Web。
英文:
You can use SystemChrome.setSystemUIOverlayStyle and ColoredBox to make NavigationBar become transparent.
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(
const SystemUiOverlayStyle(
systemNavigationBarColor: Colors.transparent,
),
);
return Scaffold(
bottomNavigationBar: ColoredBox(
color: Colors.transparent,
child: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: 'Settings',
),
],
),
),
...
It work on Android and Web.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论