Flutter InkWell-水波纹效果

  • InkWell有的叫溅墨效果,有的叫水波纹效果。使用场景是给一些无点击事件的部件添加点击事件时使用(也支持长按、双击等事件),同时你也可以去修改它的颜色和形状。
InkWell(
  borderRadius: BorderRadius.circular(8.0), // 圆角
  splashColor: Colors.transparent, // 溅墨色(波纹色)
  highlightColor: Colors.transparent, // 点击时的背景色(高亮色)
  onTap: () {},// 点击事件
  child: Container(),
);

实现水波纹效果 两种方式

1. 包一层 Material,将背景色设置在 Material中的color里。

Material(
  color: Colors.white,
  child: InkWell(),
)

2.使用Stack布局,将InkWell放置在上层。这种适用于给图片添加点击效果,比如Banner图的点击。

Stack(
    children: [
      Positioned.fill(
        child: Image(),
      ),
      Positioned.fill(
        child: Material(
          color: Colors.transparent,
          child: InkWell(
            splashColor: Color(0X40FFFFFF),
            highlightColor: Colors.transparent,
            onTap: () {},
          ),
        ),
      )
    ],
  )

你可能感兴趣的:(Flutter InkWell-水波纹效果)