Flutter中ExpansionTile布局出现RenderFlex无界高度约束报错如何解决

报错原因 #

你遇到的报错是因为 Expanded 和 Flexible 仅能在具有明确尺寸约束的 Flex 类父容器内使用，而 ExpansionTile 的 children 区域默认没有固定的高度上限，属于无边界高度约束，无法为 flex 属性计算分配空间，因此触发布局异常。

解决方案 #

你不需要给子组件设置固定高度，只需要移除多余的 flex 类组件，让布局自适应内容尺寸即可，修改后的代码如下：

ExpansionTile(
  maintainState: true,
  tilePadding: EdgeInsets.all(15.0),
  title: Text(
    '${color.id}',
    style: Theme.of(context)
        .textTheme
        .subtitle1
        ?.copyWith(fontWeight: FontWeight.w600),
  ),
  childrenPadding: EdgeInsets.all(10.0),
  children: [
    Column(
      // 让Column高度仅包裹所有子内容，不占用多余空间
      mainAxisSize: MainAxisSize.min,
      children: [
        ...colors.types.map<Widget>((item) {
          // 移除外层Expanded，不需要占用剩余高度
          return ListView(
            scrollDirection: Axis.horizontal,
            // 让ListView高度自适应子元素的最大高度
            shrinkWrap: true,
            // 按需配置滚动行为，不需要滚动可以改成NeverScrollableScrollPhysics
            physics: const AlwaysScrollableScrollPhysics(),
            children: [
              ...item.prices.map<Widget>((size) {
                // 移除冗余的Row、Column嵌套，按需加间距即可
                return Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 8),
                  child: MyWidget(
                    color: color,
                    size: size
                  ),
                );
              }),
            ],
          );
        }),
      ],
    )
  ],
);

改动说明 #

• 删除了外层无用的Flexible包裹，ExpansionTile的children区域本身就会自适应子组件高度，不需要flex组件
• 为Column添加mainAxisSize: MainAxisSize.min属性，避免Column默认撑满父容器高度
• 移除了套在ListView外层的Expanded，改为给横向ListView添加shrinkWrap: true属性，让ListView的高度适配子元素尺寸
• 移除了没有布局作用的冗余Row、Column嵌套，简化结构

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