Flutter嵌套ListView.builder出现无限高度问题求助

这个错误的核心原因是：外层垂直ListView的列表项是Column组件，Column在垂直方向没有固定高度限制，导致内层ListView无法确定自身的渲染高度，触发了断言检查失败。用shrinkWrap虽然能临时解决，但会一次性渲染所有子组件，性能开销大，显然不是最优解。

最优解决方案：合并滚动视图为CustomScrollView #

把外层和内层的列表都转换成Sliver组件，统一放到CustomScrollView中，这样整个页面只有一个滚动视图，所有内容都是按需懒加载的，既解决了高度无界问题，又保留了性能优势，还不需要固定高度。

修改后的完整代码：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 封装每组嵌套内容的Sliver组件
  List<Widget> _buildNestedSliverGroup() {
    return [
      // 标题栏用SliverToBoxAdapter包裹，作为固定高度的Sliver
      const SliverToBoxAdapter(
        child: Container(
          height: 30,
          width: double.infinity,
          color: Colors.blueAccent,
          child: Text("Hello I am Testing"),
        ),
      ),
      // 内层列表用SliverList.builder实现懒加载
      SliverList.builder(
        itemCount: 100,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text((index + 1).toString()),
          );
        },
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("Multiple List"),
      ),
      body: CustomScrollView(
        // 生成10组嵌套内容，展开成一维列表
        slivers: List.generate(10, (index) => _buildNestedSliverGroup())
            .expand((group) => group)
            .toList(),
      ),
    );
  }
}

代码说明： #

• CustomScrollView是Flutter专门用于组合多种滚动组件的容器，所有子项都是Sliver类型
• SliverToBoxAdapter用于将普通Widget（比如标题栏容器）转换成Sliver组件
• SliverList.builder和ListView.builder一样支持懒加载，只会渲染当前视口内的子项
• 通过List.generate和expand方法，把10组嵌套内容平铺到CustomScrollView的slivers列表中，避免了嵌套结构带来的高度问题

如果你之前尝试过CustomScrollView但没成功，大概率是错误地在Sliver中嵌套了ListView，而没有把内层列表转换成SliverList。

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