Flutter中间镂空的二维码扫描控件

 1、UI效果图:





2、中间镂空UI:

class CenterTransparentMask extends CustomClipper<Path> {final double? width;CenterTransparentMask({this.width});@overridePath getClip(Size size) {final path = Path()..addRect(Rect.fromLTWH(0, 0, size.width,size.height + MediaQuery.of(Get.context!).padding.bottom))..addRect(Rect.fromLTWH((size.width - (width ?? 200)) / 2,(size.height +MediaQuery.of(Get.context!).padding.bottom -(width ?? 200)) /2,width ?? 200,width ?? 200));return path..fillType = PathFillType.evenOdd; }@overridebool shouldReclip(CustomClipper<Path> oldClipper) {return false;}
}
3、扫码UI:
class ScanWidget extends StatefulWidget {const ScanWidget({super.key});@overrideState<ScanWidget> createState() => _ScanWidgetState();
}class _ScanWidgetState extends State<ScanWidget> with TickerProviderStateMixin {late Animation<double> animation;late AnimationController _controller;@overridevoid initState() {super.initState();initAnima();}void initAnima() {_controller = AnimationController(duration: const Duration(seconds: 4),vsync: this,);animation = Tween(begin: -100.0, end: 100.0).animate(_controller)..addListener(() {if (mounted) setState(() => {});});_controller.repeat();}@overridevoid dispose() {_controller.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return Stack(alignment: Alignment.center,children: [_scanBorder(),_scanCenter(context),Transform.translate(offset: Offset(0, animation.value),child: _scanLine(),),],);}Widget _scanCenter(BuildContext context) {return ClipPath(clipper: CenterTransparentMask(), child: BackdropFilter(filter: ImageFilter.blur(sigmaX: 2, sigmaY: 2),child: Container(color: Colors.black.withOpacity(0.5),width: SystemUtil().getScreenWidth(context),height: SystemUtil().getScreenHeight(context),),),);}Widget _scanBorder() {return Image.asset(ImageUtils.getImgPath("img_border", "scan"),width: 200,height: 200,);}Widget _scanLine() {return Image.asset(ImageUtils.getImgPath("image_line", "scan"),width: 200,height: 6,);}
}

3、图片加载工具类:

class ImageUtils {static String getImgPath(String name, String moduleName,{String format = "png"}) {return "assets/images/$moduleName/$name.$format";}
}

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

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

相关文章

Navicat Premium 16 for Mac/Win:数据库管理的全能之选

在数字化时代&#xff0c;数据库管理已成为各行各业不可或缺的一环。而Navicat Premium 16作为一款功能强大的数据库管理软件&#xff0c;无疑为数据库管理员和开发者提供了高效、便捷的解决方案。 Navicat Premium 16支持多种主流数据库系统&#xff0c;无论是MySQL、Postgre…

MyBatis批量插入的五种方式

MyBatis批量插入的五种方式: 一、准备工作 1、导入pom.xml依赖 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- MySQL驱动依赖 --…

R:普通分组柱状图

输入文件实例&#xff08;存为csv格式&#xff09; library(ggplot2) library(ggbreak)# 从CSV文件中读取数据 setwd("C:/Users/fordata/Desktop/研究生/第二个想法(16s肠型&#xff0b;宏基因组功能)/第二篇病毒组/result/otherDB") data <- read.csv("feta…

UI自动化测试案例

备注:本文为博主原创文章,未经博主允许禁止转载。如有问题,欢迎指正。 个人笔记(整理不易,有帮助,收藏+点赞+评论,爱你们!!!你的支持是我写作的动力) 笔记目录:笔记本~笔记目录_airtest和selenium那个好用-CSDN博客 个人随笔:工作总结随笔_8、以前工作中都接触过哪…

工厂方法模式:解锁灵活的对象创建策略

在软件设计中&#xff0c;工厂方法模式是一种非常实用的创建型设计模式&#xff0c;它不仅提升了系统的灵活性&#xff0c;还简化了对象的创建过程。本文将详细探讨工厂方法模式的核心概念、实现方式、应用场景以及与其他设计模式的对比&#xff0c;旨在提供一份全面且实用的指…

K8s 命令行工具

文章目录 K8s 命令行工具kubectl 工具在任意节点使用kubectl方式创建对象命令显示和查找资源更新资源修补资源编辑资源Scale 资源删除资源查看pod信息节点相关操作 K8s 命令行工具 在搭建集群的时候&#xff0c;我们通过yum 下载了kubeadm kubelet kubectl 三个命令行工具&…

通过本机调试远端路由器非直连路由

实验目的&#xff1a;如图拓扑&#xff0c;通过本机电脑发&#xff0c;telnet调试远程AR4设备。 重点1&#xff1a;通过ospf路由协议配置拓扑网络&#xff0c;知识点&#xff1a;ospf配置路由器协议语法格式&#xff0c;area区域的定义&#xff0c;区域内网络的配置&#xff0…

量子信息产业生态研究(一):关于《量子技术公司营销指南(2023)》的讨论

写在前面。量子行业媒体量子内参&#xff08;Quantum Insider&#xff09;编制的《量子技术公司营销指南》是一本实用的英文手册&#xff0c;它旨在帮助量子科技公司建立有效的营销策略&#xff0c;同时了解如何将自己定位成各自的行业专家。本文对这篇指南的主要内容进行了翻译…

4. Django 探究FBV视图

4. 探究FBV视图 视图(Views)是Django的MTV架构模式的V部分, 主要负责处理用户请求和生成相应的响应内容, 然后在页面或其他类型文档中显示. 也可以理解为视图是MVC架构里面的C部分(控制器), 主要处理功能和业务上的逻辑. 我们习惯使用视图函数处理HTTP请求, 即在视图里定义def…

react17+antd4 动态渲染导航菜单中的icon

在路由信息对照表中的icon可以有两种形式&#xff1a;一种是组件形式&#xff0c;一种是字符串形式的。 在antd4的Menu.Item和SubMenu中的icon属性的格式为&#xff1a; 1.组件形式 这种方法在渲染时很方便&#xff0c;与antd中的Menu.Item中的icon属性的形式是一致的&#…

微信小程序全屏开屏广告

效果图 代码 <template><view><!-- 自定义头部 --><u-navbar title" " :bgColor"bgColor"><view class"u-nav-slot" slot"left"><view class"leftCon"><view class"countDown…

MySQL-进阶篇-一条sql更新语句是如何执行的(redo log和binlog)

上一篇&#xff1a;一条sql查询语句是如何执行的 http://t.csdnimg.cn/nV3EY 摘自&#xff1a;林晓斌MySQL实战45讲——第二篇 更新语句的执行过程与上一篇查询流程相同&#xff0c;本篇简写。 但多了两个重要的日志模块&#xff1a;redo log&#xff08;重做日志&#xff0…

初学ELK - elk部署

一、简介 ELK是3个开源软件组合&#xff0c;分别是 Elasticsearch &#xff0c;Logstash&#xff0c;Kibana Elasticsearch &#xff1a;是个开源分布式搜索引擎&#xff0c;提供搜集、分析、存储数据三大功能。它的特点有&#xff1a;分布式&#xff0c;零配置&#xff0c;自…

《黑马点评》Redis高并发项目实战笔记(上)P1~P45

P1 Redis企业实战课程介绍 P2 短信登录 导入黑马点评项目 首先在数据库连接下新建一个数据库hmdp&#xff0c;然后右键hmdp下的表&#xff0c;选择运行SQL文件&#xff0c;然后指定运行文件hmdp.sql即可&#xff08;建议MySQL的版本在5.7及以上&#xff09;&#xff1a; 下面这…

MySQL——查询数据的处理

一、并列 连接两个数据列的值&#xff0c;并进行输出的格式化处理&#xff08;显示为一种统一的格式&#xff09; concat( 列 1 格式化字 符 ) mysql> select concat(vend_name, vend_country) from vendors; --------------------------------- | concat(vend_name, ve…

C++使用类

运算符重载 C允许将运算符重载扩展到用户定义的类型&#xff0c;C将会根据操作数的数目和类型来决定使用哪种操作&#xff0c;运算符重载的格式如下: operatorop(argumet-list) 即由关键字operator&#xff0c;运算符op&#xff0c;()里的参数列表三部分组成&#xff0c;op必…

C++---vector容器

是STL容器中的一种常用的容器&#xff0c;由于其大小(size)可变&#xff0c;常用于数组大小不可知的情况下来替代数组。vector容器与数组十分相似&#xff0c;被称为动态数组。时间复杂度为O&#xff08;1&#xff09;。 数组数据通常存储在栈中&#xff0c;vector数据通常存储…

napi系列学习进阶篇——NAPI生命周期

什么是NAPI的生命周期 我们都知道&#xff0c;程序的生命周期是指程序从启动&#xff0c;运行到最后的结束的整个过程。生命周期的管理自然是指控制程序的启动&#xff0c;调用以及结束的方法。 而NAPI中的生命周期又是怎样的呢&#xff1f;如下图所示&#xff1a; 从图上我们…

16、普通数组-除自身以外的数组乘积

思路 通过辅助数组的方式 第一个从左向右的辅助数组乘积第二次从右向左的辅助数组乘积对于0<i<N-1 他的数组乘积就是左边的数组乘积*右边数组乘积然后再分类讨论i0 就是右边1-N-1的数组乘积iN-1就是左边从N-2到0的数组乘积 代码如下&#xff1a; class Solution {pub…

开发日志2024-04-12

开发日志2024/04/12 1、分店月业绩和年业绩都需要添加为真实数据 **开发思路&#xff1a;**分店下所属的技师的业绩总和 代码实现&#xff1a; 前端 无 后端 //TODO 将技师多对应的积分累加到他所属的分店的月/年累计业绩销量中//TODO 查询技师所对应的分店地址String f…