如何在 Flutter 中动态调整 BottomSheet 的高度？答案

【问题标题】：How do you adjust the height of a BottomSheet dynamically in Flutter?如何在 Flutter 中动态调整 BottomSheet 的高度？
【发布时间】：2020-11-21 08:54:40
【问题描述】：

在我的showModalBottomSheet 中，我有一个DraggableScrollableSheet，其中包含内容。当我向上滚动时，我希望内容能够动态向上滚动，直到有内容为止。

但是当我向上滚动时，默认情况下，内容会在屏幕的一半左右被切断，我会继续滚动：content is cut off and content keeps scrolling

但是，当我添加isScrollControlled: false 时，内容会一直到顶部留下空白，这不是我想要的：content keeps scrolling up and blank space is underneath content

这是不包括默认卡片的代码：

void _showSettingsPanel() {
      showModalBottomSheet<dynamic>(isScrollControlled: false, backgroundColor: Colors.transparent, context: context, builder: (context) {
       return DraggableScrollableSheet(
          builder: (BuildContext context, ScrollController scrollController) {
            return Container(
              color: Colors.blue[100],
              child: ListView(
                controller: scrollController,
                children: const <Widget>[
                  //here would be the cards
                ],
              ),
            );
          },
        );
      });
    }

包括卡片...

    void _showSettingsPanel() {
      showModalBottomSheet<dynamic>(isScrollControlled: false, backgroundColor: Colors.transparent, context: context, builder: (context) {
       
        return DraggableScrollableSheet(
          builder: (BuildContext context, ScrollController scrollController) {
            return Container(
              color: Colors.blue[100],
              child: ListView(
                controller: scrollController,
                children: const <Widget>[
                  Card(child: ListTile(title: Text('One-line ListTile'))),
                  Card(
                    child: ListTile(
                      leading: FlutterLogo(),
                      title: Text('One-line with leading widget'),
                    ),
                  ),
                  Card(
                    child: ListTile(
                      title: Text('One-line with trailing widget'),
                      trailing: Icon(Icons.more_vert),
                    ),
                  ),
                  Card(
                    child: ListTile(
                      leading: FlutterLogo(),
                      title: Text('One-line with both widgets'),
                      trailing: Icon(Icons.more_vert),
                    ),
                  ),
                  Card(
                    child: ListTile(
                      title: Text('One-line dense ListTile'),
                      dense: true,
                    ),
                  ),
                  Card(
                    child: ListTile(
                      leading: FlutterLogo(size: 56.0),
                      title: Text('Two-line ListTile'),
                      subtitle: Text('Here is a second line'),
                      trailing: Icon(Icons.more_vert),
                    ),
                  ),
                  Card(
                    child: ListTile(
                      leading: FlutterLogo(size: 72.0),
                      title: Text('Three-line ListTile'),
                      subtitle: Text(
                          'A sufficiently long subtitle warrants three lines.'
                      ),
                      trailing: Icon(Icons.more_vert),
                      isThreeLine: true,
                    ),
                  ),
                ],
              ),
            );
          },
        );
      });
    }

再一次，有什么方法可以让DraggableScrollableSheet 动态扩展，只要有内容吗？

谢谢

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

bottomSheet 的默认高度是屏幕的一半。

要使其动态化，只需将 bottomshet 父小部件与 Wrap() 小部件包装起来。

例子：

    showModalBottomSheet(
        backgroundColor: Colors.transparent,
        context: context,
        builder: (context) {
          //Wrap will set hight dynamicaly
          return Wrap(children: [
            Container(),
            Container(),
            Container(),
          ]);
        });

【讨论】：