Flutter数据可视化插件di_visualizer的使用
Flutter数据可视化插件di_visualizer的使用
info
di_visualizer
是一个用于可视化您的依赖注入(DI)关系的工具。
您可以使用 [@diService](/user/diService)
注解来标记您的类,并生成 UML 或 HTML 图表:
@startuml
node Service1
node Service2
node Util
node RepoUtil
node Repository1
node Repository2
Util -up-> Service1
Repository1 -up-> Service1
Util -up-> Service2
Repository2 -up-> Service2
RepoUtil -up-> Repository1
RepoUtil -up-> Repository2
@enduml
输出格式
使用 --format
参数来更改输出格式:
uml
html
运行
安装并运行 di_visualizer
命令从您的应用程序根目录开始:
di_visualizer di --directory example/ --output uml.txt --format html
然后您可以使用任何编辑器查看您的 UML 图表,例如:https://www.planttext.com/。
完整示例代码
以下是一个完整的示例代码,展示了如何使用 [@diService](/user/diService)
注解来标记类并生成图表。
import 'package:di_visualizer_annotation/di_visualizer_annotation.dart';
// 使用 [@diService](/user/diService) 注解标记服务类
[@diService](/user/diService)
class Service1 {
// 构造函数注入依赖
Service1(
this.util,
this.repository1,
);
// 定义依赖项
final Util util;
final Repository1 repository1;
}
[@diService](/user/diService)
class Service2 {
Service2(
this.util,
this.repository2,
);
final Util util;
final Repository2 repository2;
}
[@diService](/user/diService)
class Util {}
[@diService](/user/diService)
class RepoUtil {}
[@diService](/user/diService)
class AbandonedService {}
[@diService](/user/diService)
class Repository1 {
Repository1(this.repoUtil);
final RepoUtil repoUtil;
}
[@diService](/user/diService)
class Repository2 {
Repository2(this.repoUtil);
final RepoUtil repoUtil;
}
更多关于Flutter数据可视化插件di_visualizer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复