如何在Flutter中实现固定区域+可滚动灵活区域的Drawer布局？

直接用Column配合Expanded就能实现你要的效果，核心是让中间滚动区域占据Drawer的剩余可用空间，上下区域保持固定高度：

完整代码示例 #

Drawer(
  child: Column(
    children: [
      // 顶部橙色固定区域（自定义高度）
      Container(
        height: 120,
        color: Colors.orange,
        alignment: Alignment.center,
        child: const Text('顶部固定区域'),
      ),
      // 中间白色滚动区域：用Expanded包裹，自动占满剩余空间
      Expanded(
        child: SingleChildScrollView(
          child: Container(
            color: Colors.white,
            padding: const EdgeInsets.all(16),
            child: Column(
              children: List.generate(20, (index) {
                return Padding(
                  padding: const EdgeInsets.symmetric(vertical: 12),
                  child: Text('滚动列表项 $index'),
                );
              }),
            ),
          ),
        ),
      ),
      // 底部红色固定区域（自定义高度）
      Container(
        height: 80,
        color: Colors.red,
        alignment: Alignment.center,
        child: const Text('底部固定区域'),
      ),
    ],
  ),
)

关键说明 #

• 你之前用mainAxisAlignment.spaceEvenly失败的原因：这个属性会把Drawer的高度均匀分配给所有子组件，当中间滚动区域内容较多时，会挤压上下固定区域的高度，无法保持固定尺寸。
• 替换为Expanded后，中间滚动区域会自动占据Drawer除上下固定区域外的所有剩余空间，同时支持滚动。
• 如果想用ListView替代SingleChildScrollView，直接替换即可：

Expanded(
  child: ListView.builder(
    itemCount: 20,
    itemBuilder: (context, index) {
      return Padding(
        padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
        child: Text('ListView 项 $index'),
      );
    },
  ),
)

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