从 Flutter 中删除底部导航栏上的默认内边距或边距

问题描述 投票:0回答:3

enter image description here

这是问题的图片,它是底部导航栏上的默认填充吗?如果是的话如何删除?

正如您在下面的代码中看到的,我在 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)),
            ),
flutter dart flutter-layout
3个回答
34
投票

该空间由

BottomNavigationBarItem
文本保留,因此您必须在
selectedFontSize
中将 BottomNavigationBar
 设置为 0


0
投票

我是这样解决这个问题的,点击“BottomNavigationBar”并找到topPadding然后将其值设置为0,这个过程与bottom padding相同


-3
投票

您可以通过将

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
属性。

© www.soinside.com 2019 - 2024. All rights reserved.