BottomSheet嵌套Scaffold时的圆角设置及minChildSize失效问题

问题1：修复maxChildSize与minChildSize不生效 #

导致属性失效的核心原因有两个：一是showModalBottomSheet默认会限制底部弹窗的高度，二是DraggableScrollableSheet的可滚动组件未绑定控制器。修复步骤：

• 调用showModalBottomSheet时必须添加isScrollControlled: true，解除高度限制
• 把ListView.builder的controller参数设置为DraggableScrollableSheet传入的controller，让拖拽和滚动联动
• 移除外层的GestureDetector全屏点击关闭逻辑（会打断拖拽交互），点击外部关闭弹窗是showModalBottomSheet的默认行为，无需额外处理

问题2：实现顶部圆角效果 #

因为弹窗嵌套了Scaffold，需要调整层级结构来应用圆角：

• 将Scaffold嵌套在带有圆角装饰的Container内（直接复用Code A的decoration）
• 设置Scaffold.backgroundColor = Colors.transparent，避免Scaffold的白色背景覆盖外层Container的圆角
• 调用showModalBottomSheet时设置backgroundColor: Colors.transparent，去掉默认的白色背景
• 给外层Container添加clipBehavior: Clip.hardEdge，确保圆角裁剪生效

修改后的完整代码 #

// 调用showModalBottomSheet的代码
showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  backgroundColor: Colors.transparent,
  builder: (context) => YourBottomSheetWidget(),
);

// 你的BottomSheet组件（原Code B修改后）
Widget build(BuildContext context) {
  return DraggableScrollableSheet(
    initialChildSize: 0.79,
    maxChildSize: 0.79,
    minChildSize: 0.3,
    builder: (_, controller) => Container(
      // 复用Code A的圆角装饰
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(20.0),
          topRight: Radius.circular(20.0),
        ),
      ),
      clipBehavior: Clip.hardEdge,
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: AppBar(
          automaticallyImplyLeading: false,
          title: Container(
            margin: EdgeInsets.fromLTRB(0, 30, 0, 10),
            padding: const EdgeInsets.all(15.0),
            child: Text("标题"),
          ),
          elevation: 0,
          toolbarHeight: 60,
          backgroundColor: Colors.white,
          actions: [
            Container(
              padding: const EdgeInsets.all(18.0),
              child: IconButton(
                icon: Icon(Icons.close),
                onPressed: () => Navigator.pop(context),
              ),
            ),
          ],
        ),
        body: Column(
          children: [
            Container(
              margin: const EdgeInsets.fromLTRB(30, 5, 30, 10),
              color: Colors.white,
              child: TextField(
                decoration: InputDecoration(hintText: "输入内容"),
              ),
            ),
            Expanded(
              child: ListView.builder(
                controller: controller,
                scrollDirection: Axis.vertical,
                itemCount: assetList.length,
                itemBuilder: (context, index) {
                  return ListTile(title: Text("Item $index"));
                },
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

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