Question

我想在评论列表的开头添加评论，然后为所有评论生成新的CommentContainer小部件。

问题是，如果我在列表的开头添加了一条注释，并且已经有一条注释，它会两次显示相同的注释，因为位置0的注释不会更新，而旧注释现在位于位置1。为什么位置0的那个没有更新，我应该怎么做才能解决？带有评论的列表：

class CommentList extends Container {
  User _user;
  EpisodeInfo _episodeInfo;
  List<Comment> _comments;

  CommentList(this._user, this._episodeInfo, this._comments,
      Function(String) _onSend);
 @override
  Widget build(BuildContext ctx) {
    return Container(
            child: Column(
                     children: _comments.map((comment) {
                         return new CommentContainer(comment, _user);
       }).toList())
    );
  }
}

评论：

class CommentContainer extends StatefulWidget {
  Comment comment;
  User user;
  CommentContainerState state;

  CommentContainer(Comment comment, this.user) {
    this.comment = comment;
  }

  @override
  CommentContainerState createState() {
    this.state = CommentContainerState(this.comment, this.user);
    return this.state;
  }
}

class CommentContainerState extends State<CommentContainer> {
  Comment _comment;
  bool _isReported;
  User currentUser;

  CommentContainerState(this._comment, this.currentUser);

  void init(){
    this._subComments = _comment.comments;
  }

  @override
  void initState() {
    init();
    super.initState();
  }

  updateComment(Comment comment){
    setState(() {
      this._comment = comment;
      init();
    });
  }


  report() {
    setState(() {
      this._isReported = !_isReported;
    });
  }

  @override
  Widget build(BuildContext ctx) {
    sortVotes();
    var date = DateTime.parse(this._comment.created_at);
    String minute = date.minute.toString();
    String hour = date.hour.toString();
    if (date.minute < 10) {
      minute = "0" + date.minute.toString();
    }
    if (date.hour < 10) {
      hour = "0" + date.hour.toString();
    }
    return Container(
      color: Theme.of(ctx).backgroundColor,
      child: Column(
        children: [
          Column(
            children: [
              Row(children: [
                Align(
                  alignment: Alignment.topLeft,
                  child: (_comment.user.avatar == null)
                      ? IconButton(
                          icon: Icon(
                            Icons.person,
                            color: Theme.of(ctx).primaryIconTheme.color,
                          ),
                          onPressed: () {},
                        )
                      : IconButton(
                          icon: new Container(
                              decoration: new BoxDecoration(
                                  shape: BoxShape.circle,
                                  image: new DecorationImage(
                                    fit: BoxFit.fill,
                                    image: NetworkImage(
                                          _comment.user.avatar
                                    ),
                                  ))),
                          onPressed: () {},
                        ),
                ),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    textDirection: TextDirection.ltr,
                    children: [
                      Row(
                        children: [
                          ThemeText(
                            _comment.user.name + " ",
                            ctx,
                            fontSize: 12.0,
                          ),
                          (this._comment.created_at != null)
                              ? Text(
                                  date.day.toString() +
                                      "." +
                                      date.month.toString() +
                                      "." +
                                      date.year.toString() +
                                      " " +
                                      hour +
                                      ":" +
                                      minute,
                                  style: TextStyle(
                                      color: Colors.grey, fontSize: 9.0))
                              : Text("",
                                  style: TextStyle(
                                      color:
                                          Theme.of(ctx).textTheme.title.color,
                                      fontSize: 10.0)),
                          (_comment.user.id == currentUser.id)
                              ? IconButton(
                                  padding: EdgeInsets.all(0),
                                  iconSize: 15,
                                  icon: Icon(
                                    Icons.delete,
                                    color: Theme.of(ctx).primaryIconTheme.color,
                                  ),
                                  onPressed: () {
                                    if (!_isReported) {
                                      report();
                                    }
                                  },
                                )
                              : Container(),
                          IconButton(
                            padding: EdgeInsets.all(0),
                            iconSize: 15,
                            icon: Icon(
                              Icons.report,
                              color: Theme.of(ctx).primaryIconTheme.color,
                            ),
                            onPressed: () {
                              if (!_isReported) {
                                report();
                              }
                            },
                          )
                        ],
                      ),
                      ThemeText(
                        this._comment.text,
                        ctx,
                        fontSize: 12.0,
                        softWrap: true,
                      ),
                    ],
                  ),
                )
              ])
            ],
          )
        ],
      ),
    );
  }
}

Answer 1

我通过将报告功能移至其自己的StatefulWidget并将CommentContainer转换为StatelessWidget来修复了该问题

Flutter-添加新的小部件时，列内的StatefulWidgets不会更改

1 个答案: