InkResponse的子类,基本属性同InkResponse。一个矩形区域的水波纹,可以知道圆角半径,边线形状等。
相关组件
InkWell基本事件
<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),
),
);
}
}