使用iPhone X的bottomNavigationBar

Question

我有一个关于bottomNavigationBar的问题，问题只发生在iPhone X上，因为在BNB下面出现了一些填充，好像它在SafeArea小部件内（并且不是）

那么，我怎样才能删除那个填充？或者可能以某种方式给它上色？

这是构建函数的代码

  @override
  Widget build(BuildContext context) {
return new Scaffold(
  
  appBar: _buildAppBar(),
  drawer: _buildDrawer(),
  body: _isLoading
      ? Center(
          child: CircularProgressIndicator(),
        )
      : new Container(
        color: Colors.white,
        child: _unauthorizedOrders()),
  // floatingActionButton: FloatingActionButton(
  //   onPressed: () {},
  //   backgroundColor: primaryColor,
  //   child: Icon(Icons.flash_on, size: 30.0,),
  //   tooltip: 'Authorize Orders',
  // ),
  // floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  backgroundColor: Colors.red,
  bottomNavigationBar: BottomAppBar(
      child: Container(
    height: 40.0,
    color: primaryColor,
    child: Row(
      children: <Widget>[
        // Padding(
        //   padding: const EdgeInsets.only(left: 10.0),
        //   child: Text(
        //     'Orders: ${orders.length}',
        //     style: TextStyle(
        //         color: Colors.white,
        //         fontSize: 18.0,
        //         fontWeight: FontWeight.bold),
        //   ),
        // ),
      ],
    ),
  )),
);
  }

编辑：我已将backgroundColor添加到脚手架中，移除了停靠的FAB并将主体包裹在容器内以将其涂成白色，仍然无效，我已更新上面的代码以显示它

Answer 1

使用

SafeArea(
    child: BottomAppBar(...)
);

Answer 2

我在bottomAppBar上遇到了同样的问题。

我只抹掉了颜色。

希望对某人有帮助。

BottomAppBar(
        elevation: 0.0,
        shape: widget.notchedShape,
        child: Container(
          decoration: BoxDecoration(
              borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(20.0), topRight: Radius.circular(20.0)),
              color: Colors.white),
          child: Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: items)
        ),
        color: Colors.teal[50]);

Answer 3

解决方法是将您的脚手架的backgroundColor设置为与BottomNavigationBar相同的颜色，并将您的内容放在容器中，并使用您想要的颜色。

修改

以下是示例代码：

import 'package:flutter/material.dart';

  void main() => runApp(new MyApp());

  class MyApp extends StatelessWidget {
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
      return new MaterialApp(
        title: 'BNB Demo on iPhone X',
        theme: new ThemeData(
          brightness: Brightness.dark,
          primaryColor: Colors.black,
        ),
        home: new MyHomePage(title: 'BNB Demo on iPhone X'),
      );
    }
  }

  class MyHomePage extends StatefulWidget {
    MyHomePage({Key key, this.title}) : super(key: key);
    final String title;

    @override
    _MyHomePageState createState() => new _MyHomePageState();
  }

  class _MyHomePageState extends State<MyHomePage> {
    int _counter = 0;

    void _incrementCounter() {
      setState(() {
        _counter++;
      });
    }

    @override
    Widget build(BuildContext context) {
      return new SafeArea(
        child: new Scaffold(
          appBar: new AppBar(
            title: new Text(widget.title),
          ),
          body: new Center(
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Text(
                  'You have pushed the button this many times:',
                ),
                new Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.display1,
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            child: Icon(Icons.add, color: Colors.white,),
            backgroundColor: Colors.black,
            onPressed: _incrementCounter,
          ),
          floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
          bottomNavigationBar: new BottomAppBar(
            child: Container(
              height: 40.0,
              color: Colors.black,
            ),
          ),
        ),
      );
    }
  }