初始高度为屏幕一半的底页，如果滚动则高度增加到全屏答案

【问题标题】：bottom sheet with initial height half of screen and if it scroll then height is increase to full screen初始高度为屏幕一半的底页，如果滚动则高度增加到全屏
【发布时间】：2019-02-01 07:55:54
【问题描述】：

我有一个带有以下代码的底部表，我在其中放置了高度 300.0 但我想在用户滚动时将高度增加到全屏..我该怎么做..请

void _showBottomSheet() {
    setState(() {
      _showPersBottomSheetCallBack = null;
    });

    _scaffoldKey.currentState
        .showBottomSheet((context) {
      return new Container(
        height: 300.0,
        color: Colors.greenAccent,
        child: new Center(
          child: new Text("Hi BottomSheet"),
        ),
      );
    })
        .closed
        .whenComplete(() {
      if (mounted) {
        setState(() {
          _showPersBottomSheetCallBack = _showBottomSheet;
        });
      }
    });
  }

【问题讨论】：

查看类似问题的答案stackoverflow.com/a/57524472/634355

标签： flutter flutter-layout

【解决方案1】：

flutter 包底页并不意味着占据整个屏幕，尽管稍作调整就可以产生您所期望的行为。如果您查看BottomSheet constructor，您会发现以下内容：

  @override
  BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
    return new BoxConstraints(
      minWidth: constraints.maxWidth,
      maxWidth: constraints.maxWidth,
      minHeight: 0.0,
      maxHeight: constraints.maxHeight * 9.0 / 16.0
    );
  }

如果您删除 9.0/16.0 高度限制，底部工作表将占据整个屏幕高度。

【讨论】：

这没有回答问题。它只是展示了如何拥有一个全屏的底页。当然，这可能是 2018 年的唯一选择。

【解决方案2】：

如果您想要的只是全屏底部表单（如 @edmond 所示），您现在可以使用 isScrollControlled: true，而无需维护自己的破解版 BottomSheet。

无论如何，问题是关于首先将工作表加载到半高，并能够在滚动时扩展到全高。对于那个细粒度的控件，您仍然需要使用isScrollControlled: true，但您也可以将模态表的内容包装在DraggableScrollableSheet 中。 This Github comment 告诉你怎么做，我在这里复制以供参考：

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  builder: (BuildContext context) {
    return DraggableScrollableSheet(
      initialChildSize: 0.5, // half screen on load
      maxChildSize: 1,       // full screen on scroll
      minChildSize: 0.25,
      builder: (BuildContext context, ScrollController scrollController) {
        return Container(
          color: Colors.white,
          child: ListView.builder(
            controller: scrollController,
            itemCount: 25,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(title: Text('Item $index'));
            },
          ),
        );
      },
    );
  },
);

【讨论】：