美文网首页FlutterAndroid
Flutter InkWell-水波纹效果

Flutter InkWell-水波纹效果

作者: StevenHu_Sir | 来源:发表于2019-08-29 09:27 被阅读0次
    • 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: <Widget>[
          Positioned.fill(
            child: Image(),
          ),
          Positioned.fill(
            child: Material(
              color: Colors.transparent,
              child: InkWell(
                splashColor: Color(0X40FFFFFF),
                highlightColor: Colors.transparent,
                onTap: () {},
              ),
            ),
          )
        ],
      )
    

    相关文章

      网友评论

        本文标题:Flutter InkWell-水波纹效果

        本文链接:https://www.haomeiwen.com/subject/wzybectx.html