flutter - Flutter如何在BottomNavigationBar中添加边距或填充
问题描述
我正在尝试制作底部导航栏,但在屏幕上左右填充。现在我用容器包装 BottomNavigationBar 并在那里添加填充。问题是 BottomNavigationBar 默认背景仍然包裹所有图层,那么我们可以删除那里的背景颜色吗?
bottomNavigationBar: Container(
margin: EdgeInsets.only(left: 16, right: 16),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20)),
),
child: BottomNavigationBar(
backgroundColor: Colors.transparent,
showUnselectedLabels: true,
type: BottomNavigationBarType.fixed,
elevation: 0,
currentIndex: _currentIndex,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text('Home')),
BottomNavigationBarItem(
icon: Icon(Icons.local_activity), title: Text('Activity')),
BottomNavigationBarItem(
icon: Icon(Icons.inbox), title: Text('Inbox')),
BottomNavigationBarItem(
icon: Icon(Icons.person), title: Text('Profile')),
],
),
),
编辑:我已经删除了脚手架和所有主题中的背景颜色,但是当你滚动项目时,你可以看到那里仍然有背景 删除脚手架 bg
编辑2:这里是活动的代码
class App extends StatelessWidget {
final List<Widget> _children = [
Center(
child: Container(
height: 850,
color: Colors.red,
),
)
];
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: _children[0],
bottomNavigationBar: Container(
margin: EdgeInsets.only(left: 16, right: 16),
decoration: BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(200), topRight: Radius.circular(200)),
),
child: BottomNavigationBar(
backgroundColor: Colors.transparent,
showUnselectedLabels: true,
type: BottomNavigationBarType.fixed,
elevation: 0,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text('Home')),
BottomNavigationBarItem(
icon: Icon(Icons.local_activity), title: Text('Activity')),
BottomNavigationBarItem(
icon: Icon(Icons.inbox), title: Text('Inbox')),
BottomNavigationBarItem(
icon: Icon(Icons.person), title: Text('Profile')),
],
),
),
),
);
}
}
解决方案
您需要将 theBody
和 theBottomNavigationBar
放在 a 下,Stack
以便BottomNavigationBar
可以将其放在主体内容的顶部。
您的完整代码将是:
import 'package:flutter/material.dart';
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
final List<Widget> _children = [
Center(
child: Container(
height: 850, // use 'MediaQuery.of(context).size.height' to fit the screen height,
color: Colors.red,
),
)
];
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Stack(
children: <Widget>[
_children[0],
Positioned(
left: 0,
right: 0,
bottom: 0,
child: bottomNavigationBar(),
),
],
),
));
}
}
Widget bottomNavigationBar() {
return Container(
margin: EdgeInsets.only(left: 16, right: 16),
decoration: BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(200), topRight: Radius.circular(200)),
),
child: BottomNavigationBar(
backgroundColor: Colors.transparent,
showUnselectedLabels: true,
type: BottomNavigationBarType.fixed,
elevation: 0,
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
BottomNavigationBarItem(
icon: Icon(Icons.local_activity), title: Text('Activity')),
BottomNavigationBarItem(icon: Icon(Icons.inbox), title: Text('Inbox')),
BottomNavigationBarItem(
icon: Icon(Icons.person), title: Text('Profile')),
],
),
);
}
部分代码来自:
推荐阅读
- javascript - javascript:function.bind(object) 的问题 - “this”保留为全局对象
- python - 以前的表单数据应用于表单以在 django 中进行编辑
- javascript - 如何更改通过 React Router 传递的道具的状态?
- android - 刷新 TableLayout 以显示插入的新行
- c# - ASP CORE Identity 浏览器登录失败,但通过 UserManager.CheckPasswordAsync 与文字字符串工作
- spring - 春季批处理 HibernateCursorItemReaderBuilder 抛出 QuerySyntaxException
- c# - 从控制台读取空格后的变量
- java - 使用 xmlbeans、inst2xsd 和 Maven 从 XML 生成 XSD
- html - 我无法在 css 中设置任何 html/jsx 标记的样式,因为它说'h1“选择器”不是纯的'
- python - 如何将结果转换为列表-Python