这是问题的图片,它是底部导航栏上的默认填充吗?如果是的话如何删除?
正如您在下面的代码中看到的,我在 BottomNavigationBarItem 内部有一个容器和一个图标,但图标和栏之间有一个空格。
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Color.fromARGB(255, 18, 124, 157),
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
activeIcon: Container(
margin: EdgeInsets.all(0),
padding: EdgeInsets.all(0),
height: 50,
width: 300,
color: Color.fromARGB(255, 18, 124, 157),
child: Icon(Icons.home, size: 40, color: Colors.white),
),
icon: Container(
margin: EdgeInsets.all(0),
padding: EdgeInsets.all(0),
height: 50,
width: 300,
color: Colors.white,
child: Icon(Icons.home,
size: 40, color: Color.fromRGBO(114, 114, 114, 1)),
),
该空间由
BottomNavigationBarItem
文本保留,因此您必须在 selectedFontSize
中将 BottomNavigationBar
设置为 0。
我是这样解决这个问题的,点击“BottomNavigationBar”并找到topPadding然后将其值设置为0,这个过程与bottom padding相同
您可以通过将
BottomNavigationBarItem
包装在容器中并将边距和填充属性设置为 EdgeInsets.zero 来删除底部导航栏中所选项目的默认填充和边距。
BottomNavigationBar(
items: [
Container(
margin: EdgeInsets.zero,
padding: EdgeInsets.zero,
child: BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
),
// other items...
],
// other properties...
),
还可以使用
BottomNavigationBarType.shifting
和 BottomNavigationBarType.fixed
自定义所选项目的样式,并设置 selectedItemColor
和 unselectedItemColor
属性。