Flutter BloC布尔值更新状态

时间:2019-10-31 16:31:33

标签: flutter state bloc

我想为我的应用程序实现一个欢迎屏幕,该屏幕能够以不同的形式和按钮从登录更改为注册,而无需更改屏幕上的某些小部件(例如背景)。 我试图将同一支架与堆栈一起使用,所有支架都由BlocProvider包围。 welcomeBloc应该负责登录和注册表单之间的表单更改。 loginBloc和registerBloc应该负责管理两种形式的状态和输入。 用户存储库用于诸如使用google登录等操作。

class WelcomeScreen extends StatefulWidget {
  @override
  _WelcomeScreenState createState() => _WelcomeScreenState();
}

class _WelcomeScreenState extends State<WelcomeScreen> {
  LoginBloc _loginBloc;
  RegisterBloc _registerBloc;
  WelcomeBloc _welcomeBloc;
  UserRepository _userRepository = UserRepository();

  @override
  void initState() {
    _loginBloc = LoginBloc(userRepository: _userRepository);
    _registerBloc = RegisterBloc(userRepository: _userRepository);
    _welcomeBloc = WelcomeBloc();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      bloc: _welcomeBloc,
      child: Scaffold(
        backgroundColor: Colors.black,
        resizeToAvoidBottomPadding: false,
        body: Stack(
          children: <Widget>[
            Opacity(opacity: 0.6, child: Background()),
            Padding(
              padding: const EdgeInsets.only(top: 130, left: 20),
              child: Text(
                "Welcome.",
                style: welcomeStyleBig,
              ),
            ),
            _welcomeBloc.getLogin
                ? BlocProvider(
                    bloc: _loginBloc,
                    child: LoginForm(
                      userRepository: _userRepository,
                    ),
                  )
                : BlocProvider(
                    bloc: _registerBloc,
                    child: RegisterForm(),
                  ),
          ],
        ),
      ),
    );
  }
}

我试图通过在WelcomeBloc中使用布尔变量_isLogin来实现表单的更改,但是当我点击负责更新的按钮时,在我重新加载应用程序之前,没有任何变化。也许我不太了解集团模式。

这是我受欢迎的集团文件。

welcome_bloc.dart

class WelcomeBloc extends Bloc<WelcomeEvent, WelcomeState> {
  @override
  WelcomeState get initialState => InitialWelcomeState();

  bool _isLogin = true;

  bool get getLogin => _isLogin;

  @override
  Stream<WelcomeState> mapEventToState(
    WelcomeEvent event,
  ) async* {
    if (event is SwitchToLogin) {
      _isLogin = true;
      yield WelcomeLogin();
    }
    if (event is SwitchToRegister) {
      _isLogin = false;
      yield WelcomeRegister();
    }
  }
}

welcome_event.dart

abstract class WelcomeEvent extends Equatable {
  WelcomeEvent([List props = const []]) : super(props);
}

class SwitchToLogin extends WelcomeEvent {
  @override
  String toString() {
    return "Switch to Login";
  }
}

class SwitchToRegister extends WelcomeEvent {
  @override
  String toString() {
    return "Switch to Register";
  }
}

welcome_state.dart

abstract class WelcomeState extends Equatable {
  WelcomeState([List props = const []]) : super(props);
}

class InitialWelcomeState extends WelcomeState {
  @override
  List<Object> get props => [];
}

class WelcomeLogin extends WelcomeState {
  @override
  String toString() => 'Welcome Login';
}

class WelcomeRegister extends WelcomeState {
  @override
  String toString() => 'Welcome Register';
}

1 个答案:

答案 0 :(得分:1)

要更新小部件状态,您需要BlocBuilder而不是BlocProvider。

  • BlocProvider向其子级提供一个块。
  • BlocBuilder处理构建小部件以响应新状态。

您也在使用

-noexit

BlocProvider获取BlocProvider( bloc: _loginBloc, 作为参数而不是'bloc:' 我不明白你怎么不会出错。

在这种情况下,您可以执行以下代码。
(可能有很多错误,但是您可以理解这个概念)

您正在使用的flutter_bloc库的文档也很棒。 我建议您阅读并检查示例

所以我认为解决方案应该是这样的:

builder:

希望有帮助