七爪源码：如何使用 Flutter BLoC 验证表单？

发布时间：2022-09-28 15:52:11 所属栏目：PHP教程来源：

导读：　　许多应用程序的组成部分之一是表单验证。移动应用程序开发人员总是处理表单，因为当用户没有正确填写表单时，必须向用户显示相关警告。

　　开发人员需要适当地完成这项任务，为此，他们需要编写特定的验证逻

　　许多应用程序的组成部分之一是表单验证。移动应用程序开发人员总是处理表单，因为当用户没有正确填写表单时，必须向用户显示相关警告。

　　开发人员需要适当地完成这项任务，为此，他们需要编写特定的验证逻辑。在这里，您将学习如何使用 Flutter Bloc 执行表单验证。在实施此步骤并寻找专家开发人员在您的业务应用程序中正确执行表单验证过程时，您是否遇到任何麻烦？

　　颤振集团是什么意思？

　　Flutter Bloc 是 Fl??utter 中的状态管理。您可以访问它来处理您希望在颤振应用程序中执行的所有状态。它也是进行状态管理的最佳和最简单的方法。它允许您毫不费力地向 Flutter 应用程序添加任何类型的更改。

　　无论您的级别如何，您都可以快速学习该概念并将此依赖项添加到您的项目中。谷歌创建了 Bloc，它只不过是帮助将业务逻辑与感知层分离的设计模式。此外，它还授权开发人员有效地使用代码。

　　Flutter Bloc 有几个小部件，例如 Bloc Builder、Bloc Selector、Bloc provider、MultiBlocprovider、Bloc Listener 和 Multi Bloc Listener。每个小部件都执行特定的操作，因此您必须使用适合您的 Flutter 项目的正确操作。

　　如何在 Flutter 中进行表单验证

　　Flutter SDK 呈现开箱即用的小部件和功能，使用户在访问表单验证时的生活更轻松。表单验证存在两种不同的方法：表单小部件和提供程序包。以下是在 Flutter 中启动表单验证的步骤。确保正确执行每个步骤以获得所需的输出。

　　在这里，您将深入了解 Bloc，因为它是验证表单的最佳方式。 bloc 库呈现用于验证字段的 Flutter 包。它通常称为 form_bloc。

　　一旦使用 Flutter BLoC 实现表单验证，就需要在 pubspec.ymal 文件中添加依赖项以获取 Bloc 的所有属性。因此，您可以有效地使用它进行状态管理。

　　dependencies:
　　flutter:
　　sdk: Flutter
　　cupertino_icons: ^1.0.2
　　rxdart: ^0.27.3
　　flutter_bloc: ^8.0.1
　　这里使用了两个依赖项 rxdart 和 flutter_bloc。 RxDart 扩展了 Stream 控制器和 Dart Streams 的功能。 Flutter_bloc 是使用 Bloc Provider 将 Counter-cubit 渲染到 Counter-page，然后用 BlocBuilder 对状态变化做出反应。

　　为作为抽象类 Cubit 扩展 Bloc-base 的应用程序创建 cubit 类 (login_bloc_cubit.dart)。然后，创建名为 LoginScreenCubit() 的类。之后，定义参数构造函数和您使用的所有控制器。这是它的外观！

　　LoginScreenCubit() : super(LoginInitial());
　　//define controllers
　　final _userNameController = BehaviorSubject();
　　final _passwordController = BehaviorSubject();
　　final _phonenoController = BehaviorSubject();
　　您可以在定义和流控制器的帮助下获取数据，如下所述。

　　Stream get userNameStream => _userNameController.stream;
　　Stream get passwordStream => _passwordController.stream;
　　Stream get phonenoStream => _phonenoController.stream;
　　现在，是时候创建清除数据的方法了。为此，您可以使用以下代码。

　　void dispose() {
　　updateUserName(‘’);
　　updatePassword(‘’);
　　updatePhoneNumber(‘’);
　　}
　　然后，添加验证方法。这是整个项目的重要步骤之一，您可以在其中检查用户的价值。

　　//validation of UserName
　　voidupdateUserName(String userName) {
　　if (userName.length< 3) {
　　_userNameController.sink.addError(“Please enter at least 3 words”);
　　} else {
　　_userNameController.sink.add(userName);
　　}
　　}
　　//validation of Password
　　void updatePassword(String password) {
　　if (password.length< 4) {
　　_passwordController.sink.addError(“Please enter more then 4 words”);
　　} else {
　　_passwordController.sink.add(password);
　　}
　　}
　　//validation of Phone Number
　　void updatePhoneNumber(String phoneNo) {
　　if (phoneNo.length == 10) {
　　_phonenoController.sink.add(phoneNo);
　　}
　　else {
　　_phonenoController.sink.addError(“Please enter valid Phone Number”);
　　}
　　}
　　然后，创建传递 Flutter 应用程序中使用的所有提供程序的提供程序类 (bloc_provider.dart)。

　　ListblocProviders = [
　　BlocProvider(create: (context) =>LoginPageCubit()),
　　];
　　接下来，您需要使用您已经在 main 的 bloc_provider.dart 中定义的 MultiBlocProvider() 包装 MaterialApp()。

　　MultiBlocProvider(
　　providers: blocProviders,
　　child: constMaterialApp(
　　debugShowCheckedModeBanner: false,
　　home: LoginScreen(),
　　),
　　);
　　然后，创建一个名为“login_bloc_state.dart”的类，您需要在其中定义 LoginBloc{}，然后是扩展至 LoginBloc{} 的 LoginInitial。

　　abstract class LoginBloc {}
　　classLoginInitial extends LoginBloc {}
　　最后，在 LoginScreen(login_screen.dart) 中，您必须定义 LoginScreenCubit 并添加 initiState(){}。在那里，您可以添加 WidgetsBinding.instance 并正确访问 dispose 方法。

　　LoginScreenCubit? _loginScreenCubit;
　　@override
　　void initState() {
　　WidgetsBinding.instance?.addPostFrameCallback((_) {
　　_loginScreenCubit?.dispose();
　　});
　　super.initState();
　　}
　　最后，需要在_loginScreenCubit 中添加BlocProvider。它可以帮助您使用用户名、密码和电话号码等值获得登录表单的正确输出。

　　_loginScreenCubit = BlocProvider.of(
　　context,
　　listen: false,
　　);
　　为文本字段创建 UI 并访问 StreamBuilder 以正确更新 UI 部分中的数据。这是要使用的代码。

　　StreamBuilder(
　　stream: _loginScreenCubit?.passwordStream,
　　builder: (context, snapshot) {
　　returnTextField(
　　onChanged: (text) {
　　_loginScreenCubit?.updatePassword(text);
　　},
　　decoration: constInputDecoration(
　　labelText: ‘Password’,
　　),
　　keyboardType: TextInputType.text);
　　}),
　　当我们运行应用程序时，我们会得到如下屏幕的输出。

　　对于底部按钮，我们还使用 StreamBuilder。在这个我们通过流中的_loginScreenCubit和cheBloc Widgetsck，数据是否被验证？在此之后，我们返回 GestureDetector() 并应用一个条件，即如果数据已更新，则此屏幕转到下一个屏幕，否则登录按钮将被禁用。当快照。数据为真PHP表单验证，则按钮的颜色将为蓝绿色，否则为灰色。查看我们在 FLutter 中制作浮动操作按钮的指南。

　　_bottomButton() {
　　return StreamBuilder(
　　stream: _loginScreenCubit?.validateForm,
　　builder: (context, snapshot) {
　　return GestureDetector(
　　onTap: () {
　　if (snapshot.hasData) {
　　Navigator.push(
　　context, MaterialPageRoute(builder: (context) => Home1()));
　　}
　　},
　　child: Container(
　　decoration: BoxDecoration(
　　color: snapshot.hasData ? Colors.teal : Colors.grey,
　　borderRadius: BorderRadius.circular(30)),
　　height: 70,
　　width: MediaQuery.of(context).size.width,
　　child: const Center(
　　child: Text(
　　‘Login’,
　　style: TextStyle(
　　color: Colors.white,
　　fontWeight: FontWeight.bold,
　　fontSize: 27),
　　),
　　),
　　),
　　);
　　},
　　);
　　}
　　结论

　　这篇博客展示了如何在 Bloc 的帮助下在 Flutter 中执行表单验证。此外，有很多方法可以做同样的事情。如果您使用适合您的 Flutter 项目的正确技术，那将会有所帮助。

（编辑：应用网_阳江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

php笔记之有规律大文件	PHP4.3.10以下版本出现
PHP利用AJAX获取网页并	PHP stripos函数及注意