InkResponse的子类,基本属性同InkResponse。一个矩形区域的水波纹,可以知道圆角半径,边线形状等。

相关组件

InkResponse Ink

InkWell基本事件

  1. <br />【child】 : 子组件 【Widget】<br />【onTap】 : 点击事件 【Function()】<br />【onDoubleTap】 : 双击事件 【Function()】<br />【onTapCancel】 : 点击取消 【Function()】<br />【onLongPress】 : 长按事件 【Function()】<br />![111.gif](https://cdn.nlark.com/yuque/0/2020/gif/326147/1589449571673-69f57cd5-71c6-47f4-91d7-1af7f627621a.gif#align=left&display=inline&height=75&margin=%5Bobject%20Object%5D&name=111.gif&originHeight=75&originWidth=403&size=73166&status=done&style=none&width=403)
import 'package:flutter/material.dart';
class CustomInkWell extends StatefulWidget {
  @override
  _CustomInkWellState createState() => _CustomInkWellState();
}

class _CustomInkWellState extends State<CustomInkWell> {
  var _info = 'Push';

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () => setState(() => _info = 'onTap'),
      onDoubleTap: () => setState(() => _info = 'onDoubleTap'),
      onLongPress: () => setState(() => _info = 'onLongPress'),
      onTapCancel: () => setState(() => _info = 'onTapCancel'),
      child: Container(
        alignment: Alignment.center,
        width: 120,
        height: 50,
        child: Text(_info),
      ),
    );
  }
}

InkWell其他属性

   <br />【child】 : 子组件   【Widget】<br />【onHighlightChanged】 : 高亮变化回调   【Function(bool)】<br />【highlightColor】 : 高亮色   【Color】<br />【splashColor】 : 水波纹色   【Color】<br />【radius】 : 水波半径   【double】<br />![112.gif](https://cdn.nlark.com/yuque/0/2020/gif/326147/1589449617801-c6e98299-bbf0-4453-aca8-f2364a0d5265.gif#align=left&display=inline&height=75&margin=%5Bobject%20Object%5D&name=112.gif&originHeight=75&originWidth=403&size=131224&status=done&style=none&width=403)
import 'package:flutter/material.dart';
class ColorInkWell extends StatefulWidget {
  @override
  _ColorInkWellState createState() => _ColorInkWellState();
}

class _ColorInkWellState extends State<ColorInkWell> {
  var _info = 'Push';

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () => {},
      splashColor: Colors.blueAccent,
      highlightColor: Colors.orange,
      onHighlightChanged: (v) =>
          setState(() => _info = 'onHighlightChanged:$v'),
      radius: 50,
      child: Container(
        alignment: Alignment.center,
        width: 180,
        height: 50,
        child: Text(_info),
      ),
    );
  }
}