如何保存喜欢的帖子？

Posted 2021-04-27

我有一个PostView页面，其中有一个“喜欢”按钮。我有一个带有listview.builder的PostList页面，该页面返回PostView（）。用户可以通过按“喜欢”按钮来“喜欢”此页面上的帖子。如何在此“帖子列表”页面上保存喜欢的帖子？我想将喜欢的帖子保存在PostList页面的final _likedPosts = Set<Post>();中。

class PostList extends StatefulWidget {
  @override
  _PostListState createState() => _PostListState();
}

class _PostListState extends State<PostList> {
  @override
  Widget build(BuildContext context) {

    final posts = Provider.of<List<Post>>(context) ?? [];

    return ListView.builder(
      itemCount: posts.length,
      itemBuilder: (context, index) {
        return PostView(post: posts[index]);
      },
    );
  }
}




class PostView extends StatefulWidget {
  final Post post;


  PostView({ this.post});

  @override
  _PostViewState createState() => _PostViewState();
}

class _PostViewState extends State<PostView> {
  bool _isLiked = false;
  int _likeCount = 0;

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

    _likeCount = widget.post.likeCount;

  }




  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.only(top: 8.0),
          child: Card(
            color: Colors.grey[900],
            margin: EdgeInsets.fromLTRB(30.0, 0.0, 40.0, 0.0),
            child: ListTile(
              // leading:

              title: Text(
                'Title',
              ),
              subtitle: Text('SubTitle'),
              trailing: IconButton(
                icon: _isLiked
                    ? Icon(
                        Icons.favorite_border,
                        color: Colors.red,
                      )
                    : Icon(
                        Icons.favorite,
                        color: Colors.red
                      ),
                iconSize: 30.0,
                onPressed: () async {
                  // _likePost();
                  setState(() {
                    if (_isLiked) {
                      print(true);
                      _likeCount--;
                      _isLiked = false;
                      DatabaseService()
                          .updateLikes(id: widget.post.id, value: -1);
                      print(_likeCount);
                    } else {
                      _likeCount++;
                      _isLiked = true;
                      print(_likeCount);
                      DatabaseService()
                          .updateLikes(id: widget.post.id, value: 1);
                    }
                  });
                },
              ),
            ),

          ),
        ),
        SizedBox(
          height: 1.0,
        ),
      ],
    );
  }
}

答案

所以您的PostView现在变为：

class PostView extends StatefulWidget { final Post post; final Function(bool) toggledLike; PostView({ this.post, this.toggledLike}); @override _PostViewState createState() => _PostViewState(); }

现在，每次您在onPressed方法之一中切换自己喜欢的状态时，您还将调用此回调，例如

widget.toggleLike(_isLiked);

您的listView构建器现在看起来像这样

class _PostListState extends State<PostList> {
  @override
  Widget build(BuildContext context) {

    final posts = Provider.of<List<Post>>(context) ?? [];

    return ListView.builder(
      itemCount: posts.length,
      itemBuilder: (context, index) {
        return PostView(post: posts[index], toggleLike: (isLiked) {
           //Add posts[index] in your set here
        });
      },
    );
  }
}

希望这会有所帮助！