Flutter InkWell组件去掉灰色遮罩
当InkerWell组件内部获取到焦点时,会展示一层灰色遮罩
将focusColor属性设置为透明即可
Flutter InkWell焦点效果源码分析
问题描述
当 InkWell 组件获得焦点时,会显示一层灰色遮罩效果。需要找出这个效果是由哪些组件控制的,以及具体的实现机制。
排查思路
1. 从InkWell组件入手
首先查看 InkWell 类的定义:
class InkWell extends InkResponse {const InkWell({Key? key,Widget? child,Color? focusColor,// ...更多属性})
发现:
- InkWell 继承自 InkResponse
- 有 focusColor 属性可以控制焦点颜色
2. 追踪InkResponse实现
在 InkResponse 中找到焦点相关的重要方法:
void handleFocusUpdate(bool hasFocus) {_hasFocus = hasFocus;statesController.update(MaterialState.focused, hasFocus);updateFocusHighlights();widget.onFocusChange?.call(hasFocus);
}
关键发现:
- 焦点状态变化时会调用 updateFocusHighlights()
- 使用 statesController 管理状态
3. 分析高亮实现
找到 updateHighlight 方法:
void updateHighlight(_HighlightType type, { required bool value }) {final InkHighlight? highlight = _highlights[type];if (value) {if (highlight == null) {_highlights[type] = InkHighlight(controller: Material.of(context)!,referenceBox: referenceBox,color: getHighlightColorForType(type),shape: widget.highlightShape,// ...);}}
}
重要发现:
- 使用 InkHighlight 类来实现高亮效果
- 高亮效果存储在 _highlights Map 中
- 通过 Material.of(context) 获取控制器
4. 追踪颜色获取逻辑
在 getHighlightColorForType 方法中:
Color getHighlightColorForType(_HighlightType type) {final ThemeData theme = Theme.of(context);switch (type) {case _HighlightType.focus:return widget.focusColor ?? theme.focusColor;// ...}
}
了解到:
- 焦点颜色优先使用 widget.focusColor
- 如果未指定则使用主题中的 focusColor
5. 分析Material实现
Material 组件的作用:
- 创建 _RenderInkFeatures 来管理 ink 效果
- 提供 MaterialInkController 接口
- 处理实际的绘制逻辑
class _RenderInkFeatures extends RenderProxyBox implements MaterialInkController {void addInkFeature(InkFeature feature) {_inkFeatures ??= <InkFeature>[];_inkFeatures!.add(feature);markNeedsPaint();}void paint(PaintingContext context, Offset offset) {if (_inkFeatures != null && _inkFeatures!.isNotEmpty) {final Canvas canvas = context.canvas;// 绘制所有ink特效for (final InkFeature inkFeature in _inkFeatures!) {inkFeature._paint(canvas);}}}
}
实现流程总结
-
触发焦点:
- Focus widget 检测到焦点变化
- 调用 handleFocusUpdate
-
创建高亮:
- updateFocusHighlights 判断是否需要显示焦点
- updateHighlight 创建 InkHighlight 实例
-
设置颜色:
- getHighlightColorForType 获取焦点颜色
- 优先使用 focusColor 属性,否则使用主题颜色
-
渲染过程:
- InkHighlight 被添加到 Material 的 _inkFeatures
- _RenderInkFeatures 在绘制时遍历所有特效
- 通过 Canvas API 实现最终的视觉效果
修改建议
如果需要自定义焦点效果,可以:
- 设置 InkWell 的 focusColor 属性
- 在 ThemeData 中配置全局 focusColor
- 使用 MaterialState 配置更复杂的状态样式
相关类和文件
- InkWell
- InkResponse
- InkHighlight
- Material
- MaterialInkController
- _RenderInkFeatures
参考
- Flutter SDK Material 源码
- Flutter 文档中的 InkWell 部分
相关文章:

Flutter InkWell组件去掉灰色遮罩
当InkerWell组件内部获取到焦点时,会展示一层灰色遮罩 将focusColor属性设置为透明即可 Flutter InkWell焦点效果源码分析 问题描述 当 InkWell 组件获得焦点时,会显示一层灰色遮罩效果。需要找出这个效果是由哪些组件控制的,以及具体的…...
Android——metaData
获取元数据信息的步骤: 调用 getPackageManager 方法获得当前应用的包管理器调用包管理器的 getActivityInfo 方法获得当前活动的信息对象活动信息对象的 metaData 是 Bundle 包裹类型,调用包裹对象的 getString 即可获得指定名称的参数值 配置 metaDa…...

SLAM|1. 相机投影及相机畸变
一个能思考的人,才真是一个力量无边的人。——巴尔扎克 本章主要内容: 1.针孔相机模型 2.相机成像的几个坐标系图像 3.畸变及相机标定 本节主要介绍在照相机拍摄过程中,现实物体如何跟照片上的像素关联起来,具体涉及相机成像的物…...
nginx配置及虚拟主机
nginx配置及虚拟主机 一、http协议介绍1、网站类型2、涉及的软件3、http协议介绍 二、nginx安装、启动1、nginx介绍2、nginx安装3、nginx启动管理 三、nginx配置文件1、配置文件语法结构2、全局配置3、事件驱动模型的配置4、http的配置 四、虚拟主机配置1、类型2、基于名称的虚…...

ElasticSearch - Bucket Script 使用指南
文章目录 官方文档Bucket Script 官文1. 什么是 ElasticSearch 中的 Bucket Script?2. 适用场景3. Bucket Script 的基本结构4. 关键参数详解5. 示例官方示例:计算每月 T 恤销售额占总销售额的比率百分比示例计算:点击率 (CTR) 6. 注意事项与…...
Android的SQLiteOpenHelper类 笔记241027
SQLiteOpenHelper SQLiteOpenHelper是Android开发中用于管理SQLite数据库的一个非常重要的工具类。以下是对SQLiteOpenHelper的详细介绍: 一、基本概念 SQLiteOpenHelper是一个抽象类,它主要用于管理数据库的创建和版本管理。通过继承这个类ÿ…...

「Mac畅玩鸿蒙与硬件10」鸿蒙开发环境配置篇10 - 项目实战:计数器应用
本篇将通过一个简单的计数器应用,带你体验鸿蒙开发环境的实际操作流程。本项目主要练习组件的使用、事件响应和状态管理,帮助开发者熟悉基本的应用构建流程。 关键词 计数器应用组件操作事件响应状态管理HarmonyOS 应用开发一、创建计数器项目 1.1 在 DevEco Studio 中新建项…...
安卓逆向之ARM汇编寻址,汇编指令
一:ARM汇编寻址 1. 立即数寻址 (Immediate Addressing) 指令中直接给出一个常数值(立即数),并对其进行操作。 MOV R0, #5 ; 将立即数5载入寄存器R02. 直接寻址 (Direct Addressing) 指令中给出的地址直接指定了内存中的一…...

Idea常见插件(超级实用)
文章目录 Idea好用的插件推荐Idea插件安装Chinese(中文版)Alibaba Java Coding Guidelines(代码规范)Auto Filling Java Arguments(自动补全参数)CamelCase(变量名称格式转换)CodeGeeX(智能&…...
C++中如何获取时间并格式化为字符串?
在C中,你可以使用标准库中的 <chrono> 和 <iomanip> 头文件来获取当前时间并将其格式化为字符串。以下是一个简单的示例,展示了如何获取当前时间并将其格式化为一个可读的字符串(例如:YYYY-MM-DD HH:MM:SS)…...

项目1 yolov5鱼苗检测计数
yolov5鱼苗检测 1. yolov5鱼苗检测1.1. 环境配置1.2 Predict1.3 Validate1.4 Train1.5 生成 ONNX 2 代码解析2.1 模型2.2 数据集2.3 损失函数2.4 训练2.5 预测 之前做的项目,再回顾一下 环境:GPU1卡,CPU4核,每显卡12GB,…...

GPU 学习笔记三:GPU多机多卡组网和拓扑结构分析(基于数据中心分析)
文章目录 一、概述二、数据中心(DC)2.1 数据中心简介2.2 传统数据中心的网络模型2.3 脊叶网络模型(Spine-Leaf)2.4 Facebook的Fabric网络架构 三、基于数据中心的多机多卡拓扑3.1 Spine-Leaf 架构网络规模测算方法3.2 NVIDIA多机多…...

各编程语言处理HTTP状态码的库推荐
Http 状态码用那个库 备注 Spring 的状态码库为 org.springframework.http.HttpStatus Apache 的状态码库为: org.apache.http.HttpStatus 通常这 2 个库都差不多。 如你的项目中已经用了 Spring 的代码的话,那么就用 Spring 的库吧。 不管是那个库…...
【Mac】Python 环境管理工具
一、pyenv 1、安装 (1)安装 brew install pyenv(2)环境配置 查看系统使用 shell 是 bash 还是 zsh bash 配置文件:~/.bash_profile zsh 配置文件:~/.zshrc userMac ~ % echo $SHELL /bin/zsh userMa…...

大语言模型数据流程源码解读(基于llama3模型)
文章目录 前言一、数据进入LlamaForCausalLM(LlamaPreTrainedModel)类二、数据进入LlamaModel(LlamaPreTrainedModel)类1、input_ids的embedding编码2、position_ids位置获取3、causal_mask因果mask构建1、causal_mask调用2、因果mask代码解读(_update_causal_mask)4、hidden_s…...
[蓝桥杯 2015 省 A] 饮料换购
题目描述 乐羊羊饮料厂正在举办一次促销优惠活动。乐羊羊 C 型饮料,凭 3 个瓶盖可以再换一瓶 C 型饮料,并且可以一直循环下去(但不允许暂借或赊账)。 请你计算一下,如果小明不浪费瓶盖,尽量地参加活动,那么ÿ…...

K8S测试pod内存和CPU资源不足
只设置requests参数 mysql主从pod启动后监控 读压测之后 同时设置limits和requests,只调低内存值 监控 压力测试 同时设置limits和requests,只调低CPU值 初始状态 开始压测 结论 对于CPU,如果pod中服务使用CPU超过设置的limits&…...

rabbitmq 使用注意事项
1,注意开启的端口号,一共四个端口号,1883是mqtt连接的端口号,如果没开,是连接不上的需要手动起mqtt插件。 //开始mqtt插件服务 rabbitmq-plugins enable rabbitmq_mqtt 2,15672端口是http网页登录的管理后…...

<项目代码>YOLOv8 夜间车辆识别<目标检测>
YOLOv8是一种单阶段(one-stage)检测算法,它将目标检测问题转化为一个回归问题,能够在一次前向传播过程中同时完成目标的分类和定位任务。相较于两阶段检测算法(如Faster R-CNN),YOLOv8具有更高的…...
xterm.js 库作用
前言:xterm.js 是一个用于在网页上模拟终端的强大 JavaScript 库。 一、在网页中实现终端模拟 1. 提供类似终端的界面 xterm.js可以在浏览器中创建一个看起来和行为都类似于传统终端的界面。这包括显示命令行提示符、接受用户输入、显示命令输出等。 例如&#…...
KubeSphere 容器平台高可用:环境搭建与可视化操作指南
Linux_k8s篇 欢迎来到Linux的世界,看笔记好好学多敲多打,每个人都是大神! 题目:KubeSphere 容器平台高可用:环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

相机从app启动流程
一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...
VTK如何让部分单位不可见
最近遇到一个需求,需要让一个vtkDataSet中的部分单元不可见,查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行,是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示,主要是最后一个参数,透明度…...
Matlab | matlab常用命令总结
常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程
本文较长,建议点赞收藏,以免遗失。更多AI大模型应用开发学习视频及资料,尽在聚客AI学院。 本文全面剖析RNN核心原理,深入讲解梯度消失/爆炸问题,并通过LSTM/GRU结构实现解决方案,提供时间序列预测和文本生成…...
【生成模型】视频生成论文调研
工作清单 上游应用方向:控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)
漏洞概览 漏洞名称:Apache Flink REST API 任意文件读取漏洞CVE编号:CVE-2020-17519CVSS评分:7.5影响版本:Apache Flink 1.11.0、1.11.1、1.11.2修复版本:≥ 1.11.3 或 ≥ 1.12.0漏洞类型:路径遍历&#x…...

推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材)
推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...
scikit-learn机器学习
# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...

WebRTC调研
WebRTC是什么,为什么,如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理 威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...