Flutter：如何实现showModalBottomSheet拖动句柄调整尺寸？

你可以通过使用DraggableScrollableSheet配合showModalBottomSheet来实现类似谷歌地图的可拖动扩展效果，无需手动处理拖动事件的高度计算。以下是修改后的代码：

showModalBottomSheet(
  showDragHandle: true,
  isScrollControlled: true, // 允许弹窗占据更多屏幕空间
  context: context,
  builder: (BuildContext context) {
    return DraggableScrollableSheet(
      initialChildSize: 0.15, // 初始高度为屏幕的15%（约100px，匹配你原来的固定高度）
      minChildSize: 0.1, // 最小可收缩高度（屏幕的10%）
      maxChildSize: 0.8, // 最大可扩展高度（屏幕的80%）
      expand: false,
      builder: (context, scrollController) {
        return Container(
          margin: const EdgeInsets.only(left: 20, right: 20),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(28), 
              topRight: Radius.circular(28),
            ),
          ),
          child: SingleChildScrollView(
            controller: scrollController,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                detailWidget(context, content),
              ],
            ),
          ),
        );
      },
    );
  },
);

关键说明： #

• isScrollControlled: true：必须设置这个参数，否则弹窗默认最大只能占据屏幕一半高度，无法扩展到更大视图。
• DraggableScrollableSheet：Flutter内置组件，专门用于实现可拖动调整大小的滚动容器，自动处理拖动逻辑。
  • initialChildSize：初始显示的高度比例（相对于屏幕高度）。
  • minChildSize：拖动时能收缩到的最小高度比例。
  • maxChildSize：拖动时能扩展到的最大高度比例。
• SingleChildScrollView：如果你的内容高度超过弹窗当前高度，这个组件会让内容可滚动，同时配合scrollController，拖动内容也能调整弹窗大小。

这样修改后，你就可以通过拖动顶部的dragHandle（或者内容区域）来自由调整弹窗的高度，从初始的小视图扩展到你设置的最大高度，完全符合谷歌地图的效果。

内容的提问来源于stack exchange，提问作者El Dude