1

我第一次使用 Flutter 和 Cubit，我想知道这是否是检索存储变量的好方法，在我的 cas 中是当前登录的用户。

登录后，用户可以转到他的个人资料页面并查看/更新它。

登录表单：

submit(BuildContext context) async {
    if (_formKey.currentState!.validate()) {
      _formKey.currentState!.save();

      final authCubit = context.read<AuthCubit>();
      authCubit.login(
        email: _data.email!,
        password: _data.password!,
        deviceName: _deviceInfos.deviceName,
      );
    }
  }

AuthCubit：登录方式：

class AuthCubit extends Cubit<AuthState> {
  dynamic user;
  
  Future<void> login({
    required String email,
    required String password,
    required String deviceName,
  }) async {
    emit(AuthLoading());

    // Get the user from the API
    this.user = apiResponse['user'];

    emit(AuthConnected(user));
  }
}

个人资料页：

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Profile'),
      ),
      body: BlocBuilder<AuthCubit, AuthState>(
        builder: (context, state) {
          final user = context.read<AuthCubit>().user;

          return Center(
            child: Column(
              children: <Widget>[
                Text('Hello, ' + (user != null ? user['name'] : 'stranger.')),
                ElevatedButton(
                  onPressed: () {
                    context.read<AuthCubit>().logout();
                  },
                  child: Text('Logoout'),
                ),
              ],
            ),
          );
        },
      ),
    );
}

任何建议/建议都非常感谢。谢谢！

4

1 回答 1

2

好的，所以您的示例有什么问题是您根本没有使用状态。User是您状态的一部分，我看到您已经将它 ( emit(AuthConnected(user)) 存储在这里，所以只需user从 BLoC 中删除该对象：

class AuthCubit extends Cubit<AuthState> {
  Future<void> login({
    required String email,
    required String password,
    required String deviceName,
  }) async {
    emit(AuthLoading());

    // Get the user from the API
    final user = apiResponse['user'];

    emit(AuthConnected(user));
  }
}

然后，在 UI 内部，您应该从状态对象而不是直接从 BLoC 获取用户：

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Profile'),
      ),
      body: BlocBuilder<AuthCubit, AuthState>(
        builder: (context, state) {
          final user = state.user; // You should get the error here

          return Center(
            child: Column(
              children: <Widget>[
                Text('Hello, ' + (user != null ? user['name'] : 'stranger.')),
                ElevatedButton(
                  onPressed: () {
                    context.read<AuthCubit>().logout();
                  },
                  child: Text('Logoout'),
                ),
              ],
            ),
          );
        },
      ),
    );
}

现在您应该得到一个错误，因为并非所有状态都包含该user对象，例如AuthLoading缺少该对象。要解决这个问题，您应该检查状态类型并相应地渲染 UI：

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Profile'),
      ),
      body: BlocBuilder<AuthCubit, AuthState>(
        builder: (context, state) {
          if (state is AuthLoading) {
            return CircularProgressIndicator(); // E.g. show loader
          }

          final user = state.user;

          return Center(
            child: Column(
              children: <Widget>[
                Text('Hello, ' + (user != null ? user['name'] : 'stranger.')),
                ElevatedButton(
                  onPressed: () {
                    context.read<AuthCubit>().logout();
                  },
                  child: Text('Logoout'),
                ),
              ],
            ),
          );
        },
      ),
    );
}
于 2021-06-02T06:20:01.447 回答