Question

我正在尝试在Flutter中创建某种形式的底部工作表，可以将其拖动到全屏或设置为最小化状态。

为此，我使用了Positioned和Container。在此底页中，我想要一个不可滚动的标题和一个可滚动的主体。我创建了此dartpad来表示这种情况：https://dartpad.dev/b6409e10de32b280b8938aa75364fa7b

在第3阶段，一切正常，并且主体可以滚动，但是在第1阶段，我遇到了底部溢出错误，而且我不知道如何解决。

我尝试将Expanded和Flexible与几个选项一起使用，我还尝试使用Wrap小部件来防止主体溢出。

您能帮我解决这个问题吗？

dartpad的构建功能如下：

    Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          return Stack(
            children: [
              Column(children: [
                Row(children: [
                  RaisedButton(
                    child: Text("Stage 1"),
                    onPressed: () {
                      setState(() {
                        height = 40;
                      });
                    },
                  ),
                  RaisedButton(
                    child: Text("Stage 2"),
                    onPressed: () {
                      setState(() {
                        height = 80;
                      });
                    },
                  ),
                  RaisedButton(
                    child: Text("Stage 3"),
                    onPressed: () {
                      setState(() {
                        height = 150;
                      });
                    },
                  ),
                ])
              ]),
              Positioned(
                bottom: 0,
                width: constraints.maxWidth,
                height: height,
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.grey,
                  ),
                  child: Column(
                    children: [
                      Column(children: [
                        Text("Fixed"),
                        Text("Fixed"),
                        Text("Fixed"),
                      ]),
                      Flexible(
                          child: SingleChildScrollView(
                              child: Column(children: [
                        Container(
                            color: Colors.blue,
                            width: constraints.maxWidth,
                            height: 30),
                        Container(
                            color: Colors.red,
                            width: constraints.maxWidth,
                            height: 30),
                        Container(
                            color: Colors.green,
                            width: constraints.maxWidth,
                            height: 30),
                        Container(
                            color: Colors.blue,
                            width: constraints.maxWidth,
                            height: 30),
                      ])))
                    ],
                  ),
                ),
              )
            ],
          );
        },
      ),

这是第二阶段的应用程序（一切正常）：

缩小容器高度时，出现以下错误：

具有固定和灵活元素的容器底部溢出

0 个答案: