自定義畫布 Flutter小技巧之畫布使用

最近flutter專案新需求中需要實現圓弧樣式，如下圖所示：

在flutter自身ui元件中好像也沒有直接可用圓弧並帶缺口的元件。所以圓弧樣式就需要自己自定義繪製了。在flutter中同樣也有畫布功能用於開發者繪製自定義樣式。

畫布元件custompaint,繪製內容通過painter和foregroundpainter。painter繪製在child之前，foregroundpainter繪製在child之後，因此child內容覆蓋在painter上層，foregroundpainter內容覆蓋在child上層。

custompaint(
painter: canvaspainter(),
foregroundpainter: foregroundpainter(),
child: container(
height: 50,
decoration: boxdecoration(
border: border.all(color: colors.black, width: 5),
),child: text("我是custompaint的child"),
),),

繪製部分的實現由custompainter完成。首先建立乙個繼承custompainter的類物件。

class demopainter extends custompainter
@override
bool shouldrepaint(custompainter olddelegate) 
}

1度 = pi / 180，所以起始度數 = 度數 * pi / 180。

drawarc方法0度位置是在圓點水平位置左側正方向是順時針，所以圓弧繪製第乙個起始度數引數為-240度（-240 * (pi / 180)），已知0度位置並知道360度位置。-240度位置距離圓點垂直位置下方度數為30，缺口總共度數為60。因此第二個度數引數為 300 * (pi / 180)。

繪製圓弧使用drawarc方法，設定繪製圓形尺寸（圓心，半徑）、起始角度、圓弧角度、是否閉合。

@override
void paint(canvas canvas, size size)

另外custompainter還有child，可以通過stack將文字內容通過text居中顯示，當然ui中間文字和按鈕當然也可以用畫布繪製的方式實現，完整畫布**如下：

demopainter(
painter: canvaspainter(),
foregroundpainter: foregroundpainter(),
child: container(
height: 50,
decoration: boxdecoration(
border: border.all(color: colors.black, width: 5),
),child: stack(
children: [
text("我是custompaint的child"),
center(
child: text(
"96",
style: textstyle(
color: colors.white,
fontsize: 30,
fontweight: fontweight.bold,
),),)],
),),
),

這只是比較簡單的畫布應用，可以用畫布繪製、根據數學公式繪製更多圖形、文字和其他絢麗自定義樣式。canvas在不管是在前端、客戶端都是會有類似的使用場景，而且接觸多了之後會發現每個語言上封裝的介面和方法都很相似，因為在做android開發的時候也接觸過確實是大同小異，所以畫布其他具體功能不再展開。

最後的最後介紹兩個優秀的flutter圖表開源庫syncfusion flutter charts、flutter charting 。你會驚喜的發現通過畫布實現圖表功能原來可以這麼酷炫。

自定義畫布 Flutter小技巧之畫布使用

Flutter自定義字型

Powershell 自定義物件小技巧

SQL自定義排序小技巧

自定義畫布 Flutter小技巧之畫布使用

Flutter自定義字型

Powershell 自定義物件小技巧

SQL自定義排序小技巧

相關推薦