'body' 使用 BottomNavigationBar 后不可见：BottomAppBar

Question

使用 BottomNavigationBar:BottomAppBar 时，body 不会显示在屏幕上。但是当我移动它时， body 显示在屏幕上。由于我的底部导航栏位于主 body 之外，它应该是这样的，所以非常令人费解的是为什么 body 内容只是在底部导航栏位于代码中时不可见。

编辑：想知道是否需要将 body 从 'new Container' 更改为其他内容，因此我包含了这么多代码。

代码如下：

Widget build(BuildContext context) {
return new Scaffold(
  appBar: AppBar(
    title: const Text('Refine'),
    backgroundColor: Color(0xFFffffff),
  ),
  body: new Container(
    width: MediaQuery.of(context).copyWith().size.width,
    child: ListView(
      shrinkWrap: true,
      children: <Widget>[
        new Column(
          children: <Widget>[
            new Padding(
              padding: const EdgeInsets.only(top: 15.0,),
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Container(
                child: Text(
                  'Sort By',
                  style:
                  TextStyle(color: Colors.black, fontSize: 15.0, fontWeight: FontWeight.bold),
                ),
              ),
            ),
            new Padding(
              padding: const EdgeInsets.only(top: 15.0,),
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Container(
                color: Color(0xFFffffff),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    new Padding(
                      padding: const EdgeInsets.only(top: 15.0,),
                    ),
                    new Text(
                      'Relevance',
                      style:
                      TextStyle(color: Colors.black,
                          fontSize: 15.0,
                          fontWeight: FontWeight.normal),
                    ),
                    new Padding(
                      padding: const EdgeInsets.only(top: 15.0,),
                    ),
                    new Text(
                      'Top Rated',
                      style:
                      TextStyle(color: Colors.black,
                          fontSize: 15.0,
                          fontWeight: FontWeight.normal),
                    ),
                    new Padding(
                      padding: const EdgeInsets.only(top: 15.0,),
                    ),
                    new Text(
                      'New',
                      style:
                      TextStyle(color: Colors.black,
                          fontSize: 15.0,
                          fontWeight: FontWeight.normal),
                    ),
                  ],
                ),
              ),
            ),
            new Padding(
              padding: const EdgeInsets.only(top: 15.0,),
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Container(
                child: Text(
                  'Category',
                  style:
                  TextStyle(color: Colors.black, fontSize: 15.0, fontWeight: FontWeight.bold),
                ),
              ),
            ),
            new Padding(
              padding: const EdgeInsets.only(top: 15.0,),
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Container(
                color: Color(0xFFffffff),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    new DropdownButtonHideUnderline(
                      child: DropdownButton<String>(
                        hint: Text('All Categories'),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            new Padding(
              padding: const EdgeInsets.only(top: 15.0,),
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Container(
                child: Text(
                  'Location',
                  style:
                  TextStyle(color: Colors.black,
                      fontSize: 15.0,
                      fontWeight: FontWeight.bold),
                ),
              ),
            ),
            new Padding(
              padding: const EdgeInsets.only(top: 15.0,),
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Container(
                color: Color(0xFFffffff),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget> [
                    new DropdownButtonHideUnderline(
                      child: DropdownButton<String>(
                        hint: Text('Illinois'),
                      ),
                    ),
                    new DropdownButtonHideUnderline(
                      child: DropdownButton<String>(
                        hint: Text('Chicago'),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            new Padding(
              padding: const EdgeInsets.only(top: 15.0,),
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Container(
                child: Text(
                  'Price',
                  style:
                  TextStyle(color: Colors.black,
                      fontSize: 15.0,
                      fontWeight: FontWeight.bold),
                ),
              ),
            ),
            new Padding(
              padding: const EdgeInsets.only(top: 15.0,),
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Container(
                color: Color(0xFFffffff),
                child: Row(
                  children: <Widget>[
                    new Text(
                      '$',
                    ),
                    new Text(
                      'To',
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ],
    ),
  ),
  bottomNavigationBar: BottomAppBar(
    child: new Container(
      padding: EdgeInsets.only(
        top: 20.0,
        bottom: 20.0,
        left: 25.0,
        right: 25.0,
      ),
      decoration: BoxDecoration(
        color: Color(0xFFffffff),
      ),
      child: new Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new SizedBox(
            width: double.infinity, child: RaisedButton(
            color: Color(0xFF2e616f),
            textColor: Colors.white,
            onPressed: () {},
            child: Text('Apply',
                style: new TextStyle(fontSize: 14.0)),
          ),
          ),
        ],
      ),
    ),
  ),
);

}

Answer 1

问题出在底部导航栏 SizedBox 中的这一行：

width: double.infinity

不要使用上面的方法，考虑使用以下方法：

width: MediaQuery.of(context).size.width - 50

“- 50”是考虑到左右两边的填充，各为 25。

Rémi Rousselet 在这里发布了一个很好的解释，解释了 double.infinity 和 MediaQuery 之间的区别：。

'body' 使用 BottomNavigationBar 后不可见：BottomAppBar

'body' invisible after using BottomNavigationBar: BottomAppBar

flutter

bottomappbar