初识 Flutter 的绘图组件 — CustomPaint

岛上码农

于 2022-06-23 20:18:48 发布

阅读量633

点赞数 2

分类专栏： Flutter 绘图 Flutter 入门与实战文章标签： flutter android 前端 ios 跨平台开发

本文链接：https://blog.csdn.net/shuijian00/article/details/125434160

版权

Flutter 入门与实战同时被 2 个专栏收录

131 篇文章 56 订阅 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

Flutter 绘图

21 篇文章 2 订阅 ¥19.90 ¥99.00

订阅专栏

简介

在有些场景中，我们会需要绘制一些高度定制化的组件，比如 UI 设计师给我们出了个难题 —— 弄一个奇形怪状的边框。看在 UI 设计师是一个漂亮小姐姐的份上，又不好意思说这个做不了（那样也很没面子😂）。这个时候我们就不能直接使用 Flutter 自带的那些组件了，而是需要手动绘制组件，那就会需要用到 CuntomPaint 组件。CustomPaint 组件和前端的 Canvas差不多，允许我们在一个画布上绘制各种元素，包括点、线、矩形、圆弧、文字、图片等等。

CustomPaint 介绍

CustomPaint是一个 Widget，其中有三个重要的参数：

CustomPaint(
  child: childWidget(),
  foregroundPainter: foregroundPainter(),
  painter: backgroundPainter(),
)

child：CustomPaint的子组件；
painter和 foregroundPainter：都是 CustomPainter 类，用于定义 canvas 绘制的内容。区别在于，首先是执行 painter 的绘制指令。然后是在背景上渲染 child 子组件。最后，foregroundPainter 的内容会绘制