【Flutter学习笔记】10.1自定义组件方法简介

参考资料：《Flutter实战·第二版》 10.1 自定义组件方法简介

---

Flutter所提供的组件外观和功能有限，经常无法满足我们的需求，或者是我们需要封装复用一些组件时，就需要编写自定义组件。Flutter中自定义组件共有3种方法：组合其它组件、自绘和实现RenderObject。

10.1.1 组合多个Widget

这种方法是通过组合多个组件成一个新的组件，是较为常见的自定义组件方法。例如Container就是一个组合组件，其由DecoratedBox、ConstrainedBox、Transform、Padding、Align等组件组成。我们在开发的过程中，也是通过组合组件来实现的布局。

10.1.2 通过CustomPaint自绘

如果遇到无法通过现有组件来实现需要的UI时，需要通过自绘组件的方式实现。Flutter所提供的CircularProgressIndicator并不支持在显示精确进度时对进度条应用渐变色，这是就需要通过Flutter中提供的CustomPaint和Canvas来实现UI自绘。

10.1.3 通过RenderObject自绘

Flutter提供的自身具有UI外观的组件，如文本Text、Image都是通过相应的RenderObject渲染出来的，如Text是由RenderParagraph渲染；而Image是由RenderImage渲染。RenderObject是一个抽象类，它定义了一个抽象方法paint(...)：

void paint(PaintingContext context, Offset offset)

其中，PaintingContext是组件的绘制上下文，通过PaintingContext.canvas可获得Canvas对象，绘制逻辑是通过Canvas中的API实现的。子类需要重写这个方法来实现绘制逻辑，例如RenderParagraph需要实现文本绘制逻辑，而RenderImage需要实现图片绘制逻辑。 实现RenderObject： 也就是自定义组件 → RenderObject → paint()方法 → PaintingContext → Canvas的API → 自定义UI绘制 其与CustomPaint和Canvas自绘的方式不同，CustomPaint只是为了方便开发者封装的一个代理类，它直接继承自SingleChildRenderObjectWidget，通过RenderCustomPaint的paint()方法将Canvas和画笔Painter连接起来。