Flutter實戰之畫布使用篇

JulyYu發表於2020-02-12
Flutter

自定義樣式

最近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的類物件。

  • 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)。

Flutter實戰之畫布使用篇

圓弧實現

繪製圓弧使用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,
             ),
           ),
         )
       ],
     ),
   ),
 ),
複製程式碼

最終效果

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

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

Demo程式碼地址

參考

相關文章