Flutter：Column内嵌套的ListView无法正确适配剩余空间，底部固定按钮被遮挡问题咨询

你当前布局异常的核心问题是给底部按钮组也添加了Expanded组件。在Column中，多个Expanded会按照默认flex=1平分父组件的剩余空间，这就导致你的AddEventWidget（内部ListView）和底部按钮组各占了AppBar下方一半的高度空间。当ListView内容过多时，它只会在自己的半区里滚动，而按钮组的区域会覆盖ListView的底部内容，同时按钮也无法固定在页面最底部。

只需要给可滚动的内容区域保留Expanded，去掉底部按钮组的Expanded和多余的Align，让按钮组自然固定在页面底部即可。同时可以优化按钮Row的布局，让它更简洁：

修改后的Scaffold body代码 #

Widget build(BuildContext context) {
 return Scaffold(
  appBar: AppBar(
   title: Text(
    globals.strings["add_event_title"],
    style: TextStyle(
     fontSize: 18,
     color: AppTheme.darkText,
     fontWeight: FontWeight.w400,
    ),
   ),
  ),
  body: Column(
   children: [
    // 只给可滚动内容区域添加Expanded，占满AppBar到按钮之间的所有剩余空间
    Expanded(
     child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: AddEventWidget.withData(
       categories: widget.categories,
       geojson: widget.geojson,
       address: widget.address,
      ),
     ),
    ),
    // 去掉Expanded和Align，按钮组自动固定在页面底部
    Container(
      width: double.infinity, // 让Row占满屏幕宽度
      padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 8.0),
      child: Row(
       children: [
        SizedBox(
         width: MediaQuery.of(context).size.width / 2 - 12, // 调整边距计算，避免溢出
         child: RaisedButton(
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24.0)),
          onPressed: () => {},
          padding: EdgeInsets.all(12.0),
          color: AppTheme.buttonConfirm,
          child: Text(
           globals.strings["add_event_button_confirm"],
           style: TextStyle(color: Colors.white),
          ),
         ),
        ),
        SizedBox(width: 16), // 用固定间隔代替Spacer，更可控
        SizedBox(
         width: MediaQuery.of(context).size.width / 2 - 12,
         child: RaisedButton(
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24.0)),
          onPressed: () => Navigator.of(context).pop(),
          padding: EdgeInsets.all(12.0),
          color: AppTheme.buttonCancel,
          child: Text(
           globals.strings["add_event_button_cancel"],
           style: TextStyle(color: Colors.white),
          ),
         ),
        )
       ],
      ),
    )
   ],
  ),
 );
}

额外说明 #

1. 移除了AddEventWidget外层的Align，因为ListView默认就是从顶部开始布局，不需要额外对齐
2. 把按钮Row放在Container里并设置宽度为double.infinity，确保按钮组占满屏幕宽度，避免按钮错位
3. 用固定的SizedBox(width:16)代替Spacer，让两个按钮之间的间隔更可控，同时调整了按钮宽度的计算值，避免因为边距导致的布局溢出
4. 底部按钮组不再使用Expanded，它会以自身的高度固定在页面底部，不会再和ListView的内容重叠，而ListView会占据AppBar到按钮之间的全部空间，内容过多时自动滚动

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