如何在登录页面中使用 BLoC

Posted 2023-02-23

【中文标题】如何在登录页面中使用 BLoC

【英文标题】：How to use BLoC in a login page

【发布时间】：2020-04-02 02:59:09

【问题描述】：

我有一个登录页面，包含两个 TextFormField。 我如何使用 BLoC 来维护这两个 TextFormField 文本，当我按下登录按钮时，我可以同时获取这两个 TextFormField

ps：我想把登录表单放在一个文件中。

我知道如何在 BLoC 中保持一个状态，例如计数状态，通过接收器添加，以及重新渲染流。 BLoC 中的两个状态怎么样？

谁能给我一些建议，谢谢

【问题讨论】：

给你：medium.com/swlh/…

尝试使用 combineLatest2。每当任何可观察序列发出项目时，它都会使用 [combiner] 函数将给定的 Streams 合并为一个可观察序列。在所有流都发出至少一项之前，Observable 不会发出。例如：***.com/a/55951673/1723187

【参考方案1】：

你可以关注这个https://bloclibrary.dev/#/flutterlogintutorial?id=setup 一步一步用包flutter_bloc创建登录表单

登录表单的代码 sn-p

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_login/login/login.dart';

class LoginForm extends StatefulWidget 
  @override
  State<LoginForm> createState() => _LoginFormState();


class _LoginFormState extends State<LoginForm> 
  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) 
    _onLoginButtonPressed() 
      BlocProvider.of<LoginBloc>(context).add(
        LoginButtonPressed(
          username: _usernameController.text,
          password: _passwordController.text,
        ),
      );
    

    return BlocListener<LoginBloc, LoginState>(
      listener: (context, state) 
        if (state is LoginFailure) 
          Scaffold.of(context).showSnackBar(
            SnackBar(
              content: Text('$state.error'),
              backgroundColor: Colors.red,
            ),
          );
        
      ,
      child: BlocBuilder<LoginBloc, LoginState>(
        builder: (context, state) 
          return Form(
            child: Column(
              children: [
                TextFormField(
                  decoration: InputDecoration(labelText: 'username'),
                  controller: _usernameController,
                ),
                TextFormField(
                  decoration: InputDecoration(labelText: 'password'),
                  controller: _passwordController,
                  obscureText: true,
                ),
                RaisedButton(
                  onPressed:
                      state is! LoginLoading ? _onLoginButtonPressed : null,
                  child: Text('Login'),
                ),
                Container(
                  child: state is LoginLoading
                      ? CircularProgressIndicator()
                      : null,
                ),
              ],
            ),
          );
        ,
      ),
    );