Flutter中如何实现嵌套ListView.builder？

我看过一篇关于Flutter嵌套滚动的帖子，但根据Flutter官方视频内容，认为该方案并不适用。我需要实现嵌套懒加载列表：

• 外层列表的标题（如“Claim requested credentials”这类）是后端返回的动态数据；
• 每个标题下的子项（如“Module 1: Designing Financial Services”）同样为动态数据，且可能包含100条，必须用懒加载实现，不能直接用Column或映射子项。

目前我使用CustomScrollView搭建外层布局，但内部列表无法正常工作。一旦将内部子项用ListView.builder包裹，就会触发以下错误：

RenderFlex children have non-zero flex but incoming height constraints are
unbounded.
When a column is in a parent that does not provide a finite height constraint,
for example if it is
in a vertical scrollable, it will try to shrink-wrap its children along the
vertical axis. Setting a
flex on a child (e.g. using Expanded) indicates that the child is to expand to
fill the remaining
space in the vertical direction.

当前核心代码如下：

主页面代码 #

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          HeaderGradient(),
          Positioned(
            top: 110,
            left: 0,
            right: 0,
            bottom: 0,
            child: Container(
              padding: const EdgeInsets.all(8.0),
              decoration: const BoxDecoration(
                color: grayColor,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(20),
                  topRight: Radius.circular(20),
                ),
              ),
              child: CustomScrollView(
                slivers: [
                  const SliverToBoxAdapter(
                    child: ManageCredentialHeader(),
                  ),
                  SliverList(
                      delegate: SliverChildBuilderDelegate((context, index) {
                    return ManageCredentialCard();
                  }, childCount: 10))
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}

卡片组件代码 #

class ManageCredentialCard extends StatelessWidget {
  const ManageCredentialCard({super.key});

  @override
  Widget build(BuildContext context) {
    return Card(
      color: Theme.of(context).colorScheme.background,
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
        child: Column(
          children: [
            const ManageCredentialCardHeader(),
            const ManageCredentialCardItem()
          ],
        ),
      ),
    );
  }
}

ManageCredentialCardItem是需要改为懒加载的内部列表组件。

报错的核心原因是：未限制高度的ListView放在Column中时，Column的垂直约束是无限的，导致ListView无法确定自身高度。以下是两种适配动态数据的可行方案：

方案1：内部列表禁用滚动+自适应高度（推荐） #

让父级CustomScrollView接管整体滚动，内部列表仅负责渲染子项并自适应高度，同时保留懒加载特性：
修改ManageCredentialCard中的内部列表部分：

ListView.builder(
  shrinkWrap: true, // 让列表根据子项总高度自适应自身高度
  physics: const NeverScrollableScrollPhysics(), // 禁用内部滚动，避免嵌套滚动冲突
  itemCount: 100, // 替换为实际动态数据长度
  itemBuilder: (context, index) => const ManageCredentialCardItem(),
)

• 优势：无需修改外层布局结构，完美适配动态数据，且ListView.builder会自动懒加载视口内的子项，性能不受影响。

方案2：全Sliver化布局（贴合CustomScrollView设计） #

将外层卡片和内部子项都拆为Sliver组件，完全融入CustomScrollView的渲染逻辑：
修改MyHomePage的CustomScrollView部分：

CustomScrollView(
  slivers: [
    const SliverToBoxAdapter(child: ManageCredentialHeader()),
    // 遍历外层动态分类数据
    ...List.generate(10, (categoryIndex) {
      return SliverToBoxAdapter(
        child: Card(
          color: Theme.of(context).colorScheme.background,
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
            child: Column(
              children: [
                const ManageCredentialCardHeader(), // 分类标题
                // 内部子项列表
                ListView.builder(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  itemCount: 100,
                  itemBuilder: (context, index) => const ManageCredentialCardItem(),
                ),
              ],
            ),
          ),
        ),
      );
    }),
  ],
)

• 优势：完全遵循Flutter的Sliver设计理念，滚动体验更流畅，适合复杂的嵌套滚动场景。

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