Flutter如何在BottomNavigationBar中添加边距或填充

Question

我正在尝试制作底部导航栏，但在屏幕上左右填充。现在我用容器包装 BottomNavigationBar 并在那里添加填充。问题是BottomNavigationBar默认背景仍然包裹着所有图层，那我们可以去掉那里的背景颜色吗？

Goal

Current result

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

result

Answer 1

您需要将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?

Answer 2

我知道有点晚了。但这应该对像我这样的未来观众有所帮助。

来自BottomNavigationBarItem 的icon 参数接受Widget。我所做的只是将我的 Icon 包装成一个 Container 并定义一个 padding。

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