颤振）图标的状态不能立即改变（编辑）答案

【问题标题】：flutter) The status of the icon can't be changed immediately (Edit)颤振）图标的状态不能立即改变（编辑）
【发布时间】：2021-11-16 15:26:29
【问题描述】：

我可以像 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,
                     ),
                  ],
            ),

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

我可以就这个问题寻求帮助吗？

【问题讨论】：

标签： android ios flutter

【解决方案1】：

我相信您正在使用 setState() 更改 Widget 内的变量值，而不是该小部件的 State。

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

（如果我错了，请纠正我。提供小部件的完整代码可能会更有用）

【讨论】：