Flutter 剪裁组件的使用
作者:ZeroFlutter 发布时间:2023-06-18 13:15:04
效果展示
在实际项目当中我们经常看到如下各种剪裁形状的效果,Flutter 为我们提供了非常方便的 Widget 很轻松就可以实现,下面我们来一起看看吧
剪裁 Widget
ClipRRect(圆角矩形剪裁)
这里我们通过 borderRadius 属性就可以很方便的设置圆角半径来实现圆角剪裁
ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.network(
img1,
height: height,
),
),
其他属性
大概瞅一眼就可以看到 ClipRRect 的属性就 5 个,这里我们需要调整的可能就 1~3 个
borderRadius 圆角半径
clipper 自定义圆角矩形剪裁
clipBehavior 剪裁方式
Clip.none 不剪裁
Clip.hardEdge 不进行抗锯齿剪裁
Clip.antiAlias 默认-抗锯齿剪裁
Clip.antiAliasWithSaveLayer 抗锯齿并且合成层剪裁(这种模式不仅有抗锯齿,还分配一个离屏缓存,后续的剪裁都在缓冲区进行)
其他形状剪裁
这里我们通过设置四个角的 borderRadius 可以达到不同的形状效果,下面就具体来看看
叶子形状
ClipRRect(
borderRadius: BorderRadius.only(
// 设置左下角半径为 40
bottomLeft: Radius.circular(40),
// 设置右上角半径为 40
topRight: Radius.circular(40),
),
child: ...,
),
“狗屋”形状
ClipRRect(
borderRadius: BorderRadius.vertical(
// 设置顶部半径为 40
top: Radius.circular(40),
// 设置低部半径为 10
bottom: Radius.circular(10),
),
child: ...,
),
更多创意效果等你来发挥
ClipOval(椭圆剪裁)
如果你的子组件是长方形,那么剪裁出来就是一个椭圆形
ClipOval(
child: Image.network(
img1,
// 仅设置了高度,原始图片是长方形
height: height,
),
),
如果你的子组件是正方形,那么剪裁出来就是一个圆形
// 定义的宽高相等
var width = 100.0;
var height = 100.0;
ClipOval(
child: Image.network(
img1,
width: width,
height: height,
// 缩放
fit: BoxFit.cover,
),
),
其他属性
这里只有 clipper、clipBehavior ,与上面 ClipRRect 的属性意思相同,不过多说明了
ClipRect(矩形剪裁)
这个很少用到,暂时没有找到应用场景,就不过多说明了,你找到的话可以评论告诉我哦,我会及时更新上来的
ClipPath(路径剪裁)
这个让你发挥的自由度就更多了,比如 ⭐️五角星、❤️爱心、优惠券卡片 以及上面👆🏻所有的形状都可以用路径剪裁来实现,下面我们就实现一个底部曲线剪裁 的效果
ClipPath(
// 这里需要给 clipper 传递一个 CustomClipper<Path>
clipper: ClipperPath(),
child: Image.network(
img1,
height: height,
),
),
这里是创建曲线剪裁路径,看了下面的代码你就知道上面的其他剪裁 Widget 的 clipper 怎么使用了
下面代码注释非常详细,仔细看哦
/// 创建剪裁路径
class ClipperPath extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var path = Path();
// 连接到距离左上角3/4处
path.lineTo(0.0, size.height / 2);
// 第一个控制点
var firstControlPoint = Offset(0, size.height);
// 目标点是底部中间点
var firstPoint = Offset(size.width / 2, size.height);
path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
firstPoint.dx, firstPoint.dy);
// 第二个控制点
var secondControlPoint = Offset(size.width, size.height);
// 目标点是右上角 3/4 处
var secondPoint = Offset(size.width, size.height / 2);
path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
secondPoint.dx, secondPoint.dy);
// 连接到右上角
path.lineTo(size.width, 0.0);
// 闭合
path.close();
// 返回剪裁路径
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) =>
oldClipper.hashCode != this.hashCode;
}
Tips:剪裁路径的开销很大,对于某些形状,建议选择上面经过优化的 Widget 使用
做个优化
聪明的你一定发现,我们通过 ClipRRect 就可以实现这个效果,为啥还要写这么多代码呢?来,看效果,上代码
ClipRRect(
borderRadius: BorderRadius.vertical(
// 底部圆角半径设置为 60
bottom: Radius.circular(60),
),
child: Image.network(
img1,
height: height,
),
),
源码仓库
基于 Flutter 🔥 最新版本
来源:https://juejin.cn/post/6969724856514379790
猜你喜欢
- AlertDialog可以在当前的界面上显示一个对话框,这个对话框是置顶于所有界面元素之上的,能够屏蔽掉其他控件的交互能力,因此AlertD
- jdk8之前 一、java.lang.Systemlong times = System.currentTimeMillis();
- [LeetCode] 2. Add Two Numbers 两个数字相加You are given two non-empty&n
- 自从SEOTcs系统11月份24日更新了一下SEO得分算法以来,一直困扰我的一个问题出现了,java的数据job任务,在执行过程中会经常报以
- 项目概况:Spring Cloud搭的微服务,使用了eureka,FeignClient,现在遇到FeignClient调用接口时不支持上传
- 光流的概念是由一个叫Gibson的哥们在1950年提出来的。它描述是空间运动物体在观察成像平面上的像素运动的瞬时速度,利用图像序列中像素在时
- Lambda 表达式Lambda 表达式是现代 C++ 中最重要的特性之一,而 Lambda 表达式,实际上就是提供了一个类似匿名函数的特性
- 各位亲们可以尝试以下代码:注:这里我就只有一个html标签对来说明问题了,首部之类的东西,自己添加。<html> &n
- 本文实例为大家分享了C# GDI+实现时钟表盘的具体代码,供大家参考,具体内容如下一、设计如下图界面按键“打开时钟&am
- forward_list 概述forward_list 是 C++ 11 新增的容器,它的实现为单链表。forward_list 是支持从容
- 本文实例讲述了Java实现接口的枚举类。分享给大家供大家参考,具体如下:一 点睛枚举类也可以实现一个或多个接口。与普通类实现一个或多个接口完
- 问题:在用Java程序进行读写含中文的txt文件时,经常会出现读出或写入的内容会出现乱码。原因其实很简单,就是系统的编码和程序的编码采用了不
- 1 自定义类加载器自定义类加载器的代码很简单,只需要继承ClassLoader类,覆写findClass方法即可其默认实现是会抛出一个异常:
- 前言回想一下,在学Java时接触的正则表达式,其实Kotlin中也是类似。只不过使用Kotlin 的语法来表达,更为简洁。正则(Regex)
- 废话开篇:iOS与android在实现列表界面的时候是有重用机制的,目的就是减少内存开销,用时间换空间。个人感觉flutter并没有特别强调
- 这篇会深化View拖拽实例,利用Flutter Animation、插值器以及AnimatedBuilder教大家实现带动画的抽屉效果。先来
- 本文实例为大家分享了android自定义环形对比图的具体代码,供大家参考,具体内容如下1.首先在res/values里创建一个attr.xm
- Android ListView的Item点击效果的定制
- 本文实例讲述了C#中HttpWebRequest的用法。分享给大家供大家参考。具体如下:HttpWebRequest类主要利用HTTP 协议
- 具体可见http://developer.android.com/tools/debugging/ddms.html。 DDMS为IDE和e