Flutter中的自定義View的基本流程和相關知識

這是我參與8月更文挑戰的第9天，活動詳情查看：8月更文挑戰

前言

咱們都知道官方有不少的Widget供咱們使用，但它提供的再多，也沒法知足產品和UI的需求， 固然，谷歌官方也確定想到了這一點，因此在flutter中，也是支持自定義View的。

在Flutter中與繪製相關的是在Painting層次，具體見下圖：

這張Flutter架構圖我相信你們確定在不一樣的文章中見過不少次了。

和Flutter自帶的Wdiget同樣，自定義的Widget也會通過Skia被編譯成原生代碼，因此性能上也是不受影響的。

自定義View的流程

1. 新建類繼承於CustomPainter實現paint（）和shouldRepaint（）方法
2. 在paint方法中繪製你想要的內容
3. 藉助於 CustomPaint Widget來構建本身的Widget

固然，上面僅僅是自定義的流程，具體的實現仍是有不少細節須要處理的。

與繪製相關的知識

學過前端或者終端開發的童鞋，應該對繪製都比較熟悉，繪製主要仍是靠畫布canvas和畫筆Paint和完成的，畫布就是你繪製圖形的地方，畫筆就是你用來做畫的筆。

畫布canvas

畫布是一個矩形區域，咱們能夠控制其每一像素來繪製咱們想要的內容

canvas 擁有多種繪製點、線、路徑、矩形、圓形、以及添加圖像的方法，結合這些方法咱們能夠繪製出變幻無窮的畫面。

雖然，畫布能夠畫這些東西，可是決定這些圖形顏色、粗細表現的仍是畫筆。

畫筆Paint

Paint很是好理解，就是咱們用來畫圖形的工具，咱們能夠設置畫筆的顏色、粗細、是否抗鋸齒、筆觸形狀以及做畫風格。

經過這些屬性咱們能夠很方便的來定製本身的UI效果，固然咱們在「做畫」的過程當中能夠定義多個畫筆，這樣更方便咱們對圖形的繪製

Paint _paint = Paint()
    ..color = Colors.blueAccent //畫筆顏色
    ..strokeCap = StrokeCap.round //畫筆筆觸類型
    ..isAntiAlias = true //是否啓動抗鋸齒
    ..blendMode = BlendMode.exclusion //顏色混合模式
    ..style = PaintingStyle.fill //繪畫風格，默認爲填充
    ..colorFilter = ColorFilter.mode(Colors.blueAccent,
        BlendMode.exclusion) //顏色渲染模式，通常是矩陣效果來改變的,可是flutter中只能使用顏色混合模式
    ..maskFilter =
    MaskFilter.blur(BlurStyle.inner, 3.0) //模糊遮罩效果，flutter中只有這個
    ..filterQuality = FilterQuality.high //顏色渲染模式的質量
    ..strokeWidth = 15.0 //畫筆的寬度
      ;
複製代碼

Offset座標

這個就比較簡單，通常指得是在座標系中的一個點。

Offset(dx, dy)
複製代碼

Rect

在圖形的繪製中，通常都是分區域繪製的，這個區域通常都是一個矩形，在繪製中一般使用Rect來存儲繪製的位置信息。

固然，你能夠指定Rect的上、下、左、右

• left ： 矩形左邊的X座標
• top: 矩形頂部的Y座標
• right : 矩形右邊的X座標
• bottom： 矩形底部的Y座標

使用你這四個值就能夠肯定這個矩形的位置和大小。

固然，在一些平臺還會有Rect.fromCircle（Offset center, double radius）這個方法來構建矩形，其實想起來也是很簡單的，center就是圓心的座標，radius就是圓的半徑，由這兩個屬性構成圓的外切矩形就是咱們須要的矩形。

Rect的多種構建方式：

fromPoints(Offset a, Offset b)
使用左上和右下角座標來肯定矩形的大小和位置

fromCircle({ Offset center, double radius })
使用圓的圓心點座標和半徑和肯定外切矩形的大小和位置

fromLTRB(double left, double top, double right, double bottom)
使用矩形左邊的X座標、矩形頂部的Y座標、矩形右邊的X座標、矩形底部的Y座標來肯定矩形的大小和位置

fromLTWH(double left, double top, double width, double height)
使用矩形左邊的X座標、矩形頂部的Y座標矩形的寬高來肯定矩形的大小和位置
複製代碼

Flutter中的座標系

在Flutter中座標系的座標原點在左上角，X座標越往右越大，Y座標越往下越大 由於在View自定義過程當中咱們須要排放多個View，因此弄清楚這一點，在之後自定義Wdiget中會輕鬆不少。

相關代碼