FlutterAndroid

Flutter InkWell-水波纹效果

2019-08-29  本文已影响0人  StevenHu_Sir
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: <Widget>[
      Positioned.fill(
        child: Image(),
      ),
      Positioned.fill(
        child: Material(
          color: Colors.transparent,
          child: InkWell(
            splashColor: Color(0X40FFFFFF),
            highlightColor: Colors.transparent,
            onTap: () {},
          ),
        ),
      )
    ],
  )
上一篇下一篇

猜你喜欢

热点阅读