InkWell

InkWell组件在用户点击时出现“水波纹”效果。

• 构造函数

 const InkWell({
    super.key,
    super.child,
    super.onTap,//单击
    super.onDoubleTap,//双击
    super.onLongPress,//长按
    super.onTapDown,
    super.onTapUp,
    super.onTapCancel,//取消点击
    super.onHighlightChanged,
    super.onHover,
    super.mouseCursor,
    super.focusColor,
    super.hoverColor,
    super.highlightColor,
    super.overlayColor,
    super.splashColor,
    super.splashFactory,
    super.radius,
    super.borderRadius,
    super.customBorder,
    bool? enableFeedback = true,
    super.excludeFromSemantics,
    super.focusNode,
    super.canRequestFocus,
    super.onFocusChange,
    super.autofocus,
    super.statesController,
  }) 

例子：

InkWell(
     onTap: (){},//一定要有点击事件，否则没有水波纹
     splashColor: const Color.fromRGBO(255, 2555, 255, 0.5),//水波纹的颜色
   // highlightColor: Colors.orange,//高亮颜色
    child: Container(
      width: 200,
      height: 60,
      alignment: Alignment.center,
      child: const Text('InkWell点击水波纹'),
    ),
  )

将 InkWell 小部件包裹在 Material 组件中以设置颜色属性和圆角属性等。例子：

Material(
    //borderRadius: const BorderRadius.all(Radius.circular(30.0)),并不能修饰InkWell的水波纹
    color: Colors.amber,
    child: InkWell(
       borderRadius: const BorderRadius.all(Radius.circular(30.0)),
      hoverColor: Colors.orange,
      splashColor: Colors.red,
      focusColor: Colors.yellow,
      child: Container(
        width: 200,
        height: 60,
        alignment: Alignment.center,
        child: const Text('水波纹'),
      ),
      onTap: (){},
    ),
  )

将 InkWell 小部件包裹在 Ink 组件中以设置颜色属性和圆角属性等。例子：

• 构造函数

 Ink({
    super.key,
    this.padding,
    Color? color,
    Decoration? decoration,
    this.width,
    this.height,
    this.child,
  }) 

例子：

 Ink(
    decoration: const BoxDecoration(
      borderRadius: BorderRadius.all(Radius.circular(30)),
      color: Colors.amber,
    ),
    child: InkWell(
      borderRadius: const BorderRadius.all(Radius.circular(30)),
      hoverColor: Colors.orange,
      splashColor: Colors.red,
      focusColor: Colors.yellow,
      onTap: (){},
      child: Container(
        width: 200,
        height: 60,
        alignment: Alignment.center,

        child: const Text('InkWell点击水波纹'),

      ),
    ),
  ),