专栏首页个人路线Flutter中GridTile中图像上方的InkVell波纹
原创

Flutter中GridTile中图像上方的InkVell波纹

Flutter中GridTile中图像上方的InkVell波纹

我认为这是在图像上显示波纹效果的更好方法。

Ink.image(
    image: AssetImage('sample.jpg'),
    fit: BoxFit.cover,
    child: InkWell(
        onTap: () {},
    ),
),

使用Stack,我们可以将Material和InkWell带到图像上。要拉伸材质,我们将使用Positioned.fill小部件。

Stack(
  children: <Widget>[
    Image( ... ),
    Positioned.fill(
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          onTap: () { ... },
        ),
      ),
    ),
  ],
);

我们创建了这个简单的小部件,以在任何给定孩子的上方绘制墨水反应。

class InkWrapper extends StatelessWidget {
  final Color splashColor;
  final Widget child;
  final VoidCallback onTap;

  InkWrapper({
    this.splashColor,
    @required this.child,
    @required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        child,
        Positioned.fill(
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              splashColor: splashColor,
              onTap: onTap,
            ),
          ),
        ),
      ],
    );
  }
}
  • 优秀的方法。即使在AspectRatio下也可以使用。如果可以使用FadeInImage会更好。
SizedBox(
  height: 200,
  child: Ink(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: ExactAssetImage("chocolate_image"),
        fit: BoxFit.cover,
      ),
    ),
    child: InkWell(
      onTap: () {},
      splashColor: Colors.brown.withOpacity(0.5),
    ),
  ),
)
Material(  
  child : InkWell(          
      child : YourWidget    
  )      
)

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【Flutter 专题】易忽略的【小而巧】的技术点汇总 (一)

    和尚在学习 Flutter过程中遇到很多有趣的小知识点,平时可能不太注意或一些简单直接的小功能点,准备整理一个小系列,方便日后的查找使用。

    阿策小和尚
  • 谈一谈Flutter外接纹理

    当我们用flutter做实时视频渲染时,往往是要对视频或者相机画面做滤镜处理的,如图:

    glumes
  • Flutter浪潮下的音视频研发探索

    大家好,我是阿里巴巴闲鱼事业部的陈炉军,本次分享的主题是Flutter浪潮下的音视频研发探索,主要内容是针对闲鱼APP在当下流行的跨平台框架Flutter的大规...

    LiveVideoStack
  • flutter Container容器实现圆角边框

    本文实例为大家分享了flutter Container容器实现圆角边框的具体代码,供大家参考,具体内容如下

    砸漏
  • Flutter lesson 7: Flutter组件之基础组件(三)

    上一节我们介绍了Row, Column, Image, Text四个基础组件,这一节我们来看看下面几个组件。

    踏浪
  • 5分钟彻底搞懂Flutter中PlatFormView与Texture

    想要在flutter想显示原生的东东,大家知道,一般有两种方式,一种是PlatformView,另外一种是Texture(俗称外接纹理)。其中PlatformV...

    brzhang
  • Flutter实现雨滴动画

    写了几个Flutter的demo,但是对Flutter的自定义view和动画都不太了解,看到一个类似效果在android的实现,就尝试用Flutter做一下。同...

    DSoon
  • 最佳实践丨Flutter音视频开发实践

    Flutter基础介绍 Flutter简介 Flutter 是 Google 开源的 UI 工具包,帮助开发者通过一套代码库高效构建多平台应用,支持Andro...

    腾讯即时通信IM
  • Flutter | 常用组件分类、概述、实战

    AppBar(title属性,Text组件; action:动作响应;!!!! titleSpacing:标题文字间距; toolbarOpa...

    凌川江雪
  • Flutter完整开发实战详解(二十、 Android PlatformView 和键盘问题)

    作为系列文章的第二十篇,本篇将结合官方的技术文档科普 Android 上 PlatformView 的实现逻辑,并且解释为什么在 Android 上 Platf...

    GSYTech
  • flutter组件3【ListTile 的使用】

    trailing: 设置拖尾将在列表的末尾放置一个图像。这对于指示主-细节布局特别有用。

    sinnoo
  • Flutter中日期组件DatePicker及组件汉化

    越陌度阡
  • 你知道吗,Flutter内置了10多种Button控件

    Flutter内置了10多种Button(按钮)类控件供我们使用,了解这些控件有助于提高我们的开发速度。

    老孟Flutter
  • flutter InkWell实现水波纹点击效果

    在flutter 开发中用InkWell或者GestureDetector将某个组件包起来,已添加点击事件。

    砸漏
  • 有赞 App 如何实现动态域名

    在移动开发中,网络层面的监控一直是非常有必要的,比如统计网络接口的失败率、重定向网络请求、网络Request增加公共header头、实现动态域名等等。经常会遇到...

    有赞coder
  • Flutter单引擎和外接纹理内存优化探索之路

    今年九月初,王者人生Android端及iOS端正式接入flutter跨平台方案来提升开发效率。

    brzhang
  • 基于总变差模型的纹理图像中图像主结构的提取方法。

        本文主要由Structure Extraction from Texture via Relative Total Variation一文中的内容翻译而...

    用户1138785
  • 【Flutter Widgets大全】电子书开源

    【Flutter Widgets 大全】 为 Flutter 老孟 网站项目,共收录 330 多个 Widgets,此电子书并不适合入门(一个一个组件学习),适...

    老孟Flutter
  • Flutter | 使用 InkResponse和 InkWell组件 实现事件操作

    凌川江雪

扫码关注云+社区

领取腾讯云代金券