让评论和回复布局颤动

Question

目前我正在为一个博客flutter做评论和回复布局，布局如下图。我知道主项目评论和项目回复可以重复使用，当然，有一个列表视图来显示评论，在评论下有一个列表视图来显示回复评论，但我不知道如何应用它们。你能告诉我如何正确制作吗？

Answer 1

要创建评论和回复的布局，将每个评论和回复定义为单独的小部件是一个好方法。您可以使用

ListView.builder

显示评论和回复。主 ListView 将显示评论，并且在每个评论小部件内，可以使用嵌套的

ListView

来显示回复。

关键步骤：

1. 创建一个主

   ListView.builder

   来显示评论，并且对于每个 项目，使用自定义小部件，例如 CommentItemWidget。
2. 在 CommentItemWidget 内，创建另一个

   ListView.builder

   来显示 回复 (ReplyItemWidget)。
3. 如果您的回复太多并且

   ListView.builder

   导致性能下降 问题，请考虑使用替代方案，例如

   SingleChildScrollView

   和 专栏。

ListView.builder(
  itemCount: comments.length,
  itemBuilder: (context, index) {
    final comment = comments[index];
    return CommentItemWidget(comment: comment);
  },
);

class CommentItemWidget extends StatelessWidget {
  final Comment comment;
  CommentItemWidget({required this.comment});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(comment.text),
        ListView.builder(
          shrinkWrap: true, // The ListView's height is adjusted according to its content.
          physics: NeverScrollableScrollPhysics(), // Prevent nested ListView from scrolling independently.
          itemCount: comment.replies.length,
          itemBuilder: (context, index) {
            final reply = comment.replies[index];
            return ReplyItemWidget(reply: reply);
          },
        ),
      ],
    );
  }
}

这种结构可以灵活的展示评论和回复。如果您想动态更新评论和回复，您可能需要考虑使用状态管理解决方案，例如

StatefulWidget

、

Provider

、

Riverpod

或

Bloc

。