Flutter没有展示思维脑图的控件?用CustomPainter自己画!

3,115 阅读2分钟

前言

最近启动了一个计划,要使用Flutter开发一个展示所有Flutter Widgets的APP。前面写了爬虫可以从官网爬取并生成一个包含所有Widgets信息的JSON文件。

然后利用这个数据,我用XMind Zen绘制了一个Flutter Widgets Catalog的思维脑图,就是头图里展示的样子。

在Flutter里展示思维脑图

flutter pubgithub里都苦搜无果,也可能我搜的关键词错了(见过Flutter展示脑图插件的朋友可以告诉我一下)。总之我需要这么一个功能,在Flutter中绘制思维脑图。实在找不到,就只好自己做一个。

2021-03-17 22_38_09.gif

也可以在Flutter里制作思维脑图

暂时只演示动态添加吧

2021-03-17 23_05_06.gif

学会原理自己画

Painting and Effects这个类目下有个WidgetCustmPaint

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站直播日常生活。关注一下