当前位置: 首页 > news >正文

flutter开发实战-BackdropFilter高斯模糊子Widget控件

flutter开发实战-BackdropFilter高斯模糊子Widget。

最近开发过程中遇到需要将控件进行模糊,比如iOS的effect的模糊效果。那在flutter中就需要用到了BackdropFilter

一、BackdropFilter

BackdropFilter属性定义

BackdropFilter({Key key,  ImageFilter filter,Widget child })

其中ImageFilter的filter是必须传的,child为子控件。

ImageFilter一下两种两种构造方法

  • 设置背景高斯模糊

//构造一个设置高斯模糊的ImageFilter,sigmaX,sigmaY用来控制

//模糊度,取值范围是0-10
ImageFilter.blur({double sigmaX: 0.0, double sigmaY: 0.0 })
  • 矩阵变换
ImageFilter.matrix(Float64List matrix4, { FilterQuality filterQuality: FilterQuality.low })

二、实现模糊效果的控件Widget

这里我们实现一个实现设置背景高斯模糊的Widget

import 'package:flutter/material.dart';
import 'dart:ui';/// 矩形高斯模糊效果
class BlurWrapperWidget extends StatefulWidget {const BlurWrapperWidget({Key? key,required this.child,required this.sigmaX,required this.sigmaY,required this.opacity,this.blurMargin,this.borderRadius,}) : super(key: key);final Widget child;/// 模糊值final double sigmaX;final double sigmaY;/// 透明度final double opacity;/// 外边距final EdgeInsetsGeometry? blurMargin;/// 圆角final BorderRadius? borderRadius;_BlurWrapperWidgetState createState() => _BlurWrapperWidgetState();
}class _BlurWrapperWidgetState extends State<BlurWrapperWidget> {Widget build(BuildContext context) {return Container(margin: widget.blurMargin != null? widget.blurMargin: EdgeInsets.only(bottom: 0.0),child: ClipRRect(borderRadius: widget.borderRadius == null? BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10)): widget.borderRadius,child: BackdropFilter(filter: ImageFilter.blur(sigmaX: this.widget.sigmaX != null ? this.widget.sigmaX : 10,sigmaY: this.widget.sigmaY != null ? this.widget.sigmaY : 10,),child: Container(color: Colors.white10,child: this.widget.opacity != null? Opacity(opacity: widget.opacity,child: this.widget.child,): this.widget.child,),),),);}
}

三、小结

flutter开发实战-BackdropFilter高斯模糊子Widget。
最近开发过程中遇到需要将控件进行模糊,比如iOS的effect的模糊效果。那在flutter中就需要用到了BackdropFilter。

学习记录,每天不停进步。

相关文章:

flutter开发实战-BackdropFilter高斯模糊子Widget控件

flutter开发实战-BackdropFilter高斯模糊子Widget。 最近开发过程中遇到需要将控件进行模糊&#xff0c;比如iOS的effect的模糊效果。那在flutter中就需要用到了BackdropFilter 一、BackdropFilter BackdropFilter属性定义 BackdropFilter({Key key, required ImageFilter …...

嵌入式面试刷题(day3)

文章目录 前言一、怎么判断两个float是否相同二、float数据可以移位吗三、数据接收和发送端大小端不一致怎么办四、怎么传输float类型数据1.使用联合进行传输2.使用字节流3.强制类型转换 总结 前言 本篇文章我们继续讲解嵌入式面试刷题&#xff0c;给大家继续分享嵌入式中的面…...

JVM源码剖析之Java命令行参数全解

最近&#xff0c;有一位网友询问关于Java命令行参数方面的问题&#xff0c;因为在Java中参数有很多种&#xff0c;有不少的读者一直没弄明白&#xff0c;所以特意写下此篇文章。 此篇文章分2大块&#xff0c;第一块是不同参数的解释&#xff0c;第2块就是JVM源码论证&#xff…...

抽象工厂模式-java实现

介绍 抽象工厂模式基于工厂方法模式引入了“产品族”的概念&#xff0c;即我们认为具体产品是固定的&#xff0c;具体产品存在等级之分&#xff0c;比如我们常说的手机&#xff0c;有“青春版”&#xff0c;“至尊版”&#xff0c;“至臻版”。一个产品有多个版本族。这时候&a…...

机器学习笔记 - 基于Python发现最佳计算机视觉模型的神经架构搜索技术NAS

一、简述 近年来,随着深度学习技术的兴起,计算机视觉领域取得了巨大进步。事实证明,卷积神经网络 (CNN) 在图像识别任务中异常强大,但针对特定问题设计最佳架构仍然是一项具有挑战性的任务。这就是神经架构搜索(NAS)发挥作用的地方。NAS 是一种尖端技术,可以自动发现高性…...

机器学习---自编码器

自编码器过程 输入一个图片&#xff0c;经过encoder变成一个向量&#xff0c;再通过decoder将这个向量反向生成输入的图片。 这里我们希望输入和输出越接近越好。这个过程我们称为重建。 特点&#xff1a;不需要任何的标注资料。 在2006年这个思想就被提出来了&#xff1a; …...

vuejs 设计与实现 - 渲染器的设计

渲染器与响应式系统的结合 本节&#xff0c;我们暂时将渲染器限定在 DOM 平台。既然渲染器用来渲染真实 DOM 元素&#xff0c;那么严格来说&#xff0c;下面的函数就是一个合格的渲染器: // 渲染器&#xff1a; function renderer(domString, container) {container.innerHTM…...

openCV 图像对象的创建和赋值

文章目录 一、赋值二、克隆三、拷贝四、初始化 一、赋值 赋值操作是将一个cv::Mat对象的数据复制到另一个对象中。赋值操作使用的是浅拷贝&#xff08;shallow copy&#xff09;&#xff0c;即两个对象共享相同的数据内存。这意味着对一个对象的修改会影响到另一个对象 cv::M…...

idea - 刷新 Git 分支数据 / 命令刷新 Git 分支数据

一、idea - 刷新 Git 分支数据 idea 找到 fetch 选项&#xff0c;重新获取分支数据 二、命令刷新 Git 分支数据 git fetch参考链接 1. 远程Gitlab新建的分支在IDEA里不显示...

线上电影购票选座H5小程序源码开发

搭建一个线上电影购票选座H5小程序源码需要一些基本的技术和步骤。以下是一个大致的搭建过程&#xff0c;可以参考&#xff1a; 1. 确定需求和功能&#xff1a;首先要明确你想要的电影购票选座H5小程序的需求和功能&#xff0c;例如用户登录注册、电影列表展示、选座购票、订单…...

QT正则校验

文章目录 前言一、Qt正则校验1.对输入框进行校验&#xff0c;不允许输入其他字符2.直接校验字符串 二、常用正则校验表达式 前言 项目中会经常遇到需要对字符串进行校验的情况&#xff0c;需要用到正则表达式&#xff08;Regular Expression&#xff0c;通常简写为RegExp、RE等…...

ChatGPT“侵入”校园,教学评价体制受冲击,需作出调整

北密歇根大学的教授奥曼在学生作业中发现了一篇关于世界宗教的“完美论文”。“这篇文章写得比大多数学生都要好......好到不符合我对学生的预期&#xff01;”他去问ChatGPT&#xff1a;“这是你写的吗&#xff1f;”ChatGPT回答&#xff1a;“99.9%的概率是的。” ChatGPT“侵…...

函数的声明和定义

1、函数声明 //告诉编译器有一个函数叫什么&#xff0c;参数是什么&#xff0c;返回类型是什么。但是具体是不是存在&#xff0c;函数声明决定不了。 //函数的声明一般出现在函数的使用之前。要满足先声明后使用。 //函数的声明一般要放在头文件中的。 2、函数的定义 //函数…...

06微服务间的通信方式

一句话导读 微服务设计的一个挑战就是服务间的通信问题&#xff0c;服务间通信理论上可以归结为进程间通信&#xff0c;进程可以是同一个机器上的&#xff0c;也可以是不同机器的。服务可以使用同步请求响应机制通信&#xff0c;也可以使用异步的基于消息中间件间的通信机制。同…...

研发工程师玩转Kubernetes——local型PV和PVC绑定过程中的状态变化

PV全称是PersistentVolume&#xff0c;即持久卷&#xff0c;是由管理员事先准备好的资源。它可以是本地磁盘&#xff0c;也可以是网络磁盘。 PVC全称是PersistentVolumeClaim&#xff0c;即持久卷申领。它表示卷的使用者&#xff0c;对PV的申请。即我们可以认为&#xff0c;PV是…...

HTTP——十一、Web的攻击技术

HTTP 一、针对Web的攻击技术1、HTTP 不具备必要的安全功能2、在客户端即可篡改请求3、针对Web应用的攻击模式 二、因输出值转义不完全引发的安全漏洞1、跨站脚本攻击2、SQL 注入攻击3、OS命令注入攻击4、HTTP首部注入攻击5、邮件首部注入攻击6、目录遍历攻击7、远程文件包含漏洞…...

Python-OpenCV中的图像处理-图像金字塔

Python-OpenCV中的图像处理-图像金字塔 图像金字塔高斯金字塔拉普拉斯金字塔 金字塔图像融合 图像金字塔 同一图像的不同分辨率的子图集合&#xff0c;如果把最大的图像放在底部&#xff0c;最小的放在顶部&#xff0c;看起来像一座金字塔&#xff0c;故而得名图像金字塔。cv2…...

ArcGIS、ENVI、InVEST、FRAGSTATS技术教程

专题一 空间数据获取与制图 1.1 软件安装与应用讲解 1.2 空间数据介绍 1.3海量空间数据下载 1.4 ArcGIS软件快速入门 1.5 Geodatabase地理数据库 专题二 ArcGIS专题地图制作 2.1专题地图制作规范 2.2 空间数据的准备与处理 2.3 空间数据可视化&#xff1a;地图符号与注…...

Unity-Linux部署WebGL项目MIME类型添加

在以往的文章中有提到过使用IIS部署WebGL添加MIME类型使WebGL项目在浏览器中能够正常加载&#xff0c;那么如果咱们做的是商业项目&#xff0c;往往是需要部署在学校或者云服务器上面的&#xff0c;大部分情况下如果项目有接口或者后台管理系统&#xff0c;后台基本都会使用Lin…...

MySQL:表的约束和基本查询

表的约束 表的约束——为了让插入的数据符合预期。 表的约束很多&#xff0c;这里主要介绍如下几个&#xff1a; null/not null,default, comment, zerofill&#xff0c;primary key&#xff0c;auto_increment&#xff0c;unique key 。 空属性 两个值&#xff1a;null&am…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

排序算法总结(C++)

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

淘宝扭蛋机小程序系统开发:打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发&#xff0c;旨在打造一个互动性强的购物平台&#xff0c;让用户在购物的同时&#xff0c;能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机&#xff0c;实现旋转、抽拉等动作&#xff0c;增…...

[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG

TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码&#xff1a;HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...

恶补电源:1.电桥

一、元器件的选择 搜索并选择电桥&#xff0c;再multisim中选择FWB&#xff0c;就有各种型号的电桥: 电桥是用来干嘛的呢&#xff1f; 它是一个由四个二极管搭成的“桥梁”形状的电路&#xff0c;用来把交流电&#xff08;AC&#xff09;变成直流电&#xff08;DC&#xff09;。…...

Linux 下 DMA 内存映射浅析

序 系统 I/O 设备驱动程序通常调用其特定子系统的接口为 DMA 分配内存&#xff0c;但最终会调到 DMA 子系统的dma_alloc_coherent()/dma_alloc_attrs() 等接口。 关于 dma_alloc_coherent 接口详细的代码讲解、调用流程&#xff0c;可以参考这篇文章&#xff0c;我觉得写的非常…...