Flutter笔记:Widgets Easier组件库(10)快速处理承若型对话

Flutter笔记
使用Widgets Easier组件库快速处理承若型对话

- 文章信息 - Author: 李俊才 (jcLee95)
Visit me at CSDN: https://jclee95.blog.csdn.net
My WebSitehttp://thispage.tech/
Email: 291148484@163.com.
Shenzhen China
Address of this article:https://blog.csdn.net/qq_28550263/article/details/138342874
HuaWei:https://bbs.huaweicloud.com/blogs/426781

组件库地址

  • Pub.Dev:https://pub.dev/packages/widgets_easier
  • GitHub:https://github.com/jacklee1995/widgets_easier
  • 国内访问(更新延迟):https://pub-web.flutter-io.cn/packages/widgets_easier

【介绍】:使用Widgets Easier组件库快速处理承若型弹窗。

flutter-ljc


上一节:《 Widgets Easier组件库(9)使用弹窗 | 下一节:《 Widgets Easier组件库(11)使用卡片


1. 概述

1.1 关于Widgets Easier

本库是一个 Flutter 组件库,旨在提供用于Flutter开发的组件,使得开发者能够更简单地构建出更丰富地界面效果。项目地址为:

  • https://github.com/jacklee1995/widgets_easier

  • https://pub.dev/packages/widgets_easier

1.2 模块安装

在你的Flutter项目中,运行下面的命令:

flutter pub add widgets_easier

即可安装最新版本的 Widgets Easier 库。

2. 什么是承若型对话

2.1 基本概念

承若型对话是一套带有异步性质的弹窗机制。这种弹窗机制能够广泛运用于处理登录验证等具有未来性质。

一个 Future 对象在其生命周期中有两种状态:

  1. 未完成(Uncompleted):

当 Future 被创建时,它处于未完成状态。这意味着异步操作尚未完成,结果还不可用。

  1. 完成(Completed):

异步操作完成后,Future 进入完成状态。这个状态有两种可能的结果:

  • 成功(Fulfilled): 异步操作成功完成,Future 获得了一个值。

  • 失败(Rejected): 异步操作因错误而未能成功完成,Future 获得了一个错误。

与之对应的,在承若型对话中注重的时过程,也即是更关注 UncompletedCompleted 的过度状态和状态结果。这就是说,在一组承若型对话中至少有三个对话单元(Dialog),分别是

  1. 加载中;
  2. 加载完成;
    1. 加载成功
    2. 加载失败

3. 案例:用户登录

以用户登录为例,承若型对话可以被设计为以下三个阶段的对话单元:

  1. 加载中(Loading):

当用户提交登录信息(如用户名和密码)后,应用会显示一个加载中的对话框或提示。这个阶段对应于 Future 的 未完成(Uncompleted) 状态,表示登录的异步操作正在进行中,结果尚未确定。

  1. 加载完成(Completion):

这个阶段对应于 Future 的 完成(Completed) 状态,根据操作的结果,可以进一步分为两个子阶段:

  1. 加载成功(Success):

如果登录验证成功,应用会显示一个成功的提示对话框或者直接跳转到应用的主界面。这表示异步操作成功完成,用户被成功验证。

  1. 加载失败(Failure):

如果登录失败(例如,因为提供了错误的凭证或服务器无响应),应用会显示一个错误提示对话框。这个对话框通常会提供错误信息,并可能允许用户重试或进行其他恢复操作。

这种承若型对话机制不仅提高了用户体验,通过明确显示每个阶段的状态,还帮助用户理解应用的当前状态和可能的下一步操作。例如,在登录过程中:

用户输入凭证并点击“登录”按钮。

系统立即响应,显示一个模态加载中对话框,通知用户“正在验证,请稍候…”。

根据异步验证结果,加载中对话框会被替换为:

成功对话框,显示“登录成功!欢迎回来。”然后可能会自动关闭对话框并导航到主界面。

失败对话框,显示“登录失败,请检查您的用户名和密码后重试。”并提供重试或找回密码的选项。

通过这种方式,承若型对话为异步操作提供了清晰和直观的用户反馈,增强了交互的连贯性和用户的信任感。

4. 使用Widgets Easier库实现

使用 Widgets Easier库实现一个承若型对话单元特别简单你只需要准备好你的验证UI和校验函数,对话的事情可以完全交给 Widgets Easier库来实现。

4.1 使用FutureDialogs类

FutureDialogs 类用于处理承若型弹窗,通过静态方法 FutureDialogs.show 调用弹窗。

FutureDialogs.show 方法需要配置一个异步函数futureCallback和两个 Dialog 模板,一个是 SuccessDialog、另外一个是FailureDialog,如果有需要也可以指定第三个Dialog模板 LoadingDialog。其中:

  • 异步函数futureCallback表示一个具有两个结果的未来事件,它可能成功或者失败;
    • futureCallback的结果遵循一定规范,返回结果的类型为Future<Map<String, dynamic>>
    • 这个Map中,包含statusdata两个字段;
    • status的类型为bool,表示成功或者失败;
    • data表示是一个字符串,表示成功或者失败时相关消息。
  • futureCallback还未实现(fulfill)的过程中,展示的是 LoadingDialog
  • 如果futureCallback实现(fulfill)后的而己过为成功,则展示 SuccessDialog
  • 反之则展示FailureDialog

4.2 构建一个SuccessDialog

现在我们构建一个

import 'package:flutter/material.dart';import 'package:gap/gap.dart';class SuccessDialog extends StatelessWidget {final String data;const SuccessDialog(this.data, {super.key,});Widget build(BuildContext context) {return Align(alignment: Alignment.center,child: Material(color: Colors.transparent,child: Container(width: 200,height: 200,margin: const EdgeInsets.all(26),padding: const EdgeInsets.all(26),decoration: BoxDecoration(color: Colors.black.withOpacity(0.6),borderRadius: BorderRadius.circular(16),),child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [const Icon(Icons.check,color: Colors.green,size: 60,),const Gap(20),Text(data, style: const TextStyle(color: Colors.white)),],),),),);}
}

4.3 构建一个FailureDialog

import 'package:flutter/material.dart';
import 'package:gap/gap.dart';class FailureDialog extends StatelessWidget {final String data;const FailureDialog(this.data, {super.key,});Widget build(BuildContext context) {return Align(alignment: Alignment.center,child: Material(color: Colors.transparent,child: Container(width: 230,height: 200,margin: const EdgeInsets.all(16),padding: const EdgeInsets.all(16),decoration: BoxDecoration(color: Colors.black.withOpacity(0.6),borderRadius: BorderRadius.circular(16),),child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [const Icon(Icons.close,color: Colors.red,size: 60,),const Gap(20),Text(data,style: const TextStyle(color: Colors.white,fontSize: 18,fontWeight: FontWeight.bold,)),],),),),);}
}

4.4 登录页面

import 'package:example/login/dialogs/failure_dialog.dart';
import 'package:flutter/material.dart';
import 'package:widgets_easier/widgets_easier.dart';import 'dialogs/success_dialog.dart';
import 'login_controller.dart';class LoginPage extends StatefulWidget {const LoginPage({super.key});State<LoginPage> createState() => _LoginPageState();
}class _LoginPageState extends State<LoginPage> {final TextEditingController usernameController = TextEditingController();final TextEditingController passwordController = TextEditingController();final LoginController loginManager = LoginController();void handleLogin(BuildContext context) {// 从文本控制器获取用户名和密码final String username = usernameController.text;final String password = passwordController.text;// 显示一个异步操作的对话框,这个对话框将在 simulateLogin 方法的 Future 完成后关闭FutureDialogs.show<String>(context: context,futureCallback: () => loginManager.simulateLogin(username, password),buildSuccessDialog: (data) {return SuccessDialog(data);},buildFailureDialog: (data) {return FailureDialog(data);},).then((result) {// 检查从 simulateLogin 返回的结果if (result != null && result['status'] == true) {// 如果登录成功,导航到主页Navigator.pushReplacementNamed(context, '/login-success');}});}Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('FutureDialogs 示例')),body: Padding(padding: const EdgeInsets.all(20),child: Column(children: [TextField(controller: usernameController,decoration: const InputDecoration(labelText: '输入你的账号',border: OutlineInputBorder(),prefixIcon: Icon(Icons.account_circle),),),const SizedBox(height: 10),TextField(controller: passwordController,decoration: const InputDecoration(labelText: '输入你的密码',border: OutlineInputBorder(),prefixIcon: Icon(Icons.lock),),obscureText: true,),const SizedBox(height: 20),SemanticButton(text: '登录',type: SemanticEnum.primary,onTap: () => handleLogin(context),radius: 40,isOutlined: true,)],),),);}
}

其中:

FutureDialogs.show<String>(context: context,futureCallback: () => loginManager.simulateLogin(username, password),buildSuccessDialog: (data) {return SuccessDialog(data);},buildFailureDialog: (data) {return FailureDialog(data);},).then((result) {// 检查从 simulateLogin 返回的结果if (result != null && result['status'] == true) {// 如果登录成功,导航到主页Navigator.pushReplacementNamed(context, '/login-success');}});

可以我们在完成完成之后还可以链式执行一些操作。这种设计非常有必要,以此例子为例,在登录成功之后我们跳转到了登录成功页面。其中这里then的参数result也是futureCallback返回的值。另一方面,如果有需要也可以在这里继续下一个弹窗。

4.5 异步函数

import 'dart:async';class LoginController {Future<Map<String, dynamic>> simulateLogin(String username,String password,) async {// 一般对于空密码等情况可以在客户端验证,以减少API请求if (username.isEmpty || password.isEmpty) {return {'status': false,'data': '账户名或密码不能为空',};}// 模拟请求API返回结果,有可能成功也有可能失败else if (username == 'jclee95' && password == '123456') {await Future.delayed(const Duration(seconds: 1));return {'status': true, 'data': '登录成功'};} else {await Future.delayed(const Duration(seconds: 1));return {'status': false, 'data': '账户名或密码错误'};}}
}

在这段代码中,simulateLogin是一个模拟异步登录的函数。
如果登录成功,则返回:

{'status': true, 'data': '登录成功'}

如果登录失败则返回:

{'status': false, 'data': '账户名或密码错误'}

4.6 登录成功页面

import 'package:flutter/material.dart';class LoginSuccessView extends StatelessWidget {const LoginSuccessView({super.key});Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('登录成功'),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[const Icon(Icons.check_circle_outline,size: 100,color: Colors.green,),const Padding(padding: EdgeInsets.all(8.0),child: Text('您已成功登录!',style: TextStyle(fontSize: 24,fontWeight: FontWeight.bold,color: Colors.black,),),),ElevatedButton(onPressed: () {Navigator.pushReplacementNamed(context, '/home');},child: const Text('回到主页'),),],),),);}
}

4.7 效果展示

用户名密码为空:
在这里插入图片描述

输入错误的密码:

在这里插入图片描述
密码认证成功

在这里插入图片描述

5. 弹窗动画

5.1 FutureDialogs.zoomIn方法

在之前的内容中,我介绍了FutureDialogs.show的基本用法,这个方法没有动进入画效果。另外有一个 FutureDialogs.zoomIn方法拥有完全一样的接口,但是拥有从小到大的动画效果,看起来就像这样:

在这里插入图片描述

5.2 自定义动画

如果有需要,你可以使用 FutureDialogs.showFutureDialog 静态方法自定义动画。该方法有一个transitionBuilder参数接受一个RouteTransitionsBuilder,可以用于指定动画。例如之前弹窗部分代码修改为:

FutureDialogs.showFutureDialog(context: context,transitionBuilder: (context, animation, secondaryAnimation, child) {return AnimateStyles.rollIn(animation, child);},futureCallback: () => loginManager.simulateLogin(username, password),buildSuccessDialog: (data) {return SuccessDialog(data);},buildFailureDialog: (data) {return FailureDialog(data);},
).then((result) {// 检查从 simulateLogin 返回的结果if (result != null && result['status'] == true) {// 如果登录成功,导航到主页Navigator.pushReplacementNamed(context, '/login-success');}
});

注:这里使用的AnimateStyles.rollIn动画需要单独安装:

flutter pub add flutter_easy_animations

效果看起来是这样的:

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/6297.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

小程序账号设置以及request请求的封装

一般开发在小程序时&#xff0c;都会有测试版和正式版&#xff0c;这样在开发时会比较方便。 在开发时。产品经理都会给到测试账号和正式账号&#xff0c;后端给的接口也都会有测试环境用到的接口和正式环境用到的接口。 这里讲一讲我这边如何去做的。 1.在更目录随便命名一…

一机游领航旅游智慧化浪潮:借助前沿智能设备,革新旅游服务效率,构建高效便捷、生态友好的旅游服务新纪元,开启智慧旅游新时代

目录 一、引言 二、一机游的定义与特点 &#xff08;一&#xff09;一机游的定义 &#xff08;二&#xff09;一机游的特点 三、智能设备在旅游服务中的应用 &#xff08;一&#xff09;旅游前的信息查询与预订支付 &#xff08;二&#xff09;旅游中的导航导览与互动体…

MATLAB中功率谱密度计算pwelch函数使用详解

MATLAB中功率谱密度计算pwelch函数使用详解 目录 前言 一、pwelch函数简介 二、pwelch函数参数说明 三、pxx pwelch(x)示例 四、[pxx,f]pwelch(x,window,noverlap,nfft,fs)示例 四、[pxx,f] pwelch(x,window,noverlap,nfft,fs,freqrange,spectrumtype)示例 五、多通道功…

Springboot(SSM)项目实现数据脱敏

目录 一、引入hutool的依赖 二、sql脚本 三、自定义注解代码 3.1 自定义注解 3.2 自定义一个枚举,用于定义脱敏的类型 3.3 序列化 四、使用脱敏注解 4.1 Person.java 4.2 controller 4.3 dao 五、源代码参考 一、引入hutool的依赖 <dependency><groupId>…

Linux下Zip命令无法压缩软链接指向的实际文件的解决方案

Linux下Zip命令无法压缩软链接指向的实际文件的解决方案 一、前言 最近在作横向课题&#xff0c;在进行RKNN1808的目标检测C推理环境部署时&#xff0c;遇到了视频和图像的处理问题。出现这些问题&#xff0c;最好是找谁呢&#xff1f;找OpenCV。 但是本身开发板是个空架子&a…

FIFO Generate IP核使用——Native读写接口信号详解

Native FIFO接口信号是用于FIFO IP核与外部电路进行通信的信号。当FIFO支持独立的写和读时钟时&#xff0c;这些信号可以包括标准端口和可选端口。 1 当FIFO具有独立时钟时的接口信号 当FIFO具有独立的时钟时&#xff0c;其接口信号会相应地有所变化。特别是关于复位信号rst…

计算机等级考试2级(Python)知识点整理

计算机等级考试2级&#xff08;Python&#xff09;知识点整理 1.基础知识点&#xff08;记忆、理解&#xff09; 第1讲Python概述 01. 源代码 02. 目标代码 03. 编译和解释 04. 程序的基本编写方法 第2讲 Python语言基础&#xff08;一&#xff09; 01. 用缩进表示代码…

[数据结构]——非比较排序—计数排序

该篇文章 所涉及代码收录仓库&#xff1a;登录 - Gitee.com 目录 1.非比较排序——计数排序 2.最终实现 1.解析 2.以int a[] { 1,3,9,1,5,1,2,3,-5,-5,-2 };为例&#xff0c;手撕分析 3.代码实现 4.计数排序具有以下主要特性&#xff1a; 1.非比较排序——计数排序 思想…

Linux IP Forwarding路由转发实验

linux 路由转发功能 Linux 操作系统具备路由转发功能&#xff0c;路由功能是指 Linux 操作系统提供的路由管理和转发功能&#xff0c;它允许 Linux 主机在网络中正确地转发数据包&#xff0c;并确保数据包能够达到其目的地。 出于安全考虑&#xff0c;Linux系统默认是禁止数据…

ICode国际青少年编程竞赛- Python-1级训练场-for循环入门

ICode国际青少年编程竞赛- Python-1级训练场-for循环入门 1、 for i in range(4):Dev.step(4)Dev.turnLeft()2、 for i in range(3):Dev.step(6)Dev.turnRight()3、 for i in range(3):Dev.turnRight()Dev.step(2)Dev.turnLeft()Dev.step(-3)4、 for i in range(4):Dev…

附录E:董事会

< 回到目录 附录E&#xff1a;董事会 当董事会和CEO配合默契时&#xff0c;董事会成员扮演着CEO副手的角色。董事会还对CEO进行监督&#xff0c;如果CEO出现失职的情况&#xff0c;董事会将解雇他&#xff0c;并另请高明。这是董事会的职责所在。很遗憾&#xff0c;大多数董…

谷神前端组件增强:二级列表

createGuthonOptBtnsElement /** * 根据提供的row、options为子列表创建并返回谷神操作按钮元素。 * * param {object} row - agGrid单元格渲染函数参数。* param {array} options - 谷神操作按钮配置项数组。* returns {Element} - 返回创建的DOM元素。 */ function cr…

数字旅游以科技创新为核心竞争力:推动旅游服务的智能化、高效化,满足游客日益增长的旅游需求

一、引言 随着科技的飞速发展&#xff0c;数字旅游作为旅游业与信息技术结合的产物&#xff0c;正以其独特的魅力改变着传统旅游业的格局。科技创新作为数字旅游的核心竞争力&#xff0c;不仅推动了旅游服务的智能化、高效化&#xff0c;更满足了游客日益增长的旅游需求。本文…

香港理工大学内地事务总监陆海天教授确认出席“边缘智能2024 - AI开发者峰会”并发表主题演讲

隨著AI技術的日新月異&#xff0c;我們正步入一個邊緣計算智能化與分布式AI相互融合的新紀元。這一變革不僅推動了分布式智能創新應用的飛速發展&#xff0c;還使得邊緣智能——這一結合邊緣計算和智能技術的新興領域&#xff0c;逐漸成為引領AI發展的重要力量。通過其分布式和…

clang:在 Win10 上编译 MIDI 音乐程序(二)

先从 Microsoft C Build Tools - Visual Studio 下载 1.73GB 安装 "Microsoft C Build Tools“ 访问 Swift.org - Download Swift 找到 Windows 10&#xff1a;x86_64 下载 swift-5.10-RELEASE-windows10.exe 大约490MB 建议安装在 D:\Swift\ &#xff0c;安装后大约占…

llmperf测试大模型API性能

llmperf测试大模型API性能 llmperf是一个用来评估LLM API性能的工具。 官方仓库地址&#xff1a;https://github.com/ray-project/llmperf 1. 安装准备 脚本依赖python3环境&#xff0c;测试前客户端安装python3&#xff0c;本文使用python版本为3.8。 # 创建一个python虚拟环境…

走进香港美食宛如走进香港电影

&#xff08;1&#xff09; 过去蔡澜有个节目&#xff0c;专门介绍香港美食&#xff0c;身边美女相伴、眼里美景相随。 过去离香港海关近&#xff0c;有时候散步都能走到那里&#xff0c;打车时车都不蹦字儿。那时候精神头儿真好&#xff0c;周六一早6点就起来拖着大箱子过关&a…

React 第十八章 Hook useImperativeHandle

React 的 useImperativeHandle 是一个自定义 Hook。该 Hook 一般配合 React.forwardRef 使用&#xff0c;主要用于在父组件中可以使用 ref 获取子组件暴露出来的属性和方法。 useImperativeHandle 接受两个参数&#xff1a;ref 和创建子组件属性和方法的函数。 function Chil…

人机协同中的分布式中心化态势感知

一、集中式和分布式 集中式和分布式是两种不同的系统结构和管理方式。集中式系统是指所有计算机资源和数据都集中在一个中心服务器或主机上&#xff0c;所有的计算和数据处理都由该中心服务器来完成。而分布式系统是指计算机资源和数据分布在不同的计算机节点上&#xff0c;通…

软件测试(实验五)——Jmeter的使用

目录 实验目的 一、使用JMeter演示取样器、监听器、配置元件、断言的使用&#xff1b; 1、取样器 2、监听器 3、配置元件的使用 ① 用户定义的变量 ②HTTP信息头管理器 ③HTTP请求默认值 ④CSV数据文件设置 4、断言 ①响应断言 ②JSON断言 ③断言持续时间 二、使用…