Flutter如何在BottomNavigationBar中添加页边距或填充
Flutter如何在BottomNavigationBar中添加页边距或填充
提问于 2019-11-15 22:51:41
我试图使底部导航栏，但在屏幕上左右填充。现在，我用容器包装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')),
],
),
),编辑:我已经删除了脚手架和所有主题的背景色，但当你有滚动的项目，你可以看到仍然有背景Remove Scafold 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')),
],
),
),
),
);
}
}
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-11-16 17:13:58
您需要将Body和BottomNavigationBar放在一个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')),
],
),
);
}来自：的部分代码
How to set border radius to bottom app bar in a flutter app?
Stack Overflow用户
发布于 2021-01-06 18:17:16
我知道现在有点晚了。但这应该会对像我这样的未来观众有所帮助。
来自BottomNavigationBarItem的icon参数接受一个Widget。我所做的就是将我的Icon封装到一个Container中并定义一个padding。
BottomNavigationBarItem(
icon: Container(
padding: EdgeInsets.symmetric(vertical: 10),
child: Icon(
Icons.home
)
)
)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58879493
复制相关文章
相似问题
腾讯云开发者
