颤振稳定性叶瓣图_使用块阵模式进行颤振场验证

2024-03-03 09:59

本文主要是介绍颤振稳定性叶瓣图_使用块阵模式进行颤振场验证,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

颤振稳定性叶瓣图

Validating fields is common practice within apps, whether that be for simply checking that it is not empty or for determining whether the value entered or selected is valid based on specific criteria. From an end user’s perspective, validation errors can sometimes be ambiguous. Therefore, it is important for the app to let the user know exactly why something has gone wrong!

验证字段是应用程序中的常见做法,无论是简单地检查字段是否为空还是根据特定条件确定输入或选择的值是否有效。 从最终用户的角度来看,验证错误有时可能是模棱两可的。 因此,对于应用程序而言,重要的是要让用户确切地知道出了什么问题了!

The BLoC package for Flutter offers a fantastic state management approach that facilitates both testable and maintainable code.

Flutter的BLoC软件包提供了一种出色的状态管理方法,可简化可测试和可维护的代码。

We are going to use this BLoC pattern to add some validation logic to this very simple Flutter UI, which contains an email field and a submit button.

我们将使用此BLoC模式向此非常简单的Flutter UI添加一些验证逻辑,该UI包含一个电子邮件字段和一个提交按钮。

Image for post

In this case, this email field is going to be considered valid if both of the following conditions are met:

在这种情况下,如果同时满足以下两个条件,则此电子邮件字段将被视为有效:

  1. It is not empty

    它不是空的
  2. It matches our email validation regex

    它与我们的电子邮件验证正则表达式匹配
Image for post

These validation steps are going to take place within the BLoC itself. However due to their generic nature, we are going to separate this logic out into a Mixin so that we can reuse it in other BLoCs. (Email validation regex can be found here)

这些验证步骤将在BLoC本身内进行。 但是,由于它们的通用性,我们将把这个逻辑分离成一个Mixin,以便我们可以在其他BLoC中重用它。 (可在此处找到电子邮件验证正则表达式)

mixin ValidationMixin {bool isFieldEmpty(String fieldValue) => fieldValue?.isEmpty ?? true;bool validateEmailAddress(String email) {if (email == null) {return false;}return RegExp(r'^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$').hasMatch(email);}
}

The field’s value is then going to be validated through these functions and if it is not valid for whatever reason, we want to raise an error that is going to be displayed on our UI. However we do not want the BLoC to dictate exactly what the UI should render, instead it should just notify the UI that an error has occurred and it can then handle this accordingly.

然后,将通过这些函数来验证该字段的值,如果由于某种原因该字段的值无效,我们将引发一个错误,该错误将显示在我们的UI上。 但是,我们不希望BLoC确切指示UI应该呈现的内容,而只是通知UI发生了错误,然后BLoC可以相应地进行处理。

Therefore, we are going to create an enum to represent the state of the field, which can then be added to the BLoC’s state, this enum will simply have 2 values; Empty or Invalid.

因此,我们将创建一个表示字段状态的枚举,然后可以将其添加到BLoC的状态,该枚举将仅具有2个值; 为空无效

enum FieldError { Empty, Invalid }

To begin the BLoC creation, we are then going to create the events that the UI is going to emit and the state that it will be receiving back.

为了开始BLoC的创建,我们将创建UI将要发出的事件以及它将被接收回的状态。

The only event that is required in this case, is a simple submit event that will send the text entered into the email field to the BLoC.

在这种情况下,唯一需要的事件是一个简单的提交事件,它将把在电子邮件字段中输入的文本发送到BLoC。

abstract class FormScreenEvent {}class FormScreenEventSubmit extends FormScreenEvent {final String email;FormScreenEventSubmit(this.email);
}

The state will hold the error (if applicable) for the email field represented by the FieldError enum and a boolean to indicate if the submission event was successful. Finally, an isBusy boolean is used to notify the UI that the BLoC is processing data. This is a useful flag to have throughout an app and is therefore often abstracted to base classes that states can inherit from.

该状态将保留由FieldError枚举表示的电子邮件字段的错误(如果适用)和一个布尔值,以指示提交事件是否成功。 最后,一个isBusy布尔值用于通知UI BLoC正在处理数据。 这是整个应用程序中有用的标志,因此通常抽象为状态可以继承的基类。

class FormScreenState {final bool isBusy;final FieldError emailError;final bool submissionSuccess;FormScreenState({this.isBusy: false,this.emailError,this.submissionSuccess: false,});
}

We are now going to build out the BLoC itself, which is going to handle the events emitted from the UI and yield states back for the UI to respond to.

现在,我们将构建BLoC本身,该BLoC本身将处理从UI发出的事件并产生状态以供UI响应。

class FormScreenBloc extends Bloc<FormScreenEvent, FormScreenState>with ValidationMixin {FormScreenBloc();@overrideFormScreenState get initialState => FormScreenState();@overrideStream<FormScreenState> mapEventToState(FormScreenEvent event) async* {if (event is FormScreenEventSubmit) {yield FormScreenState(isBusy: true);if (this.isFieldEmpty(event.email)) {yield FormScreenState(emailError: FieldError.Empty);return;}if (!this.validateEmailAddress(event.email)) {yield FormScreenState(emailError: FieldError.Invalid);return;}yield FormScreenState(submissionSuccess: true);}}
}

This BLoC first yields a state that indicates that it is busy processing the data, such that the UI can inform the user that an action is taking place. After this, it proceeds to validate that the email is both not empty and matches the validation regex using the methods in the mixin. If the BLoC determines that the email is not valid it will yield FieldErrors accordingly, otherwise a success state is yielded.

此BLoC首先产生一个状态,指示其正在忙于处理数据,以便UI可以通知用户正在执行操作。 此后,它将继续使用mixin中的方法来验证电子邮件是否不为空并且是否与验证正则表达式匹配。 如果BLoC确定电子邮件无效,它将相应地产生FieldErrors ,否则产生成功状态。

Finally, it is time to tie this together with the UI!

最后,是时候将其与UI结合起来了!

class _FormScreenState extends State<FormScreen> {FormScreenBloc _bloc;final _emailController = TextEditingController();@overridevoid initState() {this._bloc = FormScreenBloc();super.initState();}@overridevoid dispose() {_emailController.dispose();_bloc.close();super.dispose();}@overrideWidget build(BuildContext context) {return BlocListener<FormScreenBloc, FormScreenState>(bloc: this._bloc,listener: (context, state) {if (state.submissionSuccess) {showDialog(context: context,child: AlertDialog(title: Text('Submission success!'),content: Text("Your submission was a success"),actions: [FlatButton(child: Text('OK'),onPressed: () => Navigator.of(context).pop(),),]),);}},child: Scaffold(body: Padding(padding: EdgeInsets.symmetric(horizontal: 30),child: Center(child: BlocBuilder<FormScreenBloc, FormScreenState>(bloc: this._bloc,builder: (context, state) {if (state.isBusy) {return CircularProgressIndicator();}return Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[TextField(controller: this._emailController,style: TextStyle(color: this._hasEmailError(state)? Colors.red: Colors.black,),decoration: InputDecoration(hintText: 'Email',labelStyle: TextStyle(color: this._hasEmailError(state)? Colors.red: Colors.black,),hintStyle: TextStyle(color: this._hasEmailError(state)? Colors.red: Colors.black,),enabledBorder: this._renderBorder(state),focusedBorder: this._renderBorder(state),),),if (this._hasEmailError(state)) ...[SizedBox(height: 5),Text(this._emailErrorText(state.emailError),style: TextStyle(color: Colors.red),),],SizedBox(height: 30),RaisedButton(child: Text('Submit'),onPressed: () => this._bloc.add(FormScreenEventSubmit(this._emailController.text)),),]);}),),),),);}UnderlineInputBorder _renderBorder(FormScreenState state) =>UnderlineInputBorder(borderSide: BorderSide(color: this._hasEmailError(state) ? Colors.red : Colors.black,width: 1),);bool _hasEmailError(FormScreenState state) => state.emailError != null;String _emailErrorText(FieldError error) {switch (error) {case FieldError.Empty:return 'You need to enter an email address';case FieldError.Invalid:return 'Email address invalid';default:return '';}}
}

At first glance it seems as though there is a lot going on here! So let’s break it down.

乍一看似乎这里发生了很多事情! 因此,让我们对其进行分解。

Firstly, the submit button is now emitting an event to the BLoC and is sending through the current text held by the controller for the email field. Clicking this button is now going to trigger the BLoC to perform the validation logic.

首先,“提交”按钮现在向BLoC发出事件,并正在通过控制器保留的电子邮件字段的当前文本进行发送。 现在单击此按钮将触发BLoC执行验证逻辑。

The BLoC builder is going to rebuild every time a new state is yielded from the BLoC. Therefore it is first checking whether the state is busy, and if so it shows a progress indicator to the user to improve the feeling of responsiveness in the app as it dictates to the user that operations are taking place.

每当BLoC产生新状态时,BLoC构建器都会重建。 因此,首先要检查状态是否忙碌,如果是,则向用户显示进度指示器,以改善应用程序中响应性的感觉,因为它指示用户正在执行操作。

Image for post

If the state is not busy however, the builder will render the form as shown earlier with one big difference… now if there is a validation error in the state, the email field’s appearance will change! This field will instead render as red to indicate an issue and a handy function is used to evaluate what error text should show below the field using the enum that we created! This new text field can easily be abstracted into its own reusable widget too.

但是,如果状态不忙,则构建器将呈现之前显示的表单,但有很大的不同……现在,如果状态中存在验证错误,则电子邮件字段的外观将发生变化! 该字段将改为显示为红色,以指示问题,并且使用方便的函数使用我们创建的枚举来评估应在字段下方显示哪些错误文本! 这个新的文本字段也可以轻松地抽象成它自己的可重用窗口小部件。

Image for post
Image for post

Lastly, the BLoC listener’s purpose here is to simply listen for whether the state indicates that there has been a submission success and to raise an alert dialog to the user to tell them that they have submitted a valid email!

最后,BLoC侦听器的目的是简单地侦听状态是否表明提交成功,并向用户发出警报对话框,告诉他们他们已经提交了有效的电子邮件!

Image for post

… and that’s it! We now have field validation in our app using the BLoC pattern!

…就是这样! 现在,我们使用BLoC模式在我们的应用程序中进行了字段验证!

演示地址

If you’ve enjoyed this article, I have also published another on utilising the repository pattern effectively in Flutter.

如果您喜欢这篇文章,我还将发表另一篇有关在Flutter中有效利用存储库模式的文章。

The repo for this solution can be found at: https://github.com/luketg8 Validation_Example

可以在以下位置找到该解决方案的存储库: https : //github.com/luketg8 Validation_Example

https://www.linkedin.com/in/luketg8/

https://www.linkedin.com/in/luketg8/

翻译自: https://levelup.gitconnected.com/flutter-field-validation-using-bloc-pattern-19188076721d

颤振稳定性叶瓣图


http://www.taodudu.cc/news/show-8479341.html

相关文章:

  • 机械工程学报-封面研究-基于自适应变分模态分解与功率谱熵差的机器人铣削加工颤振类型辨识
  • 颤振稳定性叶瓣图_在屏幕之间导航—颤振
  • 使用人工智能自动测试颤振应用程序
  • 颤振稳定性叶瓣图_颤振异步redux graphql
  • matlab动力学共振颤振研究
  • 颤振稳定性叶瓣图_颤振主题系统
  • 颤振稳定性叶瓣图_颤振性能优化
  • 双路颤振频率Hz可设置比例阀放大器
  • 深度聚类paper汇总
  • paperwithcode
  • AAAI2021 accepted paper list
  • 使用Tex 撰写paper-TexStudio设置默认字体样式大小等
  • Raphael学习之Paper常用API(四)
  • 如何写paper
  • Paper:txyz_ai(一款帮助科研人员阅读PDF论文ChatGPT利器)的简介、安装、使用方法之详细攻略
  • 抑郁症康复日记
  • 计算机抑郁症与干涉相关的,抑郁症
  • matlab 自带的数据集fisheriris
  • 【文末福利】为什么我们要掌握Linux系统编程?
  • 什么是TCP的混合型自时钟
  • 炮打洋鬼子创作总结
  • oracle 过滤字段中的中文,不再洋不洋土不土
  • field list什么意思_闲话Python之range()到底是个什么玩意儿
  • AI全栈大模型工程师(二十二)什么是模型训练
  • 什么是mysql锁_简单理解MySQL锁
  • 什么是MAS : 一种目标管理工具和方法
  • 什么是接口API
  • python函数一般不能_Python程序中对一个函数的调用不能出现在该函数的定义之前...
  • 打字练习软件 Type Fu mac中文版技能介绍
  • 打字练习(Python代码模拟打字练习软件效果)
  • 这篇关于颤振稳定性叶瓣图_使用块阵模式进行颤振场验证的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



    http://www.chinasem.cn/article/769268

    相关文章

    Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式

    《Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式》本文详细介绍如何使用Java通过JDBC连接MySQL数据库,包括下载驱动、配置Eclipse环境、检测数据库连接等关键步骤,... 目录一、下载驱动包二、放jar包三、检测数据库连接JavaJava 如何使用 JDBC 连接 mys

    SpringBoot线程池配置使用示例详解

    《SpringBoot线程池配置使用示例详解》SpringBoot集成@Async注解,支持线程池参数配置(核心数、队列容量、拒绝策略等)及生命周期管理,结合监控与任务装饰器,提升异步处理效率与系统... 目录一、核心特性二、添加依赖三、参数详解四、配置线程池五、应用实践代码说明拒绝策略(Rejected

    C++ Log4cpp跨平台日志库的使用小结

    《C++Log4cpp跨平台日志库的使用小结》Log4cpp是c++类库,本文详细介绍了C++日志库log4cpp的使用方法,及设置日志输出格式和优先级,具有一定的参考价值,感兴趣的可以了解一下... 目录一、介绍1. log4cpp的日志方式2.设置日志输出的格式3. 设置日志的输出优先级二、Window

    Ubuntu如何分配​​未使用的空间

    《Ubuntu如何分配​​未使用的空间》Ubuntu磁盘空间不足,实际未分配空间8.2G因LVM卷组名称格式差异(双破折号误写)导致无法扩展,确认正确卷组名后,使用lvextend和resize2fs... 目录1:原因2:操作3:报错5:解决问题:确认卷组名称​6:再次操作7:验证扩展是否成功8:问题已解

    Qt使用QSqlDatabase连接MySQL实现增删改查功能

    《Qt使用QSqlDatabase连接MySQL实现增删改查功能》这篇文章主要为大家详细介绍了Qt如何使用QSqlDatabase连接MySQL实现增删改查功能,文中的示例代码讲解详细,感兴趣的小伙伴... 目录一、创建数据表二、连接mysql数据库三、封装成一个完整的轻量级 ORM 风格类3.1 表结构

    使用Docker构建Python Flask程序的详细教程

    《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

    Python使用vllm处理多模态数据的预处理技巧

    《Python使用vllm处理多模态数据的预处理技巧》本文深入探讨了在Python环境下使用vLLM处理多模态数据的预处理技巧,我们将从基础概念出发,详细讲解文本、图像、音频等多模态数据的预处理方法,... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

    Python使用pip工具实现包自动更新的多种方法

    《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

    Conda与Python venv虚拟环境的区别与使用方法详解

    《Conda与Pythonvenv虚拟环境的区别与使用方法详解》随着Python社区的成长,虚拟环境的概念和技术也在不断发展,:本文主要介绍Conda与Pythonvenv虚拟环境的区别与使用... 目录前言一、Conda 与 python venv 的核心区别1. Conda 的特点2. Python v

    Spring Boot中WebSocket常用使用方法详解

    《SpringBoot中WebSocket常用使用方法详解》本文从WebSocket的基础概念出发,详细介绍了SpringBoot集成WebSocket的步骤,并重点讲解了常用的使用方法,包括简单消... 目录一、WebSocket基础概念1.1 什么是WebSocket1.2 WebSocket与HTTP