0

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

编辑:想知道是否可能需要将主体从“新容器”更改为其他内容,因此我包含了这么多代码。

这是代码:

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

}

4

1 回答 1

0

问题特别是底部导航栏 SizedBox 中的这一行:

width: double.infinity

考虑使用以下内容,而不是使用上述内容:

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

“- 50”是考虑左右的padding,分别为25。

Rémi Rousselet 在这里发布了一个很好的解释,解释了 double.infinity 和 MediaQuery 之间的区别:double.infinity 和 MediaQuery 之间有什么区别?.

于 2020-04-26T22:23:06.823 回答