Flutter中DraggableScrollableSheet子内容从底部弹层中间显示如何解决

核心需要做2处调整：

• 给showModalBottomSheet添加isScrollControlled: true配置，允许底部弹层撑满全屏高度，适配DraggableScrollableSheet的滚动交互
• 给ListView.builder添加padding: EdgeInsets.zero配置，移除Flutter ListView默认自带的顶部适配留白，这是内容不置顶的核心原因

你也可以按需调整DraggableScrollableSheet的尺寸参数，明确弹层的初始、最小、最大展示高度。

修改后的完整代码如下：

showModalBottomSheet(
    context: context,
    isScrollControlled: true, // 新增配置
    builder: (context) => SizedBox.expand(
      child: DraggableScrollableSheet(
        initialChildSize: 0.6, // 按需设置，初始占屏幕60%高度
        minChildSize: 0.2, // 按需设置，最小占屏幕20%高度
        maxChildSize: 0.9, // 按需设置，最大占屏幕90%高度
        builder: (BuildContext context, ScrollController scrollController) {
          return Container(
            color: Colors.red,
            child: ListView.builder(
              padding: EdgeInsets.zero, // 新增配置，移除默认顶部padding
              controller: scrollController, // 绑定滚动控制器，保证Draggable和ListView滚动联动
              itemCount: 2,
              itemBuilder: (BuildContext context, int index) {
                return ListTile(title: Text('text'));
              },
            ),
          );
        },
      ),
    ),
  );

如果调整后仍有偏移，可以给包裹ListView的Container添加alignment: Alignment.topCenter属性辅助对齐。

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