當(dāng) Flutter 提供的現(xiàn)有組件無(wú)法滿足我們的需求，或者我們?yōu)榱斯蚕泶a需要封裝一些通用組件，這時(shí)我們就需要自定義組件。在 Flutter 中自定義組件有三種方式：通過(guò)組合其它組件、自繪和實(shí)現(xiàn) RenderObject。本節(jié)我們先分別介紹一下這三種方式的特點(diǎn)，后面章節(jié)中則詳細(xì)介紹它們的細(xì)節(jié)。

#組合其它Widget

這種方式是通過(guò)拼裝其它組件來(lái)組合成一個(gè)新的組件。例如我們之前介紹的Container就是一個(gè)組合組件，它是由DecoratedBox、ConstrainedBox、Transform、Padding、Align等組件組成。

在 Flutter 中，組合的思想非常重要，F(xiàn)lutter 提供了非常多的基礎(chǔ)組件，而我們的界面開發(fā)其實(shí)就是按照需要組合這些組件來(lái)實(shí)現(xiàn)各種不同的布局而已。

#自繪

如果遇到無(wú)法通過(guò)現(xiàn)有的組件來(lái)實(shí)現(xiàn)需要的 UI 時(shí)，我們可以通過(guò)自繪組件的方式來(lái)實(shí)現(xiàn)，例如我們需要一個(gè)顏色漸變的圓形進(jìn)度條，而 Flutter 提供的CircularProgressIndicator并不支持在顯示精確進(jìn)度時(shí)對(duì)進(jìn)度條應(yīng)用漸變色（其valueColor 屬性只支持執(zhí)行旋轉(zhuǎn)動(dòng)畫時(shí)變化 Indicator 的顏色），這時(shí)最好的方法就是通過(guò)自定義組件來(lái)繪制出我們期望的外觀。我們可以通過(guò) Flutter 中提供的CustomPaint和Canvas來(lái)實(shí)現(xiàn) UI 自繪。

#實(shí)現(xiàn)RenderObject

Flutter 提供的自身具有 UI 外觀的組件，如文本Text、Image都是通過(guò)相應(yīng)的RenderObject（我們將在“Flutter 核心原理”一章中詳細(xì)介紹RenderObject）渲染出來(lái)的，如 Text 是由RenderParagraph渲染；而Image是由RenderImage渲染。RenderObject是一個(gè)抽象類，它定義了一個(gè)抽象方法paint(...)：

void paint(PaintingContext context, Offset offset)

PaintingContext代表組件的繪制上下文，通過(guò)PaintingContext.canvas可以獲得Canvas，而繪制邏輯主要是通過(guò)Canvas API 來(lái)實(shí)現(xiàn)。子類需要重寫此方法以實(shí)現(xiàn)自身的繪制邏輯，如RenderParagraph需要實(shí)現(xiàn)文本繪制邏輯，而RenderImage需要實(shí)現(xiàn)圖片繪制邏輯。

可以發(fā)現(xiàn)，RenderObject中最終也是通過(guò)Canvas API來(lái)繪制的，那么通過(guò)實(shí)現(xiàn)RenderObject的方式和上面介紹的通過(guò)CustomPaint和Canvas自繪的方式有什么區(qū)別？其實(shí)答案很簡(jiǎn)單，CustomPaint只是為了方便開發(fā)者封裝的一個(gè)代理類，它直接繼承自SingleChildRenderObjectWidget，通過(guò)RenderCustomPaint的paint方法將Canvas和畫筆Painter(需要開發(fā)者實(shí)現(xiàn)，后面章節(jié)介紹)連接起來(lái)實(shí)現(xiàn)了最終的繪制（繪制邏輯在Painter中）。

#總結(jié)

“組合”是自定義組件最簡(jiǎn)單的方法，在任何需要自定義組件的場(chǎng)景下，我們都應(yīng)該優(yōu)先考慮是否能夠通過(guò)組合來(lái)實(shí)現(xiàn)。而自繪和通過(guò)實(shí)現(xiàn)RenderObject的方法本質(zhì)上是一樣的，都需要開發(fā)者調(diào)用Canvas API 手動(dòng)去繪制 UI，優(yōu)點(diǎn)是強(qiáng)大靈活，理論上可以實(shí)現(xiàn)任何外觀的 UI，而缺點(diǎn)是必須了解Canvas API細(xì)節(jié)，并且得自己去實(shí)現(xiàn)繪制邏輯。

在本章接下來(lái)的小節(jié)中，我們將通過(guò)一些實(shí)例來(lái)詳細(xì)介紹自定義 UI 的過(guò)程，由于后兩種方法本質(zhì)是相同的，并且 Flutter 中很多基礎(chǔ)組件都是通過(guò)RenderObject的形式來(lái)實(shí)現(xiàn)的，所以后續(xù)我們只介紹CustomPaint和Canvas的方式，讀者如果對(duì)自定義RenderObject的方法好奇，可以查看 Flutter 中相關(guān)基礎(chǔ)組件對(duì)應(yīng)的RenderObject的實(shí)現(xiàn)源碼，如RenderParagraph或RenderImage。