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

Question

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

但是，当我向上滚动时，默认情况下，内容会在屏幕的中间被切断，并且我会继续滚动：内容被切断，内容会继续滚动

但是，当我添加时isScrollControlled: false，内容将一直到顶部，在下面留下空白，这不是我想要的：内容不断向上滚动，空白位于内容下方

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

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内容动态扩展？

谢谢

Answer 1

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

要使其动态，只需用Widgetbottomshet包裹父 widget即可Wrap()。

例子：

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