如何实现评论部分或加载更多功能

Question

我想制作一个评论部分，具有加载更多评论功能或如下图所示，我可以做到，但它将是一个巨大的混乱代码，甚至无法工作。

请告诉我您是否有干净的方法来实现此目的，或者您可以分享什么包或什么函数来加载更多评论

这就是我想要实现的目标

Answer 1

这是根据您的要求的完整代码

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Nested Comment Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CommentSection(),
    );
  }
}

// Data model for a comment
class Comment {
  final String author;
  final String content;
  List<Comment> replies; 
  bool isExpanded;
  bool isReplying;

  Comment({
    required this.author,
    required this.content,
    List<Comment>? replies, 
    this.isExpanded = false,
    this.isReplying = false,
  }) : replies = replies ?? [] {
   
  }
}

class CommentSection extends StatefulWidget {
  @override
  _CommentSectionState createState() => _CommentSectionState();
}

class _CommentSectionState extends State<CommentSection> {
  Comment? activeComment;

  // Sample comments with replies
  List<Comment> comments = [
    Comment(
      author: 'Johan',
      content: 'Apakah ini disebabkan oleh masalah mesin bus tersebut?',
    ),
    Comment(
      author: 'Jennifer',
      content: 'Sepertinya terdapat permasalahan di mesin bus tersebut',
      replies: [
        Comment(
          author: 'Jonathan',
          content: 'Terima kasih atas informasinya!',
          replies: [
            Comment(
              author: 'Alex',
              content: 'Sama-sama!',
            ),
          ],
        ),
      ],
    ),
  ];

  void toggleReplying(Comment comment) {
    setState(() {
      if (activeComment == comment) {
        activeComment = null; 
      } else {
        activeComment = comment; // Set the current comment as active
      }
    });
  }

  void addReply(Comment comment, String replyText) {
    setState(() {
      comment.replies.add(Comment(author: 'You', content: replyText));
      comment.isReplying = false;
      activeComment = null; 
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Comments')),
      body: ListView.builder(
        itemCount: comments.length,
        itemBuilder: (context, index) {
          return CommentWidget(
            comment: comments[index],
            activeComment: activeComment,
            onReply: toggleReplying,
            onSendReply: addReply,
          );
        },
      ),
    );
  }
}

// Comment Widget for displaying each comment and its replies
class CommentWidget extends StatelessWidget {
  final Comment comment;
  final int level;
  final Function onReply;
  final Function onSendReply;
  final Comment? activeComment; 

  CommentWidget({
    required this.comment,
    this.level = 0,
    required this.onReply,
    required this.onSendReply,
    required this.activeComment, 
    
  });

  @override
  Widget build(BuildContext context) {
    final TextEditingController replyController = TextEditingController();

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: EdgeInsets.only(left: 16.0 * level, top: 8.0, bottom: 8.0),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [

              Container(
                width: 1,
                height: 50,
                color: level > 0 ? Colors.grey : Colors.transparent, // Line for replies
              ),
              SizedBox(width: 8),
              CircleAvatar(child: Text(comment.author[0])), // Avatar with author's initial
              SizedBox(width: 8),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      comment.author,
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                    Text(comment.content),
                    Row(
                      children: [
                        TextButton(
                          onPressed: () => onReply(comment), // Toggle reply text field
                          child: Text('Reply'),
                        ),
                        if (comment.replies.isNotEmpty)
                          TextButton(
                            onPressed: () {
                              comment.isExpanded = !comment.isExpanded;
                              (context as Element).markNeedsBuild();
                            },
                            child: Text(comment.isExpanded ? 'Hide Replies' : 'View Replies'),
                          ),
                      ],
                    ),
                    if (activeComment == comment) 
                      
                      Row(
                        children: [
                          Expanded(
                            child: TextField(
                              controller: replyController,
                              decoration: InputDecoration(hintText: 'Write a reply...'),
                            ),
                          ),
                          IconButton(
                            icon: Icon(Icons.send),
                            onPressed: () {
                              String replyText = replyController.text;
                              if (replyText.isNotEmpty) {
                                onSendReply(comment, replyText); // Add the reply
                              }
                            },
                          ),
                        ],
                      ),
                  ],
                ),
              ),
            ],
          ),
        ),
        if (comment.isExpanded)
          ...comment.replies
              .map((reply) => CommentWidget(
            comment: reply,
            level: level + 1,
            onReply: onReply,
            onSendReply: onSendReply,
            activeComment: activeComment,
            
          ))
              .toList(),
      ],
    );
  }
}