Flutter Drawer布局异常：Expanded与ListView滚动失效及报错问题

问题背景 #

需要实现包含三个区域的Drawer：顶部DrawerHeader、中间可滚动区域（含ListItem和ExpansionTile）、底部版权区。使用Column嵌套Expanded和ListView时出现报错：RenderFlex children have non-zero flex but incoming height constraints are unbounded，尝试移除Expanded、使用SingleChildScrollView等多种方案后仍未解决，还出现!_needsLayout、hasSize等布局断言错误。

有效解决方案 #

方案一：使用CustomScrollView（推荐） #

通过Sliver组件拆分Drawer的三个区域，完美适配Drawer的布局约束，避免滚动与固定区域的冲突：

Drawer(
  child: CustomScrollView(
    slivers: [
      // 顶部固定Header
      SliverToBoxAdapter(
        child: DrawerHeader(
          padding: const EdgeInsets.all(16),
          child: const Text('Drawer Header'),
        ),
      ),
      // 中间可滚动列表
      SliverList(
        delegate: SliverChildListDelegate([
          const ListTile(
            leading: Icon(Icons.home),
            title: Text('首页'),
          ),
          ExpansionTile(
            title: const Text('更多选项'),
            children: const [
              ListTile(
                leading: Icon(Icons.settings),
                title: Text('设置'),
              ),
              ListTile(
                leading: Icon(Icons.help),
                title: Text('帮助'),
              ),
            ],
          ),
          const Divider(thickness: 1),
          // 可添加更多列表项
        ]),
      ),
      // 底部固定版权区
      SliverToBoxAdapter(
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 16),
          child: Column(
            children: const [
              Text("Copyright. All Rights Reserved"),
              SizedBox(height: 8),
            ],
          ),
        ),
      ),
    ],
  ),
);

方案二：修复原Column+Expanded布局 #

如果坚持使用原结构，需解决const修饰导致的动态布局异常，并明确约束：

Drawer(
  child: Column(
    children: [
      const DrawerHeader(
        padding: EdgeInsets.all(16),
        child: Text('Drawer Header'),
      ),
      Expanded(
        child: ListView(
          shrinkWrap: false,
          children: [
            const ListTile(
              leading: Icon(Icons.home),
              title: Text('首页'),
            ),
            // 移除ExpansionTile的外层const，因为展开时会动态更新子组件
            ExpansionTile(
              title: const Text('更多选项'),
              children: const [
                ListTile(
                  leading: Icon(Icons.settings),
                  title: Text('设置'),
                ),
                ListTile(
                  leading: Icon(Icons.help),
                  title: Text('帮助'),
                ),
              ],
            ),
            const Divider(thickness: 1),
          ],
        ),
      ),
      const SizedBox(height: 16),
      const Text("Copyright. All Rights Reserved"),
      const SizedBox(height: 8),
    ],
  ),
);

关键说明 #

• 方案一中的CustomScrollView通过Sliver组件自动处理滚动与固定区域的布局约束，是最稳定的实现方式
• 方案二中的核心问题是ExpansionTile被const修饰，导致其展开时无法动态更新布局，进而触发断言错误；移除外层const即可解决

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