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

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

本文章实现的效果如下图所示:
在这里插入图片描述

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

void main() {
  //启动根目录
  runApp(MaterialApp(
    home: ClipperCard(),
  ));
}
class ClipperCard extends StatelessWidget {
  @override
  Widget 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> {
  @override
  Path 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 与 终点 K
    path.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 Z
    path.quadraticBezierTo(
        0, size.height * 0.33, 0, size.height * 0.33 + roundnessFactor);

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}

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

在这里插入图片描述

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

在这里插入图片描述
三阶贝塞尔曲线 cubicTo
在这里插入图片描述


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

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

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

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

【x5】必须有源码


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

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

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

在这里插入图片描述

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页