Flutter如何在BottomNavigationBar中添加margin或padding

Question

Flutter如何在BottomNavigationBar中添加margin或padding

10

我正在尝试创建带有左右屏幕内边距的底部导航栏。目前，我用容器包装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')),
      ],
    ),
  ),

编辑：我已经在脚手架和所有主题中删除了背景颜色，但是当您滚动项目时，您仍然可以看到那里仍有背景

删除脚手架背景

编辑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')),
            ],
          ),
        ),
      ),
    );
  }
}

结果

- Msfrn

它应该按照你的期望工作。我认为你在你的scafold或任何其他包装器方法上设置了背景颜色...请检查或分享完整的页面源代码。 - OMi Shah

我也进行了测试，没有问题。你可能是通过themedata设置了导航栏的颜色或在父元素上设置了背景颜色。 - OMi Shah

如果在列表视图中有滚动项，我们仍然可以看到背景。 - Msfrn

你肯定做错了什么。如果你想要帮助，请发布出现问题的活动的完整代码。 - OMi Shah

你好@OMiShah，我已经发布了活动的代码和结果的截图，你能看一下吗？ - Msfrn

显示剩余3条评论

4个回答

11

您需要将 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')),
      ],
    ),
  );
}

部分代码来自:

如何在Flutter应用程序中将边框半径设置为底部应用栏？

- OMi Shah

1

如果有人正在寻找解决方案：您可以将BottomNatigationBar包装在一个具有填充/边距属性的容器中，设置相同的背景颜色，并将BottomNavigationBar的高程设置为0。例如：

Container(
  color: Colors.white,
  padding: EdgeInsets.symmetric(horizontal: 10),
  child: BottomNavigationBar(
    onTap: (index) {
      controller.tabIndex.value = index;
    },
    backgroundColor: Colors.white,
    elevation: 0,
    ...
  }

- Hoang Phuc

0

如果您在搜索如何在BottomNavigationBar底部添加填充，则以下是解决方案：

使用MediaQuery包装BottomNavigationBar并提供bottom填充，此值在构建底部栏时考虑。

MediaQuery(
  data: MediaQueryData(
    padding: EdgeInsets.only(bottom: 10) // here is the padding
  ),
  child: BottomNavigationBar(),
),

- Julio Henrique Bitencourt

似乎在Flutter 3.7.7上不再起作用了。 - FDuhen

我认为这里应该使用viewPadding而不是padding。 - Sebb

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Arvin Luke Castronuevo · Accepted Answer

我知道有点晚了，但这应该可以帮助像我一样的未来观众。

BottomNavigationBarItem中的icon参数需要一个Widget。我的做法是将Icon包装在Container中，并定义了一个padding。

BottomNavigationBarItem(
 icon: Container(
   padding: EdgeInsets.symmetric(vertical: 10),
   child: Icon(
     Icons.home
   )
 )    
)