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;我…

Objective-C学习笔记(基本语法)4.6

1.#import是#Include的增强版&#xff0c;同一个文件无论包含多少次&#xff0c;import只会包含一次。 2.框架&#xff1a;c语言的函数库&#xff0c;基础为Foundation。 3.autoreleasepool:自动释放池。 4.NSLog&#xff1a;print的增强&#xff0c;①增强了输出调试相关信…

从 0 搭建公司Jenkins服务 Centos7

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

每日一题:C语言经典例题之数字字符加倍

题目描述 输入一个以回车结束的字符串&#xff0c;该字符串由数字和字母组成。请过滤掉所有非数字字符&#xff0c;然后将数字字符串转换成十进制整数后乘以2输出。 输入 输入一个以回车符结束的字符串&#xff0c;长度不超过100&#xff0c;由数字和字母组成。 输出 将转换后的…

掌握ChatGPT:写作论文不再是难题

ChatGPT无限次数:点击直达 html 掌握ChatGPT&#xff1a;写作论文不再是难题 引言 在如今信息爆炸的时代&#xff0c;写作一直是许多人头疼的问题&#xff0c;尤其是对于需要频繁撰写论文的学生和研究者。然而&#xff0c;随着人工智能技术的发展&#xff0c;ChatGPT的出现…

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

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

React state用法 异步总结

setState用法 基本使用 this.setState({message:message})函数式使用 this.setState((state,props)>{//可加入修改数据之前的一些数据处理逻辑return{message:"message"} })可加入修改数据之前的一些数据处理逻辑React会自动把state,props作为参数传递进来 异…

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;它会相对于其包含块的高度来确定自己的高度。如果包含块是…

Flutter 中 AutomaticKeepAliveClientMixin 的介绍及使用

在 Flutter 中&#xff0c;当你在一个页面中滑动列表或者进行其他一些操作时&#xff0c;如果你返回到该页面&#xff0c;可能会发现之前的状态已经丢失了。这在某些情况下可能是不可取的&#xff0c;特别是当你想要保留之前的状态&#xff0c;而不是每次都重新加载页面时。 为…

2024届数字IC秋招-华为机试-数字芯片-笔试真题和答案(一)(含2022年和2023年)

文章目录 前言1、已知a = 1b1;b = 3b001,那么{a,{2{b}}} = ( )2、在一个SOC中数据通路中,Master到Slaver 的单命令完成Latency是100Cycle,能支持的最大命令Outstanding是10,则完成10个命令访问的最小平均Latency大约是( )3、generate语句中的循环控制变量应该定义为( )类…

C#WPS导出EXCEL

1、首先安装金山WPS &#xff0c;然后在安装包中找到 etapi.dll 这个文件&#xff0c;导入到项目中&#xff0c;然后添加引用 在引用中出现EXCEL 就是已经将API导入到了程序中&#xff0c; 2、在命名空间中引用 using Excel; 3、开始编写导出程序&#xff0c;本例以datagridvi…

微信小程序压缩图片到200kb,递归设置压缩质量

一、背景 我们有个人脸识别门闸的功能&#xff0c;小程序上上传人脸照片&#xff0c;然后门闸识别人脸开门。图片大小要在在200kb&#xff0c;但是也不能压缩的太小&#xff0c;因为大小有可能识别不到或者要走很近才能识别。所以选择递归的方式实现图片的压缩。 二、代码实现…

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

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

实战自动化创建用户,并设置密码

一、主程序 #!/bin/bash# 创建用户并设置密码的函数 create_user() {local username$1local password$2if id "$username" &>/dev/null; thenecho "用户 $username 已经存在。"elseecho "正在创建用户 $username ..."useradd $usernamee…

【PostgreSQL内核学习(二十九)—— 执行器(ExecCreateTableAs)】

执行器&#xff08;ExecCreateTableAs&#xff09; ExecCreateTableAs 函数RangeVarGetCreationNamespace 函数RangeVar 结构体IntoClause 结构体 声明&#xff1a;本文的部分内容参考了他人的文章。在编写过程中&#xff0c;我们尊重他人的知识产权和学术成果&#xff0c;力求…