6、Flutter Widgets 之 InkWell 和 Ink

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情

flutter中有很多好用的手势，实现起来也非常的简单 ，今天给大家介绍下flutter中 InkWell组件的各种用法

InkWell

参数详解 属性 详解 child 子组件 onTap 点击监听（） onDoubleTap 双击监听 onLongPress 长按监听 onTapDown 点击监听 onTapCancel 取消点击监听 onHighlightChanged 当材料的这一部分突出显示或停止突出显示时调用 onHover 当指针进入或退出墨水响应区域时调用 focusColor 获取焦点颜色 hoverColor 指针悬停时颜色 highlightColor 长按颜色 splashColor 水波纹颜色 splashFactory 自定义水波纹 radius 水波纹半径 borderRadius 飞溅半径 customBorder 覆盖borderRadius的自定义剪辑边框 enableFeedback 检测到的手势是否应该提供声音和/或触觉反馈，默认true excludeFromSemantics 是否将此小部件引入的手势从语义树中排除。默认false

InkWell组件在用户点击时出现“水波纹”效果，InkWell简单用法：

InkWell(
 
        onTap: (){},
        child: Text('这是InkWell点击效果'),
      )

InkWell(
 
  onTap: () {},
  splashColor: Colors.red,
  ...
)

给字体添加边距和圆角边框，扩大“水波纹”效果：

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: () {},
        ),
      )

这里主要用到了inkwell的三个属性

onDoubleTap 双击事件 onLongPress 长按事件 onTapCancel 点击取消 具体用法也很简单：

最后总结：

Inkwel是一个很基础的组件，非常简单实用，希望大家能再项目中灵活实用，避免出现一些闭门造车的情况。

githubdemo地址： gitee.com/wywinstonwy…