Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Flutter中GridTile中图像上方的InkVell波纹

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

原创
作者头像
徐建国
修改于 2021-08-26 09:38:30
修改于 2021-08-26 09:38:30
8300
举报
文章被收录于专栏:个人路线个人路线

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

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

代码语言:txt
AI代码解释
复制
Ink.image(
    image: AssetImage('sample.jpg'),
    fit: BoxFit.cover,
    child: InkWell(
        onTap: () {},
    ),
),

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

代码语言:txt
AI代码解释
复制
Stack(
  children: <Widget>[
    Image( ... ),
    Positioned.fill(
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          onTap: () { ... },
        ),
      ),
    ),
  ],
);

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

代码语言:txt
AI代码解释
复制
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会更好。
代码语言:txt
AI代码解释
复制
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),
    ),
  ),
)
代码语言:txt
AI代码解释
复制
Material(  
  child : InkWell(          
      child : YourWidget    
  )      
)

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

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【Flutter 组件集录】Card | 8 月更文挑战
卡片效果作为 Material Design 中的一员,Flutter 中 Card 组件自然是要有的。源码注释中是这么描述它的:带有轻微圆角和立面阴影的面板。本文将从源码的角度看一下 Card 组件的构成,并讲述一下 Card 在使用中的一些细小的注意点。
张风捷特烈
2022/03/18
9950
【Flutter 组件集录】Card | 8 月更文挑战
3.Flutter学习之Image组件
学习自: Dart Flutter教程_Dart Flutter入门实战视频教程-2019年新出. Flutter之path_provider
易帜
2022/02/09
9180
3.Flutter学习之Image组件
基于flutter3.x+material-design3仿微信App应用实战
flutter3-wchat一款基于flutter3+dart3+material-ui技术构建的跨多端仿微信聊天项目。
andy2018
2024/02/07
1.1K0
深入理解 Flutter 鸿蒙版的 Stack 布局:适配屏幕与层叠样式布局
在 Flutter 中,布局是构建用户界面的基础。今天,我们将重点探讨 Flutter 的 Stack 布局,了解如何使用它创建复杂的界面元素,并实现响应式设计,以适应不同屏幕大小的设备。
淼学派对
2024/11/04
1890
Flutter 手势处理 & Hero 动画
第一层有原始指针事件,它描述了屏幕上指针(例如,触摸,鼠标和触控笔)的位置和移动。
Flutter笔记
2019/07/24
1.9K0
Flutter 手势处理 & Hero 动画
Flutter GridView 使用
今天学习一下在Flutter中怎么使用GridView,效果如上图。 头部是一个Banner,使用的是第三方的
赵哥窟
2019/09/20
2.3K0
Flutter GridView 使用
flutter系列之:做一个图像滤镜
很多时候,我们需要一些特效功能,比如给图片做个滤镜什么的,如果是h5页面,那么我们可以很容易的通过css滤镜来实现这个功能。
程序那些事
2023/06/16
3020
FlutterSliverList圆角图片
在学习过程中发现,*Material组件中添加borderRadiu然后使用Stack添加图片,当图片的填充方式为BoxFit.cover时,图片会把圆角覆盖掉,也就是会溢出。
徐建国
2021/08/02
1.2K0
【Flutter 专题】30 图解自定义底部状态栏 ACEBottomNavigationBar (一)
和尚刚接触 Flutter 时接触到底部状态栏 BottomNavigationBar 方便快捷,但随着使用过程发现依然有一些限制,包括图片选择/样式凸出/固定 NavigationItem 位等。和尚不才,准备照葫芦画瓢,自定义一个底部状态栏,并尝试封装成一个 pub 插件。
阿策小和尚
2019/08/12
1.3K0
【Flutter 专题】30 图解自定义底部状态栏 ACEBottomNavigationBar (一)
自研flutter3.x实战仿抖音app短视频直播FlutterLive
flutter3.x_douyin基于flutter3+dart3+getx+meidaKit等技术开发抖音版app视频直播项目。
andy2018
2024/03/25
1K0
Flutter Hero动画开发实用教程
在这篇文章中,将向大家分享Flutter动画中的重要一员Hero动画,以及一些Hero动画的开发技巧和经验。
CrazyCodeBoy
2019/12/10
1.1K0
Flutter Hero动画开发实用教程
Flutter开发中的一些Tips
学习Flutter也有一阵子了。闲着没事,用了公司一个已经凉凉的App设计图来练手。当然了接口不可能用的了,所以都是些死数据,实现效果可以说是很完美了(得到了设计的认可。。。)。当然自己也是边查边写,也借鉴了许多Github上优秀的Flutter项目。现在开源出来(附带设计图),供大家交流学习。希望多多Star、Fork支持,有问题可以Issue。附上链接:github.com/simplezhli/…
iOSSir
2019/07/01
2.2K0
Flutter开发中的一些Tips
Flutter 你需要知道的那些事 01
对于设置控件宽度填充父控件这件事情,在 Android 里面,只需要设置 MATCH_PARENT 即可。
AndroidTraveler
2019/05/14
6510
本文主要介绍flutter聊天应用程序
在本教程中,我将向您展示如何使用 Flutter 构建一个完整的聊天应用程序。对于这一部分,我们将创建应用程序的 UI 原型,然后我将向您展示如何使用 firebase 创建后端服务并创建聊天系统。
徐建国
2021/07/31
7520
flutter基础布局代码
骨灰级别的基础代码,只是做个简单的记录,方便以后看 都是用dart写的,都在flutter项目下的lib文件夹下 import 'package:flutter/material.dart'; import './tomFont.dart'; void main() { runApp( MaterialApp( theme: ThemeData( primarySwatch: Colors.yellow, ), home: Scaffold(
Tom2Code
2023/02/14
7210
flutter基础布局代码
Flutter BackdropFilter 实现高斯模糊
现在应该很多地方都会使用到高斯模糊的效果,想当初在Android上实现差点没要了我的老命,那么在 Flutter 中实现会是如何?
Flutter笔记
2019/07/24
3.4K0
Flutter BackdropFilter 实现高斯模糊
flutter3_window_chat仿微信桌面端聊天实战
年前有给大家分享一款flutter3.x+dart3手机端聊天App实例。春节期间就又捣鼓了flutter3桌面端开发实践项目。
andy2018
2024/03/03
7690
Flutter开发实战分析-pesto_demo解析
以下代码基本参考于 flutter_gallery中的pesto_demo示例。(可以结合本文看源码)
deep_sadness
2018/08/30
2.4K0
Flutter开发实战分析-pesto_demo解析
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Al
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心
卓伊凡
2025/02/04
710
【Flutter】Hero 动画 ( Hero 动画使用流程 | 创建 Hero 动画核心组件 | 创建源页面 | 创建目的页面 | 页面跳转 )
Hero Widget 动画效果 : Hero 通过动画从 源界面 运动到 目标界面 时 , 目标界面 透明度逐渐增加 , 淡入显示 ;
韩曙亮
2023/03/29
1K0
【Flutter】Hero 动画 ( Hero 动画使用流程 | 创建 Hero 动画核心组件 | 创建源页面 | 创建目的页面 | 页面跳转 )
推荐阅读
相关推荐
【Flutter 组件集录】Card | 8 月更文挑战
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档