Flutter Widgets 之 InkWell 和 Ink
时间:2022-07-24
本文章向大家介绍Flutter Widgets 之 InkWell 和 Ink,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
老
孟
一个
有态度
的程序员
InkWell
InkWell组件在用户点击时出现“水波纹”效果,InkWell简单用法:
InkWell(
onTap: (){},
child: Text('这是InkWell点击效果'),
)
onTap是点击事件回调,如果不设置无法出现“水波纹”效果,效果如下:
设置水波纹颜色:
InkWell(
onTap: () {},
splashColor: Colors.red,
...
)
效果如下:
设置高亮颜色颜色:
InkWell(
onTap: () {},
highlightColor: Colors.blue,
...
)
高亮颜色是按住时显示的颜色,效果如下:
给字体添加边距和圆角边框,扩大“水波纹”效果:
InkWell(
onTap: (){},
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20,vertical: 8),
decoration: BoxDecoration(
border:Border.all(color: Colors.blue),
borderRadius: BorderRadius.all(Radius.circular(30))
),
child: Text('这是InkWell点击效果'),
),
)
效果如下:
发现“水波纹”超出的了圆角边框,如何解决这个问题呢?Ink隆重登场。
Ink
Ink的官方介绍:
A convenience widget for drawing images and other decorations on [Material] widgets, so that [InkWell] and [InkResponse] splashes will render over them.
简单翻译:Ink控件用于在[Material]控件上绘制图像和其他装饰,以便[InkWell]、[InkResponse]控件的“水波纹”效果在其上面显示。
上面的问题修改代码如下:
Ink(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Color(0xFFDE2F21), Color(0xFFEC592F)]),
borderRadius: BorderRadius.all(Radius.circular(20))),
child: InkWell(
borderRadius: BorderRadius.all(Radius.circular(20)),
child: Container(
padding: EdgeInsets.symmetric(vertical: 8, horizontal: 20),
child: Text(
'这是InkWell的点击效果',
style: TextStyle(color: Colors.white),
),
),
onTap: () {},
),
)
效果如下:
- 【Dev Club 分享】微信热补丁 Tinker 的实践演进之路
- Android 进程保活招式大全
- 【Dev Club 分享】H5 视频直播那些事
- Android Patch 方案与持续交付
- Linux系统下MongoDB的简单安装与基本操作
- Go语言同步(Synchronization)
- 服务器反爬虫攻略:Apache/Nginx/PHP禁止某些User Agent抓取网站
- 【Dev Club分享】JSPatch成长之路
- Node.js新手必须知道的4个JavaScript概念
- 博客文章重新启用评论,附一键填写评论中用户信息代码生成工具
- 提升 Node.js 应用性能的 5 个技巧
- 再次扩散:Linux系统bash漏洞CVE-2014-6271仍未被彻底修复,红帽再发补丁
- SEO分享:彻底禁止搜索引擎收录非首选域名的方法
- 紧急扩散:Linux系统bash严重安全漏洞CVE-2014-6271的检测及修复方法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python面试题汇总
- lldb 入坑指北(3) - 打印 c++ 实例的虚函数表
- 一文让你彻底搞懂`__str__`和`__repr__`?
- lldb 入坑指北(1) - 给Xcode批量添加启用&禁用断点功能
- Xcode 中的 Workspace、Project、Target 和 Scheme
- 学习Python一年,这次终于弄懂了浅拷贝和深拷贝
- 为速度而生的构建系统 - Ninja
- Python面试题:字符串连接
- Python面试突击
- 我半夜爬了严选的女性文胸数据,发现了惊天秘密
- 二分查找(Python实现)
- 图解JavaScript——代码实现【2】(重点是Promise、Async、发布/订阅原理实现)
- 编译器 bug 系列(1)
- 面试高频:反转链表
- 存储过程