flutter - 用于 Flutter 的 showModalBottomSheet 中的页眉、页脚和可滚动正文？

Question

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      padding: EdgeInsets.only(left: 10.0, right: 10.0, bottom: 10.0),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text('HEADER'),
          Scrollbar(
            thickness: 5.0,
            radius: Radius.circular(5.0),
            child: SingleChildScrollView(
              child: Column(
                children: [
                  Text('BODY'),
                  Text('BODY'),
                  Text('BODY'),
                  Text('BODY'),
                  Text('BODY'),
                ],
              ),
            ),
          ),
          Text('FOOTER'),
        ],
      ),
    );
  },
);

好的，到目前为止没有问题。我省略了isScrollControlled，showModalBottomSheet因此您无法向上拖动以填充屏幕。我希望它在视口高度的一半处最大化（我认为这是默认约束？）我还希望它根据内容调整大小，直到达到这个最大高度。但是，如果我向其中添加更多小部件，SingleChildScrollView Column则会溢出：

我期待“body”在页眉和页脚之间的剩余空间中最大化它的高度并变得可滚动，但它只是变得不受约束。showModalBottomSheet一旦达到其高度限制，我该怎么做才能使“正文”内容可滚动？

Answer 1

我只是通过一些更改实现了它。isScrollControlled: true用于底部工作表和Flexible(child: ListView(...))小部件。

试试看，https://dartpad.dev/6f76b09c942f8c44d89504032c355ff5

showModalBottomSheet(
  isScrollControlled: true,
  context: context,
  builder: (BuildContext context) {
    return Container(
      padding: EdgeInsets.only(left: 10.0, right: 10.0, bottom: 10.0),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text('HEADER'),
          Flexible(
            child: ListView(
              shrinkWrap: true,
              children: List<Text>.generate(1000, (x) => Text("CHILD")),
            ),
          ),
          Text('FOOTER'),
        ],
      ),
    );
  },
);