Flutter沒有展示思維腦圖的控制元件？用CustomPainter自己畫！

大帥老猿發表於2021-03-17
Flutter控制元件AI

前言

最近啟動了一個計劃，要使用Flutter開發一個展示所有Flutter Widgets的APP。前面寫了爬蟲可以從官網爬取並生成一個包含所有Widgets資訊的JSON檔案。

然後利用這個資料，我用XMind Zen繪製了一個Flutter Widgets Catalog的思維腦圖，就是頭圖裡展示的樣子。

在Flutter裡展示思維腦圖

在flutter pub和github裡都苦搜無果，也可能我搜的關鍵詞錯了（見過Flutter展示腦圖外掛的朋友可以告訴我一下）。總之我需要這麼一個功能，在Flutter中繪製思維腦圖。實在找不到，就只好自己做一個。

2021-03-17 22_38_09.gif

也可以在Flutter裡製作思維腦圖

暫時只演示動態新增吧

2021-03-17 23_05_06.gif

學會原理自己畫

在Painting and Effects這個類目下有個Widget叫CustmPaint。

image.png

這個Widget的主要引數是painter

image.png

新建一個繼承CustomPainter類的類

CustomPainter提供的API相當豐富，本文僅列舉我在繪製思維腦圖中使用到的幾個API

class MyPainter extends CustomPainter{

  @override
  void paint(Canvas canvas, Size size) {
     //在這裡編寫繪製的程式碼
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // 畫布是否需要重繪，false的話，則第一次繪製結束後不可再改變
    return false;
  }
}
複製程式碼

繪製設定

var paint = Paint()
  ..isAntiAlias = true //抗鋸齒
  ..style = PaintingStyle.fill //fill填充,stroke線框
  ..color = Colors.yellow; //顏色
複製程式碼

畫一個矩形

//這裡要注意，和我們常見的給x,y,width,height不一樣，後面兩個值分別是Right，Bottom
canvas.drawRect(Rect.fromLTRB(100, 100, 200, 200), paint);
複製程式碼

這個矩形的x=100,y=100,width=100,height=100

image.png

畫一個圓形

//方法1，通過圓心座標和半徑的值來繪製
canvas.drawCircle(Offset(0,0), 100, paint);

//方法2，給一個矩形區域新增50%邊長的圓角，所以這個方法也能畫橢圓
canvas.drawOval(Rect.fromLTRB(100, 100, 200, 200), paint);
複製程式碼

image.png

畫一個圓角矩形

canvas.drawRRect(RRect.fromLTRBR(100, 100, 200, 200, Radius.circular(10)), paint);
複製程式碼

image.png

畫線

var paint = Paint()
  ..isAntiAlias = true
  ..strokeWidth = 2 //線條寬度
  ..style = PaintingStyle.fill //填充
  ..color = Colors.black; //繪製顏色

canvas.drawLine(Offset(100,100), Offset(200,200), paint);
複製程式碼

image.png

繪製文字

繪製文字要用TextPainter+TextSpan

TextSpan textSpan = new TextSpan(style: new TextStyle(fontSize: 20,color: Colors.red), text: "測試文字");
TextPainter tp = new TextPainter(
    text: textSpan,
    textAlign: TextAlign.center,
    textDirection: TextDirection.ltr
);
//根據設定的引數進行佈局
tp.layout();

//將文字textPainter的內容放到畫布的指定座標上
tp.paint(canvas, new Offset(100, 100));
複製程式碼

image.png

原始碼倉庫

繼續按計劃進行APP的開發和教程的編寫及錄製 github.com/ezshine/Flu…

關注大帥

一個熱愛程式設計的老程式猿，內容皆為原創，在B站直播日常生活。關注一下

相關文章