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

2022-04-25 426

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 最近启动了一个计划，要使用Flutter开发一个展示所有Flutter Widgets的APP。

在Flutter里展示思维脑图

在flutter pub和github里都苦搜无果，也可能我搜的关键词错了（见过Flutter展示脑图插件的朋友可以告诉我一下）。

总之我需要这么一个功能，在Flutter中绘制思维脑图。实在找不到，就只好自己做一个。

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

暂时只演示动态添加吧

学会原理自己画

在Painting and Effects这个类目下有个Widget叫CustmPaint。

这个Widget的主要参数是painter

新建一个继承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

画一个圆形

//方法1，通过圆心坐标和半径的值来绘制
canvas.drawCircle(Offset(0,0), 100, paint);
//方法2，给一个矩形区域添加50%边长的圆角，所以这个方法也能画椭圆
canvas.drawOval(Rect.fromLTRB(100, 100, 200, 200), paint);

画一个圆角矩形

canvas.drawRRect(RRect.fromLTRBR(100, 100, 200, 200, Radius.circular(10)), paint);

画线

var paint = Paint()
  ..isAntiAlias = true
  ..strokeWidth = 2 //线条宽度
  ..style = PaintingStyle.fill //填充
  ..color = Colors.black; //绘制颜色
canvas.drawLine(Offset(100,100), Offset(200,200), paint);

绘制文字

绘制文字要用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));