Flutter代码锦囊---自定义曲线裁剪

在实际开发中，很多APP里面都会有一些布局需要用到曲线，而不是直线，下面举两个例子，一个是京东APP的页面，一个是淘宝APP的页面，它们都用到了曲线。

在Flutter中可以怎么实现这个效果呢，有一个简单的方法，也有一个复杂的方法。首先简单的方法是什么呢？让UI给一张PNG图片文件，直接贴上去。那复杂的方法又是啥嘞？自定义一个曲线裁剪画布，用来裁剪组件，这篇文章讲的就是这个方法。

下面我们就开始写一个自定义的曲线裁剪组件，新建一个dart文件，并添加下面的代码。

import 'package:flutter/material.dart';/// 自定义的曲线裁剪组件。
/// 自定义剪辑（`CustomClipper`）抽象类，用于提供自定义剪辑的界面。
class ArcClipper extends CustomClipper<Path> {// 得到剪辑（`getClip`）抽象方法，给定被剪裁的渲染对象具有给定大小的剪辑描述。@overridePath getClip(Size size) {// TODO：自定义的主要操作内容。}// 应该重新剪辑（`shouldReclip`）抽象方法，每当为剪辑对象提供自定义剪辑器委托类的新实例时，// 或者在使用自定义画家委托类的新实例创建新剪辑对象的任何时候调用，这相当于同一事物，因为后者是按前者执行。@overridebool shouldReclip(CustomClipper<Path> oldClipper) {// 实现应该重新剪辑(`shouldReclip`)方法。return true;}
}

然后我们可以开始画一条线，先感受一下裁剪的效果。

    // TODO：自定义的主要操作内容。// 路径（`Path`）类，平面的复杂一维子集，路径由许多子路径和当前点组成。// 子路径由各种类型的段组成，例如线、弧或贝塞尔曲线，子路径可以是打开或关闭的，并且可以自相交。var path = Path();// 线到（`lineTo`）方法，添加从当前点到给定点的直线段。// 起点变量。path.lineTo(0.0, size.height - 39.0);// 终点变量。path.lineTo(size.width, 0.0);path.close();return path;

下面可以看到红色容器组件被裁剪成了一个倒立的直角三角形。

然后我们再插入一条二次贝塞尔曲线，二次贝塞尔曲线是啥，就是PS里面画一条直线的时候，中间和两边都有可以拖动的小圆点，拖动那3个小圆点可以形成各种曲线，那个就叫二次贝塞尔曲线。

    // TODO：自定义的主要操作内容。// 路径（`Path`）类，平面的复杂一维子集，路径由许多子路径和当前点组成。// 子路径由各种类型的段组成，例如线、弧或贝塞尔曲线，子路径可以是打开或关闭的，并且可以自相交。var path = Path();// 线到（`lineTo`）方法，添加从当前点到给定点的直线段。// 起点变量。path.lineTo(0.0, size.height - 39.0);// 偏移（`Offset`）类，不可变的2D浮点偏移量。// 第一个控制点和第一点变量。var firstControlPoint = Offset(size.width / 4, size.height - 73.0);var firstPoint = Offset(size.width / 2, size.height - 73.0);// 二次贝塞尔曲（`quadraticBezierTo`）方法，// 使用控制点（x1，y1）添加从当前点到给定点（x2，y2）的二次贝塞尔曲线段。// 第一个中间曲线变量。path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,firstPoint.dx, firstPoint.dy);// 终点变量。path.lineTo(size.width, 0.0);path.close();return path;

下面可以看到，之前的倒立直角三角形已经变成一段二次贝塞尔曲线和直线的组成的一个特殊图形。

最后我们在后半段也添加一个二次贝塞尔曲线，与前半段遥相呼应、左右对称。

    // TODO：自定义的主要操作内容。// 路径（`Path`）类，平面的复杂一维子集，路径由许多子路径和当前点组成。// 子路径由各种类型的段组成，例如线、弧或贝塞尔曲线，子路径可以是打开或关闭的，并且可以自相交。var path = Path();// 线到（`lineTo`）方法，添加从当前点到给定点的直线段。// 起点变量。path.lineTo(0.0, size.height - 39.0);// 偏移（`Offset`）类，不可变的2D浮点偏移量。// 第一个控制点和第一点变量。var firstControlPoint = Offset(size.width / 4, size.height - 73.0);var firstPoint = Offset(size.width / 2, size.height - 73.0);// 二次贝塞尔曲（`quadraticBezierTo`）方法，// 使用控制点（x1，y1）添加从当前点到给定点（x2，y2）的二次贝塞尔曲线段。// 第一个中间曲线变量。path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,firstPoint.dx, firstPoint.dy);// 第二个控制点和第二点变量。var secondControlPoint =Offset(size.width - (size.width / 4), size.height - 73.0);// 第二个中间曲线变量。var secondPoint = Offset(size.width, size.height - 39.0);path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,secondPoint.dx, secondPoint.dy);// 终点变量。path.lineTo(size.width, 0.0);path.close();return path;

然后我们就可以看到一个曲线显现出来了，通过起点变量、第一个控制点与第一点变量（第一个二次贝塞尔曲线）、第二个控制点与第二点变量（第二个二次贝塞尔曲线）和终点变量，我们成功绘制了一个曲线裁剪。

当我们成功完成了自定义的曲线裁剪组件以后，我们可以通过下面的代码在任意页面使用它。

ClipPath(clipper: ArcClipper(),child: Container(color: Colors.red,height: 200.0,),
)

Flutter代码锦囊---自定义曲线裁剪相关推荐

Flutter代码锦囊---集中管理路由与导航
当一个Flutter项目的页面多来以后,页面跳来跳去的,开发者自己都会晕,所以需要用一个集中.灵活的方式去管理项目中所有页面的路由与导航. 通常我们是使用主页(home)属性设置应用程序的默认路由,即 ...
Flutter代码锦囊---切换时页面保持状态
一个正常的Flutter项目中,通过底部导航栏(BottomNavigationBar)或者标签栏(TabBar)组件来切换页面内容,是很正常的操作.但是大家是否有发现,每次导航栏或标签栏切换页面时, ...
Flutter代码锦囊---淘口令复制弹窗
对于淘系电商APP或其他类似的APP而言,获取剪贴板上的淘口令,再解析出具体的商品详情,是整个APP的核心业务操作,就像下面图片展示的这样. 下面我们就用Flutter实现这个功能,首先是前面一部分导 ...
Flutter代码锦囊---摇一摇
现在很多APP里面的会出现让用户拿起手机摇一摇的场景,除了最常见的微信.QQ等社交APP里面的摇一摇,我们在把APP给测试人员测试的时候,也经常要添加上摇一摇弹窗切换环境的场景,比如下面的场景. 所以 ...
Flutter代码锦囊---魔改进度条
Flutter框架提供了Material Design风格的线性进度条(LinearProgressIndicator)组件,就是下面的样子,方方正正的,一点也不圆润. 但是很多APP的设计都按照Ma ...
Flutter代码锦囊---根据环境选择URL地址
现在要给公司开发一个内部使用的APP,但是因为是小公司,没有多余的服务器资源,只能拿公司的主机当服务器,也只能在通过映射实现外网访问.所以呀,很蛋疼,只能想办法判断用户是在内网使用APP,还是在外网使 ...
Flutter布局锦囊---绑定手机页
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "顶部导航栏",标题+取消按钮+跳过按钮的应用栏. "手机号输入框",用于获取手机号码的圆角边框输入字 ...
Flutter布局锦囊---蜡笔画的表单
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "手机号输入框",使用自定义的登录表单字段组件实现的输入框. "验证码输入框",使用自定义的登录表单验 ...
【Flutter】自定义 Flutter 组件 ( 创建自定义 StatelessWidget、StatefulWidget 组件 | 调用自定义组件 )
文章目录一.Flutter 组件简介二.Flutter 自定义 StatelessWidget 组件流程 1.导入父类包 2.选择继承的父类 3.设置成员变量及构造函数 4.重写 build 方法 ...

Flutter代码锦囊---自定义曲线裁剪

Flutter代码锦囊---自定义曲线裁剪相关推荐

最新文章

热门文章