RenderFlex 在底部溢出了 388 个像素，溢出的 RenderFlex 的方向为 Axis.vertical

Question

我正在学习颤振开发，并希望制作一个屏幕，其中应将容器放置在屏幕底部，并且剩余屏幕的内容应该是可滚动的。 这是Scaffold小部件的主体

body:Stack(

        children: <Widget>[
      Container(
      margin: const EdgeInsets.fromLTRB(0.0, 10.0  , 0.0 , 0.0 ),
      height: double.infinity,
          child:SingleChildScrollView(
            child: Container(
              height: MediaQuery.of(context).size.height * 0.9,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                 Container(
                   height: 100,
                   child: Text(description),
                 ),
                  Container(
                    height: 100,
                    child: Text(description),
                  ),
                  Container(
                    height: 100,
                    child: Text(description),
                  ),
                  Container(
                    height: 100,
                    child: Text(description),
                  ),
                  Container(
                    height: 100,
                    child: Text(description),
                  ),
                  Container(
                    height: 100,
                    child: Text(description),
                  ),
                  Container(
                    height: 100,
                    child: Text(description),
                  ),
                  Container(
                    height: 100,
                    child: Text(description),
                  ),
                  Container(
                    height: 100,
                    child: Text(description),
                  ),
                  Container(
                    height: 100,
                    child: Text(description),
                  ),
                ],
              ),
            ),
          )
      ) ,
          Positioned(
            left: 0,
            right: 0,
            bottom:0,
            child:  new Container(
                transform: Matrix4.translationValues(0.0, 0.0, -20.0),
                child: new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    new Column(

                      children: <Widget>[


                        InkWell(
                          child:  Image.asset('assets/bt1.png'),
                          onTap: (){
                            Navigator.pushNamed(context, '/help');
                          },
                        ),
                        Text("FIND HELP",
                          style: TextStyle(fontSize: 14.0,color: Colors.white),
                        ),
                      ],
                    ),
                    new Column(

                      children: <Widget>[
                        InkWell(
                          child:  Image.asset('assets/bt2.png'),
                          onTap: (){
//                                        Navigator.push(context, new MaterialPageRoute(
//                                          builder: (BuildContext context) => new Home(title: 'Bright Sky'),
//                                        ));
                          },
                        ),

                        Text("HOME",
                          style: TextStyle(fontSize: 14.0,color: Colors.white),
                        ),
                      ],
                    ),
                    new Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: <Widget>[

                        new InkWell(
                          child: Image.asset('assets/bt3.png'),
                          onTap: () {
                            //UrlLauncher.launch("tel://911");
                          },
                        ),
                        Text("CALL 999",
                          style: TextStyle(fontSize: 14.0,color: Colors.white),
                        ),
                      ],
                    ),


                  ],
                ),
//              color: Colors.blue,
            ),
          )
        ],
      )

我将 Container 与 Text 放在一起只是为了测试目的。 但是上面的代码给了我错误。

A RenderFlex overflowed by 388 pixels on the bottom.
The overflowing RenderFlex has an orientation of Axis.vertical.

我在这里做错了什么？ 提前致谢。

Answer 1

Flutter 不是为那些你只需手动放置你想要你的小部件的确切像素的 UI 设计的。相反，请设计您的 UI，以便组合本身决定小部件最终的位置。

例如，您正在使用Stack 和Positioned 尝试将容器浮动到另一个小部件下方，而您只需使用Expanded 小部件使第一个小部件展开以填充所有剩余空间.

此外，您在SingleChildScrollView 内使用具有固定高度的Container，其子级是具有一组固定高度Containers 的Column。这正是 ListView 所针对的场景。

body: Column(
  children: [
    Expanded(
      child: ListView(
        children: [
          // The list of containers
        ],
      ),
    ),
    Row(
      children: [
        Column(
          children: <Widget>[
            InkWell(
              child:  Image.asset('assets/bt2.png'),
              onTap: (){},
            ),
            Text("HOME",
              style: TextStyle(fontSize: 14.0,color: Colors.white),
            ),
          ],
        ),
        Column(
          children: <Widget>[
            InkWell(
              child:  Image.asset('assets/bt3.png'),
              onTap: (){},
            ),
            Text("CALL 999",
              style: TextStyle(fontSize: 14.0,color: Colors.white),
            ),
          ],
        ),
      ],
    ),
  ],
),

但要更进一步，您似乎只想在屏幕底部放置一些导航按钮。 Scaffold 已经通过 bottomNavigationBar 属性允许这样做。当你这样做时，你不再需要 Column 或 Expanded 来调整你的身体，因为唯一剩下的就是 ListView。

Scaffold(
  body: ListView(
    children: [
      // The list of containers
    ],
  ),
  bottomNavigationBar: BottomNavigationBar(
    items: [
      BottomNavigationBarItem(
        icon: Image.asset('assets/bt2.png'),
        title: Text(
          "HOME",
          style: TextStyle(fontSize: 14.0,color: Colors.white),
        ),
      ),
      BottomNavigationBarItem(
        icon: Image.asset('assets/bt3.png'),
        title: Text(
          "CALL 999",
          style: TextStyle(fontSize: 14.0,color: Colors.white),
        ),
      ),
    ],
  ),
),

组合有力量。对 Flutter 提供的各种小部件进行一些研究。在 youtube 上查看 Flutter Widget of the Week 系列。您会惊奇地发现，无需手动指定小部件的固定宽度和高度，您就可以制作出如此多的响应式和流畅的 UI。