我是Flutter的新手。我正在尝试实现这个UI：
我还没有找到在Flutter中创建透明底部导航栏的有用解决方案。
我已经尝试使用
BottomNavigationBarItem(
backgroundColor: Colors.transparent,
icon: e,
activeIcon: _activeIcons[_index],
title: Text(
title[_index],
style: AppStyle.tabBarItem,
),
)
但这似乎不起作用。请帮忙。
对我来说，所给出的答案都没有用，但我发现了非常重要的一点：您必须添加属性extendBody: true。
如果为true，并且指定了bottomNavigationBar或persistentFooterButtons，则body会延伸到Scaffold的底部，而不仅仅是延伸到bottomNavigationBar或persistentFooterButtons的顶部。
当bottomNavigationBar具有非矩形形状（如CircularNotchedRectangle）时，此属性通常很有用，该形状在栏的顶边缘添加了大小为FloatingActionButton的缺口。在这种情况下，指定extendBody：true可确保Scaffold的主体通过底部导航栏的缺口可见
连同 backgroundColor: Color(0x00ffffff),。
NB：以0x开头的颜色值是十六进制的ARGB值（0xAARRGGBB），因此ffffff前面的00表示最大透明度，您可以通过将00增加到ff（十六进制中的255）来增加不透明度。
完整的代码示例：
import 'package:flutter/material.dart';
class NavigationBar extends StatefulWidget {
static int _selectedIndex = 0;
@override
NavigationBarState createState() => NavigationBarState();
}
class NavigationBarState extends State<NavigationBar> {
void _onItemTapped(int index) {
setState(() {
NavigationBar._selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return BottomNavigationBar(
elevation: 0, // to get rid of the shadow
currentIndex: NavigationBar._selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
backgroundColor: Color(0x00ffffff), // transparent, you could use 0x44aaaaff to make it slightly less transparent with a blue hue.
type: BottomNavigationBarType.fixed,
unselectedItemColor: Colors.blue,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.grade),
label: 'Level',
),
BottomNavigationBarItem(
icon: Icon(Icons.notifications),
label: 'Notification',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'Achievements',
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: 'Settings',
),
]
);
}
@override
Size get preferredSize => const Size.fromHeight(kToolbarHeight);
}
那么你在 MaterialApp 中的返回位置:
return MaterialApp(
home: Scaffold(
extendBody: true, // very important as noted
bottomNavigationBar: NavigationBar(), // here you make use of the transparent bar.
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: ExactAssetImage("assets/background.png"), // because if you want a transparent navigation bar I assume that you have either a background image or a background color. You need to add the image you want and also authorize it in pubspec.yaml
fit: BoxFit.fill
),
),
child: Container(
// the body of your app
),
),
),
);
}
}
我希望这会有所帮助。
type: BottomNavigationBarType.fixed,，谢谢。 - Mamrezo使用评论中讨论的堆栈方法尝试：
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/background.jpg'),
fit: BoxFit.cover),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Theme(
data: Theme.of(context)
.copyWith(canvasColor: Colors.transparent),
child: BottomNavigationBar(
currentIndex: 0,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text('Home')),
BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text('Home')),
BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text('Home'))
],
))),
],
),
),
);
}
编辑： BottomNavigationBar 内置了一个不可更改的高度为 8.0 的阴影效果，导致出现奇怪的阴影。如果您想要去除这个阴影效果，您可以像下面这样实现自己的底部导航栏：
Align(
alignment: Alignment.bottomCenter,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
IconButton(icon: Icon(Icons.home, color: Theme.of(context).accentColor,), onPressed: () {},),
IconButton(icon: Icon(Icons.home, color: Theme.of(context).accentColor,), onPressed: () {},),
IconButton(icon: Icon(Icons.home, color: Theme.of(context).accentColor,), onPressed: () {},),
],)),
ListTile，因为据我所知它们有固定的高度。 - soupjakeListView 不一定要由 ListTile 组成，子元素可以是任何类型的 Widget，因此我想你可以使用 Row 或创建自己版本的 ListTile。 - soupjake这是我实现它的方式
return Scaffold(
body: Builder(
builder: (context) => Container(
decoration: bgAuthenticationDecoration(),
child: _HomeBodyWidget(_currentIndex),
),
),
bottomNavigationBar: BottomNavigationBar(items: <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.home,),title: Container()),
BottomNavigationBarItem(icon: Icon(Icons.message),title: Container()),
BottomNavigationBarItem(icon: Icon(Icons.list),title: Container()),
BottomNavigationBarItem(icon: Icon(Icons.favorite),title: Container()),
BottomNavigationBarItem(icon: Icon(Icons.supervised_user_circle),title: Container()),
],
backgroundColor:Colors.black.withOpacity(0.1),),
extendBodyBehindAppBar: true,
extendBody: true,
);
接下来您需要在应用程序主题中将画布颜色设置为透明。
canvasColor: Colors.transparent
在新版Flutter（1.2.1）中，有一个与海拔高度相关的参数，您可以将其设置为 elevation: 0.0
Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage("https://cdn.pixabay.com/photo/2018/09/17/16/24/cat-3684184_960_720.jpg")
)
),
),
Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Theme(
data: Theme.of(context).copyWith(canvasColor: Colors.transparent),
child: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.photo_camera), title: Text("Test")),
BottomNavigationBarItem(
icon: Icon(Icons.photo_camera), title: Text("Test")),
],
),
)
],
)
],
);
end的列内的底部导航栏来填充整个屏幕（图像纯粹是琐碎的，但您会得到这个意思）。Row自己实现了BottomNavigationBar，因此此屏幕（小部件）的构建方法不会产生阴影。@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
"https://media.idownloadblog.com/wp-content/uploads/2016/04/macinmac-portrat-splash.jpg"))),
),
Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
GestureDetector(
onTap: () {
print("Tap!");
},
child: Icon(
Icons.photo_camera,
size: 50,
)),
GestureDetector(
onTap: () {
print("Tap!");
},
child: Icon(
Icons.photo_camera,
size: 50,
)),
GestureDetector(
onTap: () {
print("Tap!");
},
child: Icon(
Icons.photo_camera,
size: 50,
)),
GestureDetector(
onTap: () {
print("Tap!");
},
child: Icon(
Icons.photo_camera,
size: 50,
)),
],
)
],
)
],
);
这是我手机上的截图：
奖励
您可以通过调用以下方法实现全屏：
SystemChrome.setEnabledSystemUIOverlays([]);
source: here
使用BottomNavigationBar非常简单。
只需在BottomNavigationBar中添加这些属性即可。
backgroundColor: Color(0x00ffffff),
elevation: 0,
type: BottomNavigationBarType.fixed,
添加这些后，我的代码看起来像这样。
BottomNavigationBar(
selectedItemColor: MyTheme.primary_color,
unselectedItemColor: Color.fromRGBO(153, 153, 153, 1),
backgroundColor: Color(0x00ffffff),
elevation: 0,
type: BottomNavigationBarType.fixed,
currentIndex: _currentIndex,
onTap: (index) {
_currentIndex = index;
},
items: [
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
SingleChildScrollView(
child: Center(
child: Column(
children: <Widget>[
child(),
child(),
child(),
child(),
child(),
],
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Opacity(opacity: showBottomBar ? 1 : 0, child: bottomBar()),
)
],
),
);
好消息是，我找到了解决方案，而且非常简单！
Widget build(BuildContext context) {
// Set Android Bar Transparent
SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
SystemChrome.setSystemUIOverlayStyle(
const SystemUiOverlayStyle(
//NavigationBar
systemNavigationBarColor: Colors.transparent,
systemNavigationBarContrastEnforced: false,
systemNavigationBarIconBrightness: Brightness.dark,
//StatusBar
// systemStatusBarContrastEnforced: false,
statusBarColor: Colors.transparent,
statusBarIconBrightness: Brightness.dark,
),
);
2022解决方案 非常非常简单
1-透明颜色 2-零高程
BottomNavigationBar(
type: BottomNavigationBarType.fixed,
backgroundColor: Colors.transparent,
elevation: 0,
backgroundColor: const Color(0x00FFFFFF)
0x00 = 0％不透明度
Stack，将两个女孩的图像作为底层（堆栈的底部），并使用全屏的Column，将MainAxisSize设置为MainAxisSize.max，将MainAxisAlignment设置为MainAxisAlignment.end。我可以写一个答案，但现在无法测试，所以我更喜欢写一个评论。希望能有所帮助。 - magicleon94