颤抖如何在BottomNavigationBar中添加边距或填充 [英] Flutter how to add margin or padding in BottomNavigationBar

问题描述

我试图制作底部导航栏，但在屏幕上左右填充.现在，我用容器包装BottomNavigationBar并在其中添加填充.问题是BottomNavigationBar的默认背景仍然包裹了所有图层，因此我们可以删除那里的背景颜色吗?

I am trying to make bottom navigation bar, but with padding left and right on the screen. Right now I wrap the BottomNavigationBar with container and add padding there. The problem is the BottomNavigationBar default background still wrap all the layer, so could we remove the background color there?

目标

当前结果

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

我已经删除了脚手架和所有主题的背景色，但是当您滚动项目时，您会看到那里仍然有背景 删除Scafold bg

I have removed background color in scaffold and all theme, but when you have scrolled item, you could see there is still background there Remove Scafold bg

这是活动的代码

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

结果

推荐答案

您需要将Body和BottomNavigationBar放在Stack下，以便可以将BottomNavigationBar放在主体内容的顶部.

You need to put your Body and BottomNavigationBar under Stack so that the BottomNavigationBar can be placed on top of your main body content.

您的完整代码将是:

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

部分代码来自: 查看全文