Flutter侧栏Drawer中ListView溢出 如何固定Body高度不挤压Footer

解决方案 #

你可以通过Expanded组件包裹Body区域的ListView实现需求。该方案利用Column（Flex布局）的空间分配规则：Expanded会自动填充父容器中Header、Footer之外的所有剩余可用空间，内部的ListView仅在这个固定范围内滚动，既不会出现高度溢出，也不会将Footer顶出可视区域。

代码示例 #

Drawer(
  child: Column(
    children: [
      // 头部区域 固定展示
      const DrawerHeader(
        child: Text("Header 头部"),
      ),
      // 主体区域 用Expanded包裹占满剩余空间
      Expanded(
        child: ListView(
          children: List.generate(50, (index) => ListTile(title: Text("列表项 $index"))),
        ),
      ),
      // 底部区域 固定展示
      Padding(
        padding: const EdgeInsets.all(16),
        child: const Text("Footer 底部"),
      )
    ],
  ),
)

补充说明 #

如果Header或Footer不是固定高度也无需额外处理，Expanded会自动计算剩余空间，不需要手动设置Body的高度值。如果需要限制Body的最大高度而非占满所有剩余空间，可以将Expanded替换为ConstrainedBox，自行设置maxHeight属性即可。

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