InkWell

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,    //水波纹颜色(设置了highlightColor属性后 splashColor将不起效果)
  InteractiveInkFeatureFactory splashFactory,
  double radius,    //水波纹的半径
  BorderRadius borderRadius,    //圆角，需与Ink组件组合使用
  ShapeBorder customBorder,
  bool enableFeedback = true,
  bool excludeFromSemantics = false,
  FocusNode focusNode,
  bool canRequestFocus = true,
  ValueChanged<bool> onFocusChange,
  bool autofocus = false,
})

示例1：简单应用

InkWell(
  onTap: () {},
  child: Container(width: 100, height: 50, child: Text('点击')),
),

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

示例2：widget 设置水波纹点击效果并设置widget背景

//此处用Container包裹，设置背景色，不会出现水波纹效果
Material(
  color: Colors.red, // 设置背景颜色 默认矩形
  child: InkWell(
    // 不要在这里设置背景色，for则会遮挡水波纹效果,如果设置的话尽量设置Material下面的color来实现背景色
    child: Container(width: 200, height: 70, child: Text('按钮')),
    onTap: () {},
  ),
),

示例3：添加边距和圆角边框

InkWell(
  onTap: () {},
  child: Container(
    width: 200,
    height: 70,
    decoration: BoxDecoration(
      border: Border.all(color: Colors.blue),
      borderRadius: BorderRadius.circular(35),
    ),
    child: Text('按钮'),
  ),
),

产生问题？
发现“水波纹”超出的了圆角边框，如何解决这个问题呢？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({
  Key key,
  this.padding,
  Color color,
  Decoration decoration,
  this.width,
  this.height,
  this.child,
})

设置背景色(效果等同于示例2)

Ink、InkWell - 图4

Ink(
  color: Colors.red,
  child: InkWell(
    onTap: () {},
    child: Container(width: 200, height: 70, child: Text('按钮')),
  ),
),

设置圆角(修复示例3问题)

Ink(
  decoration: BoxDecoration(
    color: Colors.red,
    border: Border.all(color: Colors.blue),
    borderRadius: BorderRadius.circular(35),
  ),
  child: InkWell(
    //圆角设置，给水波纹也设置同样的圆角（如果这里不设置就会出现矩形的水波纹效果）
    borderRadius: BorderRadius.circular(35),
    onTap: () {},
    child: Container(width: 200, height: 70, child: Text('按钮')),
  ),
),

InkResponse

InkResponse组件也可实现InkWell组件相同的功能，因为InkWell继承于InkResponse，相比之下，InkResponse可以选择控制水波纹以及高亮底色的形状和剪裁效果。

设置自定义水波纹颜色点击效果

左侧是 containedInkWell 为true的效果；右侧是为false的效果

Ink(
  decoration: BoxDecoration(
    color: Colors.red,
    borderRadius: BorderRadius.circular(35),
  ),
  child: InkResponse(
    borderRadius: BorderRadius.circular(35),
    //highlightColor: Colors.yellowAccent,
    //水波纹的颜色
    splashColor: Colors.green,
    //点击或者toch控件高亮的shape形状（rectangle 矩形；circle 圆形）
    highlightShape: BoxShape.rectangle,
    //InkResponse内部的radius这个需要注意的是，我们需要半径大于控件的宽，如果radius过小，显示的水波纹就是一个很小的圆，
    radius: 300.0, //水波纹的半径
    //true表示要剪裁水波纹响应的界面   false不剪裁  如果控件是圆角不剪裁的话水波纹是矩形
    containedInkWell: true,
    onTap: () {},
    child: Container(
      // 不能在InkResponse的child容器内部设置装饰器颜色，否则会遮盖住水波纹颜色的，containedInkWell设置为false就能看到是否是遮盖了。
      width: 200,
      height: 70,
      child: Text('按钮'),
    ),
  ),
),

设置高亮颜色点击效果

Ink(
  decoration: BoxDecoration(
    color: Colors.red,
    borderRadius: BorderRadius.circular(35),
  ),
  child: InkResponse(
    borderRadius: BorderRadius.circular(35),
    //点击或者toch控件高亮时显示的控件在控件上层,水波纹下层
    highlightColor: Colors.yellowAccent,
    //水波纹的颜色(设置了highlightColor属性后 splashColor将不起效果)
    splashColor: Colors.green,
    //点击或者toch控件高亮的shape形状（rectangle 矩形；circle 圆形）
    highlightShape: BoxShape.rectangle,
    radius: 0.0,
    containedInkWell: true,
    onTap: () {},
    child: Container(width: 200, height: 70, child: Text('按钮')),
  ),
),

Ink、InkWell