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.mzph.cn/news/806204.shtml

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

相关文章

cfDNAPro|cfDNA片段数据生物学表征及可视化的R包

文章目录 前言cfDNAProdemo1.片段长度可视化2.片段长度分布比较3.可视化DNA片段模态长度4.片段化振荡模式比较5. ggplot2美化 前言 cfDNA&#xff08;无细胞DNA&#xff0c;游离DNA&#xff0c;Circulating free DNA or Cell free DNA&#xff09;是指在血液循环中存在的DNA片…

Mac安装配置ElasticSearch和Kibana 8.13.2

系统环境&#xff1a;Mac M1 (MacOS Sonoma 14.3.1) 一、准备 从Elasticsearch&#xff1a;官方分布式搜索和分析引擎 | Elastic上下载ElasticSearch和Kibana 笔者下载的是 elasticsearch-8.13.2-darwin-aarch64.tar.gz kibana-8.13.2-darwin-aarch64.tar.gz 并放置到个人…

社交网络的分布式治理:分析Facebook在区块链社区中的角色

随着区块链技术的快速发展&#xff0c;社交网络的治理模式也逐渐受到关注。传统的社交网络往往由中心化的平台掌控&#xff0c;用户的权力和参与度受到限制&#xff0c;而区块链技术为社交网络的分布式治理提供了新的解决方案。本文将深入探讨社交网络的分布式治理&#xff0c;…

电脑突然读不到硬盘了怎么回事 电脑突然读不到硬盘了数据怎么办 固态硬盘恢复软件 easyrecovery免费下载

硬盘是操作系统数据的载体&#xff0c;数据由磁头从硬盘盘片上的磁道中读取出来&#xff0c;然后传递给硬盘上的缓存芯片&#xff0c;再由接口从缓存芯片中将数据发送到Ultra ATA通道&#xff0c;之后传到系统&#xff0c;这就是电脑读取硬盘数据的过程。本篇文章&#xff0c;我…

从 0 搭建公司Jenkins服务 Centos7

从 0 搭建公司Jenkins服务 Centos7 安装 (运维人员) 安装环境 配置DNS安装JDK17安装Jenkins安装Docker安装GIT安装Ansible启动Jenkins安装插件配置凭据配置共享库配置 (开发经理)使用 (开发、测试人员) 安装 (运维人员) 安装环境 配置DNS 新安装系统的服务器无法解析域名&a…

hal库实现串口通信——阻塞式 API

1STM32CobeMX设置 设置时钟源 rcc设置为外部时钟High Speed Clock (HSE)//设置为如图 再将其设置为72MHz 设置串口引脚为异步通信 设置波特率等 设置波特率范围提示点击波特率再点击图中的 我的设置 再打开中断 即可生成代码//省略项目设置 2代码设置 函数 HAL_UART_Trans…

docker使用canal

1. 准备MySql主库 1.1.在服务器新建文件夹 mysql/data&#xff0c;新建文件 mysql/conf.d/my.cnf 其中my.cnf 内容如下 [mysqld] log_timestampsSYSTEM default-time-zone8:00 server-id1 log-binmysql-bin binlog-do-db mall # 要监听的库 binlog_formatROW配置解读&#…

微服务-6 Gateway网关

一、网关搭建 此时浏览器访问 localhost:10010/user/list 后正常返回数据&#xff0c;说明网关已生效&#xff0c;其原理流程图如下&#xff1a; 二、网关过滤器 作用&#xff1a;处理一切进入网关的请求和微服务响应。 1. 网关过滤器的分类&#xff1a; a. 某个路由的过滤器 …

CSS实现三栏自适应布局(两边固定,中间自适应)

绝对定位的元素会脱离文档流&#xff0c;它们是相对于包含块&#xff08;通常是最近的具有相对定位、绝对定位或固定定位属性的父元素&#xff09;进行定位的。当你把一个绝对定位的元素的高度设置为100%时&#xff0c;它会相对于其包含块的高度来确定自己的高度。如果包含块是…

技术解析:应对国内大流量攻击的新挑战与分布式清洗防御策略

近日&#xff0c;国内网络环境中出现的大流量攻击事件频发&#xff0c;且攻击规模呈指数级增长&#xff0c;部分攻击流量甚至超过了1.5Tbps。 这背后的主要原因是攻击者利用海外流量资源&#xff0c;通过复杂的网络技术和协议转换&#xff0c;将国际IPv4/IPv6流量巧妙伪装并转…

python篇---图片转成视频

python篇—图片转成视频 import cv2 import os# 设置图片文件夹路径和视频输出路径 image_folder /workspace/11 video_name output_video.mp4# 获取图片文件夹中的所有图片文件名&#xff0c;并按顺序排序 images [img for img in os.listdir(image_folder) if img.endswi…

C++的引用和内联函数,auto

什么是引用 引用就是取别名 可以给一个变量取多个别名,也可以给别名取别名 别名与本名拥有同一地址,对任意别名修改,也会同时修改其他别名和本名 引用的作用 引用的作用与指针重叠度很高 图中函数的参数int& a,int& b,a是x的别名,b是y的别名 则ab的交换就是xy的交…

怎么快速围绕“人、货、场”做零售数据分析?

做零售数据分析多了&#xff0c;不难发现零售数据分析的关键就是“人、货、场”&#xff0c;那么怎么又快又灵活地分析这三个关键点&#xff1f;不妨参考下奥威BI零售数据分析方案。 奥威BI零售数据分析方案是一套吸取大量项目经验&#xff0c;结合零售企业数据分析共性需求打…

【Java8新特性】四、强大的Stream api

​ 这里写自定义目录标题 一、了解Stream二、流(stream)到底是什么&#xff1f;三、Stream操作的三个步骤四、创建Stream的四种方式五、Stream 的中间操作1、筛选和切片2、map 映射3、排序 六、Stream 的终止操作1、查找和匹配2、归约3、收集 一、了解Stream Stream是Java8中…

同旺科技 USB TO SPI / I2C 专业版 极限测试 ---- 读取数据

所需设备&#xff1a; 1、USB 转 SPI I2C 适配器&#xff1b;内附链接 备注&#xff1a;带EXCEL调试的只适用于专业版&#xff1b; 软件配置&#xff1a; 设置如下&#xff0c;读取65500个字节&#xff0c;单条指令&#xff0c;速率20Mhz; 数据&#xff1a; 时钟信号&#…

了解 Python 中 gc.collect() 命令

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 在 Python 中&#xff0c;gc.collect() 命令是用于手动触发垃圾回收机制&#xff0c;以回收无法访问的对象所占用的内存。Python 的垃圾回收机制主要基于引用计数&#xff0c;辅以 “标记-清除” 和 “…

echarts坐标轴、轴线、刻度、刻度标签

坐标轴 x、y轴 x 轴和 y 轴都由轴线、刻度、刻度标签、轴标题四个部分组成。部分图表中还会有网格线来帮助查看和计算数据 普通的二维数据坐标系都有x轴和y轴&#xff0c;通常情况下&#xff0c;x轴显示在图表底部&#xff0c;y轴显示在左侧&#xff0c;一般配置如下&#xf…

【数据结构】树与森林(树的存储结构、森林与二叉树的转化、树与森林的遍历)

目录 树和森林树的存储结构一、树的双亲表示法&#xff1a;二、树的孩子表示法方法一&#xff1a;定长结点的多重链表方法二&#xff1a;不定长结点的多重链表方法三&#xff1a;孩子单链表表示法 三、树的二叉链表(孩子-兄弟)存储表示法 森林与二叉树的转换树和森林的遍历先根…

uni-app实现分页--(1)准备工作,首页下拉触底加载更多

实现流程如下: 分析&#xff1a;需要在滚动容器中添加滚动触底&#xff0c;在猜你喜欢中获取数据。难点&#xff1a;如何在父页面调用子组件内的方法。父组件中用ref&#xff0c;并定义组件实例类型&#xff0c;子组件中暴露方法 具体代码如下&#xff1a; 1.在父组件中添加…

计算机视觉——基于深度学习UNet实现的复杂背景文档二值化算法实现与模型训练

1. 引言 阈值分割可以被视为一个分类问题&#xff0c;通常涉及两个类别&#xff0c;这也是为什么阈值分割也被称为二值化。对于文档图像&#xff0c;我们期望阈值算法能够正确地将墨水分类为黑色&#xff0c;将纸张分类为白色&#xff0c;从而得到二值化图像。对于数字灰度图像…