如何在颤振中创建类似 facebook 的评论结构？答案

【问题标题】：How to create facebook like comment structure in flutter?如何在颤振中创建类似 facebook 的评论结构？
【发布时间】：2020-10-21 00:22:15
【问题描述】：

我正在尝试在我正在进行的项目中构建评论部分。我希望它像 facebook 那样做。我现在已经处理了几乎所有事情，但是如何在原始评论下方填充一个字段并创建另一个评论字段，该字段将在按下回复时输入？

请查看代码并帮助我解决此问题。

    class MyHomePageState extends State<MyHomePage> {
  Widget postComment(String time, String postComment, String profileName,
      String profileImage, int likeCount) {
    return Padding(
      padding: EdgeInsets.only(left: 16.0, right: 16.0, top: 16.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          CircleAvatar(maxRadius: 16, child: Image.asset(profileImage)),
          SizedBox(
            width: 16.0,
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                decoration: BoxDecoration(
                  color: Hexcolor('#E9F1FE'),
                  borderRadius: BorderRadius.circular(6.0),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(12.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        profileName,
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      Text(
                        postComment,
                        style: TextStyle(fontSize: 16.0),
                      )
                    ],
                  ),
                ),
              ),
              SizedBox(
                height: 12.0,
              ),
              Row(
                children: [
                  Text(time, style: TextStyle(fontWeight: FontWeight.w600)),
                  SizedBox(
                    width: MediaQuery.of(context).size.width * 0.1,
                  ),
                  Text('Like', style: TextStyle(fontWeight: FontWeight.w600)),
                  SizedBox(
                    width: MediaQuery.of(context).size.width * 0.1,
                  ),
                  InkWell(
                    onTap: () {},
                    child: Text(
                      'Reply',
                      style: TextStyle(fontWeight: FontWeight.w600),
                    ),
                  ),
                  SizedBox(
                    width: MediaQuery.of(context).size.width * 0.24,
                  ),
                  InkWell(
                      onTap: () {
                        // _incrementCommentLikeCount();
                      },
                      child: Text('$likeCount')),
                  SizedBox(
                    width: MediaQuery.of(context).size.width * 0.02,
                  ),
                  SvgPicture.asset('assets/like.svg')
                ],
              )
            ],
          )
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView(
      children: [
        ///Just calling the widget for sake of example
        postComment(
            '2h', 'This is a comment', 'Unknown Name', 'assets/img1.png', 10)
      ],
    ));
  }
}

这是输出：

【问题讨论】：

您可以创建一个List<Widget> postCommentList = [] 并且每次有新的postComment 只需将其添加到您的小部件列表postCommentList.add(postComment) 中。并在您的 ListView 孩子上获得 postCommentList 小部件children: postCommentList，只要有变化就改变状态。有一个例子可以帮助你。 stackoverflow.com/a/64097893/12789200
@Reign 谢谢你。我会试一试。如果我以后卡住了，你能帮我吗？再次感谢您的快速回复。

标签： flutter flutter-layout

【解决方案1】：

如果您正在寻找更新 ListView 的方法，您可以使用对象列表填充 ListView，即List<Comment> _comments;。

例如，您可以创建一个Comment 模型

class Comment {
  String commentId;
  String userId;
  String comment;
  Timestamp timestamp;

  Comment(
      {required this.id,
        required this.sender,
        required this.comment,
        required this.timestamp});
...

然后使用 List 用数据填充 ListView.builder。

ListView.builder(
  itemCount: _comments.length,
  itemBuilder: (BuildContext context, int index) {
    // Return a Widget for the comments
    return Container(...); 
  }
)

然后您可以使用 ListView.builder() 提供的索引访问 List<Comment> 中的 Comment 对象

即Text('${_comments[index].comment}')

要在列表中添加新的 cmets，您可以在列表中添加新的 Comment 对象。

_comments.add(Comment(
  commentId: generatedCommentId,
  userId: senderUserId,
  comment: senderMessage,
  timestamp: DateTime.now(),
));

【讨论】：