如何解决Flutter 如何使用 Provider 从另一个屏幕更新 UI?
我的应用程序使用 Tab bar
:
主屏幕显示用户的姓名和头像。 当用户单击“帐户”选项卡(最后一个选项卡)并更新名称和照片时。主屏UI如何监听和更新最新数据?
解决方法
我使用 lib Provider
。详情见provider。
首先,创建 UserInfoProvider
个人:
class UserInfoProvider extends ChangeNotifier {
UserInfoData _userInfoData;
UserInfoData get userInfoData => this._userInfoData;
UserInfoProvider(){
_userInfoData = new UserInfoData();
}
void setUserInfoData(UserInfoData userInfo){
_userInfoData = userInfo;
notifyListeners();
}
}
之后,您需要在 main
上处理此提供程序:
ChangeNotifierProvider<UserInfoProvider>(
create: (_) => provider,child: MaterialApp(
title: 'My App',),)
然后,当使用 Consumer 包装 Home UI 时:
Consumer<UserInfoProvider>(
builder: (_,userInfoProvider,__){
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
//get data from provider in Home UI
Text(userInfoProvider.userInfoData.displayName),],);
}
)
最后,您可以在另一个屏幕中更新,HomeScreen 中的 Text
将自动更新 UI。
Provider.of<UserInfoProvider>(context,listen: false).setUserInfoData(userDataUpdate);
这对于检查登录用户的状态非常有用。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。