使用 iPhone X 的底部导航栏答案

【问题标题】：bottomNavigationBar using iPhone X使用 iPhone X 的底部导航栏
【发布时间】：2018-11-27 19:33:33
【问题描述】：

我的底部导航栏有问题，该问题仅发生在 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 并将主体包裹在容器内以将其涂成白色，但仍然无法正常工作，我已更新上面的代码以显示它

【问题讨论】：

也许您最好为此打开一个问题，因为这确实在我看来是个问题。
查看github.com/flutter/flutter/issues/12099#issuecomment-342576774
您是否尝试过 Scaffold 中的 resizeToAvoidBottomPadding 属性？脚手架(resizeToAvoidBottomPadding: false, appBar: new AppBar(), );

标签： ios dart flutter

【解决方案1】：

使用

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

【讨论】：

【解决方案2】：

解决方法是将 Scaffold 的 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,
            ),
          ),
        ),
      );
    }
  }

【讨论】：

是的，这不起作用。脚手架背景颜色不会影响底部导航栏下方的填充
它不会影响填充，但它会显示您的 BottomNavigationBar 延伸到手机的最底部。我已经用我自己的应用程序的屏幕截图更新了我的答案
算了，突然开始工作了，貌似是个bug tho...我也改了bottomAppbar的内容，去掉Container，直接放一个Row

【解决方案3】：

这个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]);

【讨论】：