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

发布于:2024-03-22 ⋅ 阅读:(47) ⋅ 点赞:(0)

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


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

10.1.1 组合多个Widget

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

10.1.2 通过CustomPaint自绘

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

10.1.3 通过RenderObject自绘

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

void paint(PaintingContext context, Offset offset)

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


网站公告

今日签到

点亮在社区的每一天
去签到