Flutter 如何使用 Provider 从另一个屏幕更新 UI？答案

【问题标题】：Flutter How to update UI from another screen with Provider?Flutter 如何使用 Provider 从另一个屏幕更新 UI？
【发布时间】：2021-04-03 21:10:09
【问题描述】：

我的应用程序使用Tab bar：

主屏幕显示用户的姓名和头像。当用户单击帐户选项卡（最后一个选项卡）并更新名称和照片时。主屏界面如何监听和更新最新数据？

【问题讨论】：

标签： flutter flutter-layout provider

【解决方案1】：

我使用库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);

这对于检查登录用户的状态非常有用。

【讨论】：