自定義樣式
最近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的類物件。
- paint方法通過canvas繪製內容,size獲取canvas大小。
- shouldRepaint判斷是否需要重繪。
class DemoPainter extends CustomPainter{
@override
void paint(Canvas canvas, Size size) {
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return null;
}
}
複製程式碼
圓弧計算
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) {
Paint paint = Paint();
paint.style = PaintingStyle.stroke;
paint.strokeWidth = 5;
paint.strokeCap = StrokeCap.round;
paint.color = Colors.white;
canvas.drawArc(
Rect.fromCircle(
center: Offset(size.width / 2, size.height / 2), radius: 70),
-240 * (pi / 180),
300 * (pi / 180),
false,
paint);
paint.strokeWidth = 2;
canvas.drawArc(
Rect.fromCircle(
center: Offset(size.width / 2, size.height / 2), radius: 65),
-240 * (pi / 180),
300 * (pi / 180),
false,
paint);
paint.strokeWidth = 1;
canvas.drawArc(
Rect.fromCircle(
center: Offset(size.width / 2, size.height / 2), radius: 60),
-240 * (pi / 180),
300 * (pi / 180),
false,
paint);
}
複製程式碼
另外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: <Widget>[
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 。你會驚喜的發現通過畫布實現圖表功能原來可以這麼酷炫。