热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

flutterInkWell实现水波纹点击效果

这篇文章主要为大家详细介绍了flutterInkWell实现水波纹点击效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

在flutter 开发中用InkWell或者GestureDetector将某个组件包起来,已添加点击事件。

GestureDetector 使用点击无水波纹出现,InkWell可以实现水波纹效果。
正常情况下使用 :

InkWell(
 //单击事件响应
 onTap: () {
 },
 child: Container(
  alignment: Alignment(0, 0),
  height: 28,
  width: 120,
  child: Text("InkWell单击事件"),
 ),
 ),

如果在InkWell的上下都出现的颜色的设置,如上中的Container中如果加入了color:Colors.white,或者是Container中的其他widget设置了coloro属性,这时候InkWell的水波纹效果会无效。

1 widget 设置水波纹点击效果 并设置widget背景

 new Center(
  child: new Material(
  // 设置背景颜色 默认矩形
  color: Colors.purple,
  child: new InkWell(
  //点击事件回调
  onTap: () {},
  //不要在这里设置背景色,for则会遮挡水波纹效果,如果设置的话尽量设置Material下面的color来实现背景色
  child: new Container(
  width: 300.0,
  height: 50.0,
  //设置child 居中
  alignment: Alignment(0, 0),
  child: Text("登录",style: TextStyle(color: Colors.white,fontSize: 16.0),),
  ),
  ),
  ),
 ),

或者 可以使用 Ink来设置,与Material设置color 的区别是,Ink可设置背景的形状样式。

new Center(
  child: new Material(
  //INK可以实现装饰容器,实现矩形 设置背景色
  child: new Ink(
  //设置背景 默认矩形
  color: Colors.purple,
  child: new InkWell(
  //点击事件回调
  onTap: () {},
  child: new Container(
   width: 300.0,
   height: 50.0,
   //设置child 居中
   alignment: Alignment(0, 0),
   child: Text("登录",style: TextStyle(color: Colors.white,fontSize: 16.0),),
  ),
  ),
  ),
  ),
 ),

2 圆角widget 设置水波纹点击效果

new Center(
 child: new Material(
//INK可以实现装饰容器
 child: new Ink(
 //用ink圆角矩形
 // color: Colors.red,
  decoration: new BoxDecoration(
  //不能同时”使用Ink的变量color属性以及decoration属性,两个只能存在一个
  color: Colors.purple,
  //设置圆角
  borderRadius: new BorderRadius.all(new Radius.circular(25.0)),
  ),
  child: new InkWell(
  //圆角设置,给水波纹也设置同样的圆角
  //如果这里不设置就会出现矩形的水波纹效果
  borderRadius: new BorderRadius.circular(25.0), 
  //设置点击事件回调
  onTap: () {

  },
  child: new Container(
   width: 300.0,
   height: 50.0,
   //设置child 居中
   alignment: Alignment(0, 0),
   child: Text("登录",style: TextStyle(color: Colors.white,fontSize: 16.0),),
  ),
  ),
  ),
  ),
 ),

如果 InkWell 与Ink 不同时设置相同的圆角,例如 lnk 设置的圆角为20,而Ink没有设置,就会出现 矩形的水波纹点击效果

3 圆角widget 设置自定义水波纹颜色点击效果

new Center(
child: new Material(
child: new Ink(
 //设置背景
  decoration: new BoxDecoration(
  color: Colors.purple,
  borderRadius: new BorderRadius.all(new Radius.circular(25.0)),
  ),
  child: new InkResponse(
  borderRadius: new BorderRadius.all(new Radius.circular(25.0)),
  //点击或者toch控件高亮时显示的控件在控件上层,水波纹下层
  //highlightColor: Colors.yellowAccent,
  //点击或者toch控件高亮的shape形状
  highlightShape: BoxShape.rectangle,
  //.InkResponse内部的radius这个需要注意的是,我们需要半径大于控件的宽,如果radius过小,显示的水波纹就是一个很小的圆,
  //水波纹的半径
  radius: 300.0,
  //水波纹的颜色
  splashColor: Colors.black,
  //true表示要剪裁水波纹响应的界面 false不剪裁 如果控件是圆角不剪裁的话水波纹是矩形
  containedInkWell: true,
  //点击事件
  onTap: () {
   print("click");
  },
  child: new Container(
   //不能在InkResponse的child容器内部设置装饰器颜色,否则会遮盖住水波纹颜色的,containedInkWell设置为false就能看到是否是遮盖了。
   width: 300.0,
   height: 50.0,
   //设置child 居中
   alignment: Alignment(0, 0),
   child: Text("登录",style: TextStyle(color: Colors.white,fontSize: 16.0),),
  ),

  ),
  ),
  ),
 ),

4 圆角widget 设置高亮颜色点击效果

new Center(
  child: new Material(
  child: new Ink(
  //设置背景
  decoration: new BoxDecoration(
  color: Colors.purple,
  borderRadius: new BorderRadius.all(new Radius.circular(30.0)),
  ),
  child: new InkResponse(
  borderRadius: new BorderRadius.all(new Radius.circular(30.0)),
  //点击或者toch控件高亮时显示的控件在控件上层,水波纹下层
  highlightColor: Colors.purple[800],
  //点击或者toch控件高亮的shape形状
  highlightShape: BoxShape.rectangle,
  //.InkResponse内部的radius这个需要注意的是,我们需要半径大于控件的宽,如果radius过小,显示的水波纹就是一个很小的圆,
  //水波纹的半径
  radius: 0.0,
  //水波纹的颜色 设置了highlightColor属性后 splashColor将不起效果
  splashColor: Colors.red,
  //true表示要剪裁水波纹响应的界面 false不剪裁 如果控件是圆角不剪裁的话水波纹是矩形
  containedInkWell: true,

  onTap: () {
   print(
   'click');
  },
  child: new Container(
   //不能在InkResponse的child容器内部设置装饰器颜色,否则会遮盖住水波纹颜色的,containedInkWell设置为false就能看到是否是遮盖了。
   width: 300.0,
   height: 50.0,
   //设置child 居中
   alignment: Alignment(0, 0),
   child: Text("登录",style: TextStyle(color: Colors.white,fontSize: 16.0),),
  ),
  ),
  ),
  ),
 ),

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • Tomcat/Jetty为何选择扩展线程池而不是使用JDK原生线程池?
    本文探讨了Tomcat和Jetty选择扩展线程池而不是使用JDK原生线程池的原因。通过比较IO密集型任务和CPU密集型任务的特点,解释了为何Tomcat和Jetty需要扩展线程池来提高并发度和任务处理速度。同时,介绍了JDK原生线程池的工作流程。 ... [详细]
  • 本文介绍了电流源并联合并的方法,以及谐振电路的原理。谐振电路具有很强的选频能力,通过将电感和电容连接在一起,电流和电压会产生震荡。谐振频率的大小取决于电感和电容的大小,而电路中的电阻会逐渐降低震荡的幅度。电阻和电容组成的电路中,当电容放完电后,电阻两端的电压为0,电流不再流过电容。然而,电感是一种特殊的器件,当有电流流过时,线圈会产生感应磁场,阻止电流的流动,从而使电流不会减小。 ... [详细]
  • 标题: ... [详细]
  • 单点登录原理及实现方案详解
    本文详细介绍了单点登录的原理及实现方案,其中包括共享Session的方式,以及基于Redis的Session共享方案。同时,还分享了作者在应用环境中所遇到的问题和经验,希望对读者有所帮助。 ... [详细]
  • 本文介绍了在Docker容器技术中限制容器对CPU的使用的方法,包括使用-c参数设置容器的内存限额,以及通过设置工作线程数量来充分利用CPU资源。同时,还介绍了容器权重分配的情况,以及如何通过top命令查看容器在CPU资源紧张情况下的使用情况。 ... [详细]
  • 集合的遍历方式及其局限性
    本文介绍了Java中集合的遍历方式,重点介绍了for-each语句的用法和优势。同时指出了for-each语句无法引用数组或集合的索引的局限性。通过示例代码展示了for-each语句的使用方法,并提供了改写为for语句版本的方法。 ... [详细]
  • Python SQLAlchemy库的使用方法详解
    本文详细介绍了Python中使用SQLAlchemy库的方法。首先对SQLAlchemy进行了简介,包括其定义、适用的数据库类型等。然后讨论了SQLAlchemy提供的两种主要使用模式,即SQL表达式语言和ORM。针对不同的需求,给出了选择哪种模式的建议。最后,介绍了连接数据库的方法,包括创建SQLAlchemy引擎和执行SQL语句的接口。 ... [详细]
  • position属性absolute与relative的区别和用法详解
    本文详细解读了CSS中的position属性absolute和relative的区别和用法。通过解释绝对定位和相对定位的含义,以及配合TOP、RIGHT、BOTTOM、LEFT进行定位的方式,说明了它们的特性和能够实现的效果。同时指出了在网页居中时使用Absolute可能会出错的原因,即以浏览器左上角为原始点进行定位,不会随着分辨率的变化而变化位置。最后总结了一些使用这两个属性的技巧。 ... [详细]
  • 开发笔记:Docker 上安装启动 MySQL
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了Docker上安装启动MySQL相关的知识,希望对你有一定的参考价值。 ... [详细]
  • Oracle优化新常态的五大禁止及其性能隐患
    本文介绍了Oracle优化新常态中的五大禁止措施,包括禁止外键、禁止视图、禁止触发器、禁止存储过程和禁止JOB,并分析了这些禁止措施可能带来的性能隐患。文章还讨论了这些禁止措施在C/S架构和B/S架构中的不同应用情况,并提出了解决方案。 ... [详细]
  • Spring常用注解(绝对经典),全靠这份Java知识点PDF大全
    本文介绍了Spring常用注解和注入bean的注解,包括@Bean、@Autowired、@Inject等,同时提供了一个Java知识点PDF大全的资源链接。其中详细介绍了ColorFactoryBean的使用,以及@Autowired和@Inject的区别和用法。此外,还提到了@Required属性的配置和使用。 ... [详细]
  • 本文介绍了Java的公式汇总及相关知识,包括定义变量的语法格式、类型转换公式、三元表达式、定义新的实例的格式、引用类型的方法以及数组静态初始化等内容。希望对读者有一定的参考价值。 ... [详细]
  • 本文讨论了微软的STL容器类是否线程安全。根据MSDN的回答,STL容器类包括vector、deque、list、queue、stack、priority_queue、valarray、map、hash_map、multimap、hash_multimap、set、hash_set、multiset、hash_multiset、basic_string和bitset。对于单个对象来说,多个线程同时读取是安全的。但如果一个线程正在写入一个对象,那么所有的读写操作都需要进行同步。 ... [详细]
  • 本文介绍了一种图片处理应用,通过固定容器来实现缩略图的功能。该方法可以实现等比例缩略、扩容填充和裁剪等操作。详细的实现步骤和代码示例在正文中给出。 ... [详细]
  • C++语言入门:数组的基本知识和应用领域
    本文介绍了C++语言的基本知识和应用领域,包括C++语言与Python语言的区别、C++语言的结构化特点、关键字和控制语句的使用、运算符的种类和表达式的灵活性、各种数据类型的运算以及指针概念的引入。同时,还探讨了C++语言在代码效率方面的优势和与汇编语言的比较。对于想要学习C++语言的初学者来说,本文提供了一个简洁而全面的入门指南。 ... [详细]
author-avatar
liu-zebing_284
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有