Flutter ClipPath 自定义CustomClipper 玩转不一样的背景图案

优美的应用体验来自于细节的处理，更源自于码农的自我要求与努力，当然也需要码农年轻灵活的思维，不局限于思维，不局限语言限制，才是编程的最高境界。

本文章实现的效果如下图所示：

在Flutter工程项目中单文件启动：

void main() {//启动根目录runApp(MaterialApp(home: ClipperCard(),));
}

class ClipperCard extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(body: Center(//裁剪背景child: ClipPath(//定义裁切路径clipper: BackgroundClipper(),child: buildContainer(context),),),);}//一个普通的背景Container buildContainer(BuildContext context) {return Container(width: MediaQuery.of(context).size.width * 0.8,height: MediaQuery.of(context).size.width * 0.8 * 1.33,//背景装饰decoration: BoxDecoration(//线性渐变gradient: LinearGradient(//渐变使用到的颜色colors: [Colors.orange, Colors.deepOrangeAccent],//开始位置为右上角begin: Alignment.topRight,//结束位置为左下角end: Alignment.bottomLeft,),),);}
}

自定义的 BackgroundClipper 裁剪路径如下：

class BackgroundClipper extends CustomClipper<Path> {@overridePath getClip(Size size) {double roundnessFactor = 50.0;Path path = Path();//移动到A点path.moveTo(0, size.height * 0.33);//画直线到B点 同时也充当 下一个二阶贝塞尔曲线 的起点path.lineTo(0, size.height - roundnessFactor);//二阶贝塞尔曲线 只有一个控制点// 控制点 C (0, size.height)// 终点 D (roundnessFactor, size.height)path.quadraticBezierTo(0, size.height, roundnessFactor, size.height);//二阶贝塞尔曲线 只有一个控制点//画直线到 E点 同时也充当 二阶贝塞尔曲线 的起点path.lineTo(size.width - roundnessFactor, size.height);// 控制点 F (size.width, size.height)// 终点 G (size.width, size.height - roundnessFactor)path.quadraticBezierTo(size.width, size.height, size.width, size.height - roundnessFactor);//二阶贝塞尔曲线 只有一个控制点//画直线到 H 点 同时也充当 二阶贝塞尔曲线 的起点path.lineTo(size.width, roundnessFactor * 2);// 控制点 M 与 终点 Kpath.quadraticBezierTo(size.width - 10, roundnessFactor,size.width - roundnessFactor * 1.5, roundnessFactor * 1.5);//二阶贝塞尔曲线 只有一个控制点//画直线到 T点 同时也充当 二阶贝塞尔曲线 的起点path.lineTo(roundnessFactor * 0.6, size.height * 0.33 - roundnessFactor * 0.3);//控制点 W Zpath.quadraticBezierTo(0, size.height * 0.33, 0, size.height * 0.33 + roundnessFactor);return path;}@overridebool shouldReclip(CustomClipper<Path> oldClipper) {return true;}
}

使用了多个二阶贝塞尔曲线，点位分析如下：

二阶贝塞尔曲线 quadraticBezierTo 方法图示

三阶贝塞尔曲线 cubicTo

【x1】微信公众号的每日提醒随时随记每日积累随心而过文章底部扫码关注

【x2】各种系列的视频教程免费开源关注你不会迷路

【x3】系列文章百万 Demo 随时复制粘贴使用

【x4】简短的视频不一样的体验

【x5】必须有源码

不局限于思维，不局限语言限制，才是编程的最高境界。

以小编的性格，肯定是要录制一套视频的，随后会上传

有兴趣你可以关注一下西瓜视频 — 早起的年轻人

Flutter ClipPath 自定义CustomClipper 玩转不一样的背景图案相关推荐

Flutter 裁剪布局之 ClipRect、ClipRRect、ClipOval、ClipPath、CustomClipper
文章目录裁剪布局 ClipRect ClipRRect ClipOval ClipPath 及 CustomClipper 参考: Flutter 裁剪类组件最全总结 5.7 剪裁(Clip) 裁 ...
Flutter：使用 CustomClipper 绘制 N 角星
本文将向您展示如何使用Flutter 中的**CustomClipper类绘制n 角星**(5 角星.6 角星.10 角星.20 角星等).无需安装任何第三方软件包.我们将从头开始制作东西. 重点是什 ...
周末也需要学习分享一个 Flutter 波浪波动效果的登录页面的背景 Flutter ClipPath实现的波动
优美的应用体验来自于细节的处理,更源自于码农的自我要求与努力,当然也需要码农年轻灵活的思维,不局限于思维,不局限语言限制,才是编程的最高境界. 优美的音乐节奏带你浏览这个效果的编码过程坚持每一天, ...
在 Flutter 中自定义画笔 Painter
在 Flutter 中自定义画笔 Painter 前言今天我们将讨论定制 Painter,首先我们将看看什么时候使用定制 Painter,定制 Painter 是如何工作的,最后但并非最不重要的是, ...
Flutter APPbar 自定义icon
Flutter APPbar 自定义icon appBar: AppBar(title: Text("Home"),leading: Builder(builder: (Build ...
绝地求生自定义服务器租一天多少钱,绝地求生自定义服务器怎么玩绝地求生自定义服务器玩法解析...
绝地求生自定义服务器怎么玩,绝地求生自定义服务器是游戏中新上线的玩法模式,相信许多吃鸡玩家都非常好奇自定义模式的玩法,今天小编就为大家分享下绝地求生自定义服务器玩法解析. 绝地求生自定义服务器玩法解析 ...
绝地求生自定义服务器租一天多少钱,绝地求生自定义服务器怎么玩自定义服务器玩法一览...
绝地求生自定义服务器马上就要上线了,那么自定义服务器要怎么玩呢?下面小编就给大家带来自定义服务器的玩法讲解,对自定义服务器感兴趣的小伙伴一起来看看啊. 自定义服务器玩法一览为了让每位玩家可以创建自己 ...
自定义服务器怎么进去,绝地求生自定义服务器玩法介绍自定义服务器怎么玩...
绝地求生自定义服务器玩法介绍,自定义服务器马上就要上线了,相信不少玩家也是期待已久了,那么自定义服务器怎么玩呢?下面就来一起看下吧. 绝地求生自定义服务器玩法解析为了让每位玩家可以创建自己的游戏房间 ...
Flutter ScaleWidget 自定义刻度尺
Flutter ScaleWidget 自定义刻度尺目录话不多说,上图功能主要类.方法.属性使用最后目录之前做安Android一直想着自定义View,现在做Flutter了,那么咱们就 ...

Flutter ClipPath 自定义CustomClipper 玩转不一样的背景图案

Flutter ClipPath 自定义CustomClipper 玩转不一样的背景图案相关推荐

最新文章

热门文章