Flutter中ExpansionPanel嵌套ListView出现渲染溢出如何解决

• 你给ListView设置了shrinkWrap: true，该属性会强制ListView一次性计算并渲染所有子项的总高度，放弃懒加载和视口滚动的默认逻辑。
• 外层Column属于垂直方向的弹性布局，默认会给子组件传递无界的垂直高度约束，此时shrinkWrap模式的ListView会直接撑开至所有子项的总高度，不会触发滚动判断，当总高度超出屏幕可用高度时就会触发RenderFlex底部溢出报错。
• ExpansionPanel的body区域默认没有内置高度约束，直接嵌套在Column中时无法自动感知剩余可用空间，进一步导致内部列表无法获取正确的滚动视口尺寸。

方案1：自适应剩余空间（推荐） #

用Expanded组件包裹ExpansionPanelList，让它自动占满Column布局下的剩余垂直空间，同时移除ListView的shrinkWrap: true配置，恢复ListView默认的懒加载滚动能力。
修改后的核心代码如下：

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: Column(
    children: [
      Expanded(
        child: ExpansionPanelList(
          expansionCallback: (int index, bool isExpanded) {
            if (index == 1) {}
          },
          children: [
            ExpansionPanel(
                headerBuilder: (context, isExpanded) {
                  return ListTile(
                    title: Text("Todo"),
                  );
                },
                body: buildNewTasks(context),
                isExpanded: true,
                canTapOnHeader: true),
          ],
        ),
      )
    ],
  ));
}

Widget buildNewTasks(BuildContext context) {
  return ListView.builder(
    scrollDirection: Axis.vertical,
    itemCount: 50,
    itemBuilder: (BuildContext context, int index) {
      return Text(index.toString());
    },
  );
}

该方案适配不同尺寸的设备屏幕，列表仅渲染可视区域内的子项，滚动性能更好，面板折叠/展开时布局也能自动适配。

方案2：固定列表区域高度 #

如果业务场景要求展开的列表区域为固定高度，不需要自适应剩余空间，可以直接给ListView外层包裹SizedBox指定明确高度，不需要修改外层布局结构：

Widget buildNewTasks(BuildContext context) {
  return SizedBox(
    height: 400, // 可根据业务需求自定义高度值
    child: ListView.builder(
      scrollDirection: Axis.vertical,
      itemCount: 50,
      itemBuilder: (BuildContext context, int index) {
        return Text(index.toString());
      },
    ),
  );
}

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