Flutter InkWell水波纹效果

最新推荐文章于 2025-09-24 14:23:06 发布

原创最新推荐文章于 2025-09-24 14:23:06 发布 · 4.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter InkWell水波纹效果 #Flutter InkWell #Flutter 水波纹效果

Flutter 基础专栏收录该内容

73 篇文章

订阅专栏

本文详细介绍了Flutter中InkWell控件的参数及功能，包括子组件、各种监听事件、颜色设置、反馈控制等，并提供了代码示例，帮助开发者更好地理解和应用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'),
    ),
  )
)

效果图