Flutter 剪裁组件的使用

目录
  • 效果展示
  • 剪裁 Widget
    • ClipRRect（圆角矩形剪裁）
      • 其他属性
      • 其他形状剪裁
    • ClipOval（椭圆剪裁）
      • 其他属性
    • ClipRect（矩形剪裁）
    • ClipPath（路径剪裁）
      • 做个优化
  • 源码仓库
  • 参考链接

效果展示

在实际项目当中我们经常看到如下各种剪裁形状的效果，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 🔥 最新版本

Flutter Widgets 仓库

参考链接

ClipRRect (Flutter Widget of the Week)
Flutter-ClipRRect
Flutter-ClipRect
Flutter-ClipOval
Flutter-ClipPath
Flutter-CustomClipper

以上就是Flutter 剪裁组件的使用的详细内容，更多关于Flutter 剪裁组件的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Flutter给控件实现钻石般的微光特效

    Flutter给控件实现钻石般的微光特效

    效果图 使用方法 Shimmer( baseColor: const Color(0x08ffffff), // 背景颜色 highlightColor: Colors.white, // 高光的颜色 loop: 2, // 闪烁循环次数,不传默认一直循环 child: Image.asset('assets/images/watermelon.png',width: 325, height: 260, fit: BoxFit.contain), ) 实现原理 ① 特效控件分为两层:底层显示调用

  • Flutter多选按钮组件Checkbox使用方法详解

    Flutter多选按钮组件Checkbox使用方法详解

    Flutter 中的多选按钮组件有两种,供大家参考,具体内容如下 1. Checkbox 多选按钮,一般用来表现一些简单的信息. 常用属性如下: (1). value  多选的值: (2). onChanged 选择改变触发的事件: (3). activeColor 选中时的颜色: (4). checkColor 选中后对号的颜色: 2. CheckboxListTile 包含更多信息的多选项,提供多种配置信息的属性,可以表现更丰富的信息. 常用的属性如下: (1). value  多选的值:

  • Flutter源码分析之自定义控件（RenderBox）指南

    Flutter源码分析之自定义控件（RenderBox）指南

    目录 前言 RenderObject 类继承层级解析 RenderBox 叶节点与父节点 控件的测量与布局 performResize 和 performLayout relayoutBoundary 叶节点 父节点 ParentData ParentData BoxParentData ContainerBoxParentData ContainerParentDataMixin 测量 child 大小 布局 child 控件的绘制 绘制自身内容 绘制 child repaintBoundar

  • Flutter listview如何实现下拉刷新上拉加载更多功能

    Flutter listview如何实现下拉刷新上拉加载更多功能

    目录 下拉刷新 RefreshIndicator 上拉加载更多 总结: 下拉刷新 在Flutter中系统已经为我们提供了google material design的刷新功能 , 样式与原生Android一样. 我们可以使用RefreshIndicator组件来实现Flutter中的下拉刷新,下面们还是先来看下如何使用吧 RefreshIndicator 构造方法: const RefreshIndicator({ Key key, @required this.child, this.disp

  • flutter 动手撸一个城市选择citypicker功能

    flutter 动手撸一个城市选择citypicker功能

    城市选择器在项目开发中一般都会用到,基于flutter版本的也有一个city_pickers但是已经很久没有人维护了,项目中之前也用的是这个,最近升级到flutter1.17.x后,发现有一定的概率闪退,无奈之下,只能自动动手撸一个了 demo下载地址:https://github.com/qqcc1388/city_picker CityPickerView能够实现以下功能 显示省市区地址,市或者区可以为空白数据 省市区数据支持自定义,但是格式要按照city.json中个格式来,如果需要外部传

  • Flutter Boost 混合开发框架

    Flutter Boost 混合开发框架

    目录 一.Flutter Boost简介 二.Flutter Boost集成 2.1 Android集成 2.2 iOS集成 三.Flutter Boost架构 四.FlutterBoost3.0更新 4.1 不入侵引擎 4.2 不区分Androidx和Support分支 4.3 双端设计统一,接口统一 4.4 支持 [打开flutter页面不再打开容器] 场景 4.5 生命周期的精准通知 4.6 其他Issue 一.Flutter Boost简介 众所周知,Flutter是一个由C++实现的F

  • Android 集成Flutter

    Android 集成Flutter

    目录 Android 集成Flutter 1, Hello Flutter 2, 引入 Flutter 模块 3,使用Flutter 3.1 添加依赖 3.2 运行Flutter页面 3.2.1 添加Flutter页面 4,Flutter APK 解析 5,踩过的坑 Android 集成Flutter Flutter 作为 Google 开源的新一代跨平台.高性能 UI 框架,旨在帮助开发者高效地构建出跨平台的.UI 与交互体验一致的精美应用,推出后一直倍受开发者的青睐. 当需要开发一个全新的应

  • MacBook M1 Flutter环境搭建的实现步骤

    MacBook M1 Flutter环境搭建的实现步骤

    目录 一.基础环境搭建 git: Flutter SDK: CocoaPods: 二.安装IDE IDEA: Xcode: AndroidStudio: 三.跑一个app试试 最近入手了Apple M1,MacBook Air,由于之前未使用苹果系列产品,并且Flutter官方和各项配套的软件环境也还没有成熟,导致搭建环境时碰到了不少坑,这里总结记录一波,来看文档的同学,有不懂的地方直接发评论或者消息就好 一.基础环境搭建 git: 我是装完homebrew,git就装好了,homebrew的安

  • Flutter 剪裁组件的使用

    Flutter 剪裁组件的使用

    目录 效果展示 剪裁 Widget ClipRRect(圆角矩形剪裁) 其他属性 其他形状剪裁 ClipOval(椭圆剪裁) 其他属性 ClipRect(矩形剪裁) ClipPath(路径剪裁) 做个优化 源码仓库 参考链接 效果展示 在实际项目当中我们经常看到如下各种剪裁形状的效果,Flutter 为我们提供了非常方便的 Widget 很轻松就可以实现,下面我们来一起看看吧 剪裁 Widget ClipRRect(圆角矩形剪裁) 这里我们通过 borderRadius 属性就可以很方便的设置圆

  • 详细AngularJs4的图片剪裁组件的实例

    本文介绍了AngularJs4的图片剪裁组件,下面我来记录一下,有需要了解AngularJs4的图片剪裁组件的朋友可参考.希望此文章对各位有所帮助. jQuery里有一个强大的图片剪裁插件,叫cropper.js.这是大神的GitHub地址:https://github.com/fengyuanchen/cropper 首先想在全是ts文件的angular里运用jquery的js代码插件,这时候需要一个东西,他叫桥接文件.npm是一个强大的库,已经有前人在里面封装了cropper以及所有你能想到

  • Flutter基本组件Basics Widget学习

    Flutter基本组件Basics Widget学习

    目录 1. 概述 2. 常用组件 2.1 Text 2.1.1 TextStyle 2.1.2 TextSpan 2.1.3 DefaultTextStyle 2.1.4 使用字体 2.2 Button 2.2.1 ElevatedButton 2.2.2 TextButton 2.2.3 OutlinedButton 2.2.4 IconButton 2.2.5 带图标的按钮 2.3 图片及Icon 2.3.1 图片 2.3.2 Icon 2.4 单选开关和复选框 2.4.1 属性 2.5 输

  • Flutter绘图组件之CustomPaint使用详解

    Flutter绘图组件之CustomPaint使用详解

    目录 简介 CustomPaint介绍 CustomPainter示例 总结 简介 在有些场景中,我们会需要绘制一些高度定制化的组件,比如 UI 设计师给我们出了个难题 —— 弄一个奇形怪状的边框.看在 UI 设计师是一个漂亮小姐姐的份上,又不好意思说这个做不了(那样也很没面子).这个时候我们就不能直接使用 Flutter 自带的那些组件了,而是需要手动绘制组件,那就会需要用到 CuntomPaint 组件.CustomPaint 组件和前端的 Canvas差不多,允许我们在一个画布上绘制各种元

  • Android Flutter表格组件Table的使用详解

    Android Flutter表格组件Table的使用详解

    目录 Table.TabRow.TabCell 小结 之前开发中用到的表格,本篇文章主要介绍如何在页面中使用表格做一个记录. Table组件不同于其它Flex布局,它是直接继承的RenderObjectWidget的.相当于是一个独立的组件,区别与其他系列组件. Table.TabRow.TabCell 惯例,先看下Table相关的构造方法: Table({ Key? key, this.children = const <TableRow>[],//行列表 表示多少行 this.column

  • Flutter 日历组件简单实现

    Flutter 日历组件简单实现

    目录 前言 安装 效果 demo 演示 业务使用 headerView 使用 配置属性 DEMO 感谢 前言 近期有个业务需求,涉及用户付费相关的计算,需要一个日历组件,组件功能如下: 仅支持从明天开始选择预定日期 仅支持可选范围内的日期 日期的选择是连续的 有个推荐日期,需要联动更新 todo: 支持不连续的日期选择 Github:tw_calendar 安装 dependencies: tw_calendar: latest_version 效果 demo 演示 业务使用 headerVie

  • Flutter投票组件使用方法详解

    本文实例为大家分享了Flutter投票组件的使用方法,供大家参考,具体内容如下 前景 基于公司项目需求,仿照微博实现投票功能. 开发遇到的问题 1.选项列表的高度,自适应的问题:2.进度条动画的问题:3.列表回收机制,导致进度条动画重复:4.自定义进度条四周圆角: 如何解决问题 拿到数组列表最长的数据,然后根据屏幕宽度计算,超出一行则设定两行高度,否则使用一行的高度: _didExceedOneMoreLines(String text, double width, TextStyle styl

  • Flutter StreamBuilder组件实现局部刷新示例讲解

    Flutter StreamBuilder组件实现局部刷新示例讲解

    目录 一.前言 二.StreamBuilder 简介 三.StreamBuilder的实际应用 总结 一.前言 在flutter项目中,页面内直接调用setState方法会使得页面重新执行build方法,导致内部组件被全量刷新,造成不必要的性能消耗.出于性能和用户体验方面的考虑我们经常会使用局部刷新代替全量刷新进行页面更新的操作.包括Provider.ValueNotifier和StatefulBuilder等在内的技术方案,都能够帮助我们实现Flutter局部刷新的需求. 本文记录的是通过St

  • flutter text组件使用示例详解

    目录 正文 Text组件 Text组件构造器上的主要属性 正文 flutter组件的实现参考了react的设计理念,界面上所有的内容都是由组件构成,同时也有状态组件和无状态组件之分,这里简单介绍最基本的组件. 在组件代码的书写方式上,web端开发的样式主要有由css进行控制,而客户端开发根据使用的技术栈不同,写法也稍微有些不同:ReactNative的写法和web比较类似,但是ReactNative是使用StyleSheet.create()方法创建样式对象,以内联的方式进行书写. import

  • Flutter刷新组件RefreshIndicator自定义样式demo

    目录 前言 效果图 RefreshIndicator初始样式 RefreshIndicator样式修改(简单) RefreshIndicator样式修改(复杂) 简单的样式修改 复杂的样式修改 前言 RefreshIndicator是Flutter里常见的下拉刷新组件,使用是比较方便的.但由于产品兄弟对其固定的刷新样式很是不满,而且代码中已经引入了很多RefreshIndicator,直接替换其他组件的话,对代码的改动可能比较大,所以只能自己动手改一改源码,在达到产品的要求的同时尽可能减少代码的

随机推荐