首页 > 解决方案 > 颤振)图标的状态不能立即改变(编辑)

问题描述

我可以在 Instagram 等帖子中切换心形图标。我实现了它,以便在切换图标时将用户信息上传到 Firestore。
“Like Icon”的“Like”和“Unlike”功能没有问题,但还有一个问题。有一个问题是在帖子中切换图标时图标的颜色不会立即改变。当我转到另一个屏幕并返回时,我可以检查此图标是否已更改。

以下是此图标的代码。(我编辑了这段代码)

    class LikeToggleIcon extends StatefulWidget {
      final String postKey;
      final PostModel postModel;
    
      const LikeToggleIcon(
          {Key key,
          this.postKey,
          this.postModel,
          this.fromSearch,
          this.searchResults})
          : super(key: key);
    
      @override
      State<LikeToggleIcon> createState() => _LikeToggleIconState();
    }
    
    class _LikeToggleIconState extends State<LikeToggleIcon> {
      // bool _isLiked = false;
    
      @override
      Widget build(BuildContext context) {
        //get userModel
        UserModel userModel =
            Provider.of<UserModelState>(context, listen: false).userModel;
    
          return IconButton(
            onPressed: () {
              // setState(() {
                postNetworkRepo.toggleLike(
                    widget.postModel.postKey, userModel.userKey);
              // });
            },
            icon: Icon(
              widget.postModel.numOfLikes.contains(userModel.userKey)
                  ? Icons.favorite_outlined
                  : Icons.favorite_border_outlined,
              size: 27,
              color: Colors.redAccent,
            ),
          );




    //toggle method
    class PostNetworkRepo with Transformers {
          Future<void> toggleLike(String postKey, String userKey) async {
            final DocumentReference postRef =
                Firestore.instance.collection(COLLECTION_POSTS).document(postKey);
            final DocumentSnapshot postSnapshot = await postRef.get();
        
            //check Post collection
            if (postSnapshot.exists) {
              //check already contain userKey 
              //if no contain upload userKey, else delete userKey (toggle Like/Unlike)
              if (postSnapshot.data[KEY_NUMOFLIKES].contains(userKey)) {
                postRef.updateData({
                  KEY_NUMOFLIKES: FieldValue.arrayRemove([userKey])
                });
              } else {
                postRef.updateData({
                  KEY_NUMOFLIKES: FieldValue.arrayUnion([userKey])
                });
              }
            }
          }
        }
        
        PostNetworkRepo postNetworkRepo = PostNetworkRepo();

//This is the part of detail post screen.
class DetailScreen extends StatefulWidget {

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

class _DetailScreenState extends State<DetailScreen> {
  @override
  Widget build(BuildContext context) {
//get userModel 
    UserModel userModel =
        Provider.of<UserModelState>(context, listen: false).userModel;

              return Scaffold(
                appBar: AppBar(
                  title: _postUser(),
                  actions: [
                     //toggle likeIcon
                     LikeToggleIcon(
                       postKey: widget.postKey,
                       postModel: widget.postModel,
                     ),
                  ],
            ),    

我尝试setState()在 上使用IconButton(),但问题没有解决。

我可以得到解决这个问题的帮助吗?

标签: androidiosflutter

解决方案


我相信您正在使用更改小部件setState()内部变量的值,而不是该小部件的状态

您需要有变量来更改状态内的 Widget 以使其更新。将其保留在 Widget 中不会更改图标,除非重新创建整个小部件(例如更改屏幕时)。

(如果我错了,请纠正我。提供小部件的完整代码可能更有用)


推荐阅读