Flutter如何无需shrinkWrap或固定高度实现嵌套ListView？

方案一：扁平化列表结构 #

把父评论和对应的回复合并成一个扁平的数据源，通过类型区分渲染父评论和回复项，直接用单一ListView.builder实现。这种方案完全避免嵌套滚动，性能最优，也不需要任何shrinkWrap或固定高度设置。

示例代码：

// 先构造扁平化数据结构
enum CommentItemType { parent, reply }
class CommentListItem {
  final CommentItemType type;
  final Comment comment;
  CommentListItem(this.type, this.comment);
}

List<CommentListItem> buildFlatCommentList(List<Comment> parentComments) {
  final flatList = <CommentListItem>[];
  for (final parent in parentComments) {
    flatList.add(CommentListItem(CommentItemType.parent, parent));
    // 添加所有回复
    flatList.addAll(
      parent.replies.map((reply) => CommentListItem(CommentItemType.reply, reply))
    );
  }
  return flatList;
}

// 渲染列表
ListView.builder(
  itemCount: flatCommentList.length,
  itemBuilder: (context, index) {
    final item = flatCommentList[index];
    if (item.type == CommentItemType.parent) {
      return ParentCommentCard(comment: item.comment);
    } else {
      // 回复项添加缩进区分层级
      return Padding(
        padding: const EdgeInsets.only(left: 24),
        child: ReplyCommentCard(comment: item.comment),
      );
    }
  },
)

方案二：CustomScrollView + Sliver组件组合 #

使用CustomScrollView作为滚动容器，将每个父评论及其回复作为一组Sliver组件渲染。父评论用SliverToBoxAdapter包裹，回复列表用SliverList实现，整个滚动上下文全局统一，无需shrinkWrap，且能保持按需加载的性能。

示例代码：

CustomScrollView(
  slivers: [
    // 遍历所有父评论组
    for (final parent in parentComments) ...[
      // 父评论项
      SliverToBoxAdapter(
        child: ParentCommentCard(comment: parent),
      ),
      // 回复列表
      if (parent.replies.isNotEmpty)
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, index) {
              final reply = parent.replies[index];
              return Padding(
                padding: const EdgeInsets.only(left: 24),
                child: ReplyCommentCard(comment: reply),
              );
            },
            childCount: parent.replies.length,
          ),
        ),
    ],
  ],
)

方案说明 #

• 扁平化方案是性能最优的选择，逻辑简单，没有嵌套滚动的额外开销，适合大多数场景。
• Sliver组合方案保留了层级结构的独立性，适合需要对父评论和回复组做特殊布局（比如父评论悬浮、回复组单独分割）的场景。

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