Flutter InkWell水波纹效果

参数详解

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

代码示例

常规使用方式:

Container(
  alignment: Alignment.center,
  child: InkWell(
    onTap: (){print('----');},
    child: Text('我是InkWell'),
  ),
),

 有一个问题,如果我向给Container添加颜色 color: Colors.red,就会出现点击时没有水波纹。其实并不是说没有水波纹,而是被Container颜色遮挡了,解决方法是 使用Material添加颜色。在以下代码的Container中添加颜色依旧会遮盖水波纹。

Material(
  color: Colors.red,
  child: new InkWell(
    onTap: (){print('--InkWell--');},
    child: Container(
      alignment: Alignment.center,
      child: Text('我是InkWell'),
    ),
  )
)

效果图

Flutter InkWell水波纹效果_第1张图片

完整代码

查看完整代码

你可能感兴趣的:(Flutter,基础)