Question

我正在学习flutter开发，希望创建一个屏幕，其中应在屏幕底部放置一个容器，其余屏幕的内容应为Scrollable。这是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,
            ),
          )
        ],
      )

我已将“带有文本的容器”仅用于测试目的。但是上面的代码给了我这个错误。

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

我在这里做错了什么？预先感谢。

Answer 1

Flutter并不是为用户界面而设计的，您只能在其中手动放置您希望小部件的确切像素。而是，设计您的UI，以便合成本身可以确定小部件的最终位置。

例如，您正在使用Stack和Positioned尝试将容器浮动到另一个窗口小部件下方，而您所需要做的就是使用Expanded小窗口制作第一个窗口小部件展开以填充所有剩余空间。

此外，您正在使用Container内具有固定高度的SingleChildScrollView，其子级是Column，具有一堆固定高度Container s 。这是制作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。

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

1 个答案: