android - 颤振)图标的状态不能立即改变(编辑)
问题描述
我可以在 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()
,但问题没有解决。
我可以得到解决这个问题的帮助吗?
解决方案
我相信您正在使用更改小部件setState()
内部变量的值,而不是该小部件的状态。
您需要有变量来更改状态内的 Widget 以使其更新。将其保留在 Widget 中不会更改图标,除非重新创建整个小部件(例如更改屏幕时)。
(如果我错了,请纠正我。提供小部件的完整代码可能更有用)
推荐阅读
- c++ - 模板和初始化类成员
- mysql - 检查颤振未来功能是否有效?
- python - tkinter 的 grid_columnconfigure / row_columnconfigure 是如何工作的?
- kubernetes - Kubectl 无法连接到服务器并出现 i/o 超时错误
- javascript - 排除与 glob 同名的目录
- node.js - 适用于多个用户 Node.js 的 Asyc 功能
- sitecore - Sitecore 8.1 重建链接数据库出现超时异常
- javascript - API 请求错误 - 请求的资源上不存在“Access-Control-Allow-Origin”标头
- openwisp - 针对问题 openwisp/openwisp-notifications#6 的推送请求出现未经授权的错误
- java - 按钮和标签出现在菜单的 JPanel 上