在CustomScrollView中使用ListView.builder无法显示内容的问题排查

问题出在两点： #

• Expanded完全无效：SliverToBoxAdapter的子组件不属于Row/Column这类Flex布局，Expanded在这里没法给ListView分配高度，导致ListView的高度被压缩为0，自然看不到任何内容。
• 嵌套可滚动组件没必要：CustomScrollView本身就是为了整合各类Sliver组件实现滚动而设计的，你嵌套的ListView.builder本身是独立的可滚动组件，既浪费性能还容易引发布局冲突。

两种可行解决办法： #

办法1：去掉Expanded，给ListView设置固定高度（适合内容高度确定的场景）

CustomScrollView(
  slivers: [
    SliverToBoxAdapter(
      child: SizedBox(
        height: 300, // 根据需求设置合适高度
        child: ListView.builder(
          itemBuilder: (context, index) {
            return Text("${index}");
          },
          itemCount: 5,
        ),
      ),
    )
  ],
)

办法2：用SliverList替代ListView.builder（更推荐，贴合CustomScrollView的设计逻辑）

CustomScrollView(
  slivers: [
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return Text("${index}");
        },
        childCount: 5,
      ),
    )
  ],
)

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