Flutter Inkwell使用详解

该文章属于【Flutter每周一组件】系列,其它组件可以查看该系列下的文章,该系列会不间断更新;所有组件的demo已经上传值Github: https://github.com/xj124456/flutter_widget_demo, 欢迎Star

使用场景

当需要给一个元素点击事件的时候,你可以用InkWell来包裹这个元素,它里面有常用交互事件和点击效果,可以简单实现想要的效果

预览

组件参数说明

const InkWell({
Key key,
Widget child, //子组件
GestureTapCallback onTap, //单击事件
GestureTapCallback onDoubleTap, //双击事件
GestureLongPressCallback onLongPress, //长按事件
GestureTapDownCallback onTapDown, //手指按下
GestureTapCancelCallback onTapCancel, //取消点击事件
ValueChanged<bool> onHighlightChanged, //突出显示或停止突出显示时调用
ValueChanged<bool> onHover, //当指针进入或退出墨水响应区域时调用
MouseCursor mouseCursor,
Color focusColor, //获取焦点颜色
Color hoverColor, //指针悬停时颜色
Color highlightColor, //按住不放时的颜色
MaterialStateProperty<Color> overlayColor,
Color splashColor, //溅墨颜色
InteractiveInkFeatureFactory splashFactory, //自定义溅墨效果
double radius, //溅墨半径
BorderRadius borderRadius, //溅墨元素边框圆角半径
ShapeBorder customBorder, //覆盖borderRadius的自定义剪辑边框
bool enableFeedback = true, //检测到的手势是否应该提供声音和/或触觉反馈,默认true
bool excludeFromSemantics = false, //是否将此小部件引入的手势从语义树中排除。默认false
FocusNode focusNode,
bool canRequestFocus = true,
ValueChanged<bool> onFocusChange,
bool autofocus = false,
})

案例代码

Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter InkWell'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
InkWell(
onTap: () {
print('点击了');
},
child: ListTile(
title: Text('InkWell的子组件是ListTile'),
trailing: Icon(Icons.chevron_right),
),
),
Divider(),
InkWell(
onTap: () {
print('点击了');
},
highlightColor: Colors.blue,
autofocus: true,
child: Text('InkWell的子组件是Text'),
),
Divider(),
InkWell(
onTap: () {
print('必须要绑定事件,不然没效果');
},
borderRadius: BorderRadius.all(Radius.circular(50.0)),
splashColor: Colors.red,
child: Container(
padding: EdgeInsets.all(10.0),
child: Container(
width: 200.0,
height: 200.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(300.0))),
padding: EdgeInsets.all(10.0),
child: Text('InkWell的子组件是Container'),
),
),
),
],
)),
);
}

觉得有用 ?喜欢就收藏,顺便点个赞吧,你的支持是我最大的鼓励!微信搜 [DX前端框架知识库],发现更多Vue, React, Flutter, Uniapp, Nodejs, Html/Css等前端知识和实战.

DX前端,分享前端框架知识库,文章详见:dxong.com

Flutter InkWell - Flutter每周一组件的更多相关文章

  1. Flutter ListTile - Flutter每周一组件

    该文章属于[Flutter每周一组件]系列,其它组件可以查看该系列下的文章,该系列会不间断更新:所有组件的demo已经上传值Github: https://github.com/xj124456/fl ...

  2. flutter中的按钮组件

    Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton.IconButton.OutlineButton.ButtonBar.Floati ...

  3. flutter中的列表组件

    列表布局是我们项目开发中最常用的一种布局方式.Flutter 中我们可以通过 ListView 来定义列表项,支持垂直和水平方向展示.通过一个属性就可以控制列表的显示方向.列表有以下分类:  垂直列表 ...

  4. 【Flutter学习】基本组件之基本按钮组件

    一,概述 由于Flutter是跨平台的,所以有适用于Android和iOS的两种风格的组件.一套是Google极力推崇的Material,一套是iOS的Cupertino风格的组件.无论哪种风格,都是 ...

  5. Flutter 中那么多组件,难道要都学一遍?

    在 Flutter 中一切皆是 组件,仅仅 Widget 的子类和间接子类就有 350 多个,整理的 Flutter组件继承关系图 可以帮助大家更好的理解学习 Flutter,回归正题,如此多的组件到 ...

  6. Flutter介绍 - Flutter,H5,React Native之间的对比

    Flutter介绍 Flutter是Google推出的开源移动应用开发框架.开发者可以通过开发一套代码同时运行在iOS和Android平台. 它使用Dart语言进行开发,并且最终编译成各个平台的Nat ...

  7. 【Flutter】Flutter 一些常用库

    Flutter社区和资源传送门 新: 慕课网<Flutter入门与案例实战>   |   中文网<Flutter实战>电子书 字体图标生成 http://fluttericon ...

  8. Flutter web & Flutter

    Flutter web & Flutter Google I/O 2019 recap & GDG shanghai flutter 与 Android 原生,应用应用,性能对比, d ...

  9. 【手把手学习flutter】Flutter打Android包的基本配置和包体积优化策略

    [手把手学习flutter]Flutter打Android包的基本配置和包体积优化策略 关注「松宝写代码」,回复"加群" 加入我们一起学习,天天向上 前言 因为最近参加2020FE ...

随机推荐

  1. 如何在Camtasia中对录制视频进行动画编辑

    生活中,我们时时会遇到要剪辑视频不知道哪一款软件比较简单:当我们想要录制电脑屏幕时,网上的方法也总是不奏效.那是否有一款软件可以同时兼备这两种功能呢?今天我给大家推荐的便是一款同时兼备这两种功能的软件 ...

  2. python自动化测试pytest框架

    pytest和unittest都是python中的测试框架,pytest相比unittest 更加的灵活,具体体现在 以下几点 1.写测试方法时不用继承类 2.前置后置放在一起 2.1如果是全局共享的 ...

  3. SFTP 连接服务器下载文件方法采坑说明

    本篇博客主要记录请求SFTP服务器的一些方法采坑情况. 采坑的方法说明: 1. cd():这个方法用于进入某个目录下. 默认情况,当连接SFTP服务器成功后直接进入用户目录,比如我连接自己本机SFTP ...

  4. Spring5.0源码学习系列之Spring AOP简述

    前言介绍 附录:Spring源码学习专栏 在前面章节的学习中,我们对Spring框架的IOC实现源码有了一定的了解,接着本文继续学习Springframework一个核心的技术点AOP技术. 在学习S ...

  5. Matlab 画图2

    fplot函数 plot函数的缺点:在实际应用中,函数随着自变量的变化趋势是未知的,如果自变量的离散区间不合理,则无法反应函数的变化趋势. fplot的作用:通过自适应算法,解决上述问题. fplot ...

  6. Java集合【5】-- Collections源码分析

    目录 一.Collections接口是做什么的? 二.Collections源码之大类方法 1.提供不可变集合 2.提供同步的集合 3.类型检查 4.提供空集合或者迭代器 5.提供singleton的 ...

  7. 以前一个个文件删数据的我,今天终于找到了释放C盘空间的办法

    这是我刚刚清理的C盘,亲测有效!无需安装清理空间的软件,我的电脑品牌是华硕. win10的电脑应该都有搜索功能,如果没有开启,可以鼠标右键点击任务栏. 弹出菜单找到[搜索]-[显示搜索图标],勾选即可 ...

  8. 对象不支持“assign”属性或方法

    1. 报错信息 vue项目打包部署后,ie11报错内容如下: 看到报错信息肯定是语法兼容问题了,经测试 Edge 无此情况,部分ie9也有此类问题. 2. 尝试方法 安装 create-react-a ...

  9. 第四十章、PyQt显示部件:QGraphicsView图形视图和QGraphicsScene图形场景简介及应用案例

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 一.概述 Designer中的Graphics V ...

  10. 半夜删你代码队 Day5冲刺

    一.每日站立式会议 1.站立式会议 成员 昨日完成工作 今日计划工作 遇到的困难 陈惠霖 跟进作业 完成注册界面 相关界面设计内容知识不充足 侯晓龙 开始双人合作 开始与数据库结合 无 周楚池 初步完 ...