https://plantuml.com/zh/starting
@startuml
abstract class Key{}
abstract class LocalKey extends Key{}
class UniqueKey extends LocalKey {}
class ObjectKey extends LocalKey {}
class ValueKey<T> extends LocalKey {}
abstract class GlobalKey<T extends State<StatefulWidget>> extends Key{}
class LabeledGlobalKey<T extends State<StatefulWidget>> extends GlobalKey {}
class GlobalObjectKey<T extends State<StatefulWidget>> extends GlobalKey {}
abstract class Widget extends DiagnosticableTree{
Widget({ this.key })
Key key
# Element createElement()
{static} bool canUpdate(Widget oldWidget, Widget newWidget)
}
abstract class StatelessWidget extends Widget{}
abstract class StatefulWidget extends Widget{}
abstract class ProxyWidget extends Widget{}
abstract class ParentDataWidget<T extends ParentData> extends ProxyWidget{}
abstract class InheritedWidget extends ProxyWidget{}
abstract class RenderObjectWidget extends Widget{
RenderObjectWidget({ Key key })
RenderObjectElement createElement()
# RenderObject createRenderObject(BuildContext context)
# void updateRenderObject(BuildContext context, covariant RenderObject renderObject)
# void didUnmountRenderObject(covariant RenderObject renderObject)
}
abstract class LeafRenderObjectWidget extends RenderObjectWidget{}
abstract class SingleChildRenderObjectWidget extends RenderObjectWidget{}
abstract class MultiChildRenderObjectWidget extends RenderObjectWidget{}
abstract class RenderObjectElement extends Element {}
abstract class RootRenderObjectElement extends RenderObjectElement{}
class LeafRenderObjectElement extends RenderObjectElement{}
class SingleChildRenderObjectElement extends RenderObjectElement{}
class MultiChildRenderObjectElement extends RenderObjectElement {}
abstract class Element extends DiagnosticableTree{}
@enduml
image.png
image.png
Widget 还有不重要的用于调试用的方法，主要值得关注的有两个方法：Element createElement() 和 bool canUpdate(Widget oldWidget, Widget newWidget)。
canUpdate 方法的作用是用于 Element 对象要更新 Widget 时，来判断是否可更新，Widget 是不可变对象，所以比较逻辑也比较简单，效率极高。
createElement 主要用于创建 Element 节点用，可以保证每个 Widget 都有一个对应的 Element。这个函数以及返回的类组成了 Widget 和 Element 的体系对应关系，后面会仔细拆解对应的关系。
image.png
RenderObject 有关的子类分支 RenderObjectWidget
通常情况下，Widget 树和 Element 树是完整的，和代码写的组合方式一一对应，但是 RenderObject 的类就不一定了，只有与渲染有关系的 Element 才会有对应的 RenderObject，所以 RenderObject 树的层次会简单很多，从类的设计上而言，只有 RenderObjectWidget 和 RenderObjectElement 的子类才会需要考虑 RenderObject 的问题。
RenderObjectWidget 里提供了管理 RenderObject 对象的方法：createRenderObject、updateRenderObject 和 didUnmountRenderObject。
在 RenderObjectWidget 这个类的分支里，考虑到了子节点数量的分类，所以有：叶子节点 LeafRenderObjectWidget、单子节点 SingleChildRenderObjectWidget、多子节点 MultiChildRenderObjectWidget。这里又暴露一个问题，这是一个比较完备的分类，但是还有其它同级的类 ConstrainedLayoutBuilder、ListWheelViewport、RenderObjectToWidgetAdapter、SliverWithKeepAliveWidget 和 Table。都有特定的适用场合和设计目的，暂时跳过。
image.png
UML中的关系主要分为六种：
- 关联(association)
- 聚合(aggregation)
- 组合(composition)
- 依赖(dependency)
- 泛化(generalization)/继承(inheritance)
- 实现(realization)
根据关系的紧密程度，由小到大顺序是：依赖->关联->聚合->组合
依赖关系
简单理解就是在某个方法里通过传参的方式用到了某个类，例如：
class ImageLoader{
loadImage(ImageInfo info)
}
class ImageInfo{
}
使用UML类图表示该关系：用实心箭头+虚线表示
在这里插入图片描述
PlantUML中的表示方法：ImageInfo <… ImageLoader :依赖关系
关联关系
简单理解就是类里面作为属性引用了另一个类，例如：
class Window {
-WindowManager mWindowManager
}
class WindowManager{
}
使用UML类图表示该关系：用实心箭头+实线表示
在这里插入图片描述
PlantUML中的表示方法：WindowManager <-- Window:关联关系
聚合关系
表示整体和部分，一个类属性使用列表保存很多个另一个类对象，例如：
class Company{
List<Department> mDepartments
}
class Department{
}
使用UML类图表示该关系：用空心菱形+实线表示
在这里插入图片描述
PlantUML中的表示方法：Company o-- Department:聚合关系
组合关系
相比聚合更加紧密的关系，生死与共，不能单独存在，例如：
class Bird{//小鸟
Wing mWing;//翅膀
}
class Wing{//翅膀
}
使用UML类图表示该关系：用实心菱形+实线表示
在这里插入图片描述
PlantUML中的表示方法：Bird *-- Wing:组合关系
泛化/继承关系
用来表示类之间的继承关系，例如：
abstract class Factory{
abstract makeProduct()
}
class PhoneFactory extends Factory{
}
class CarFactory extends Factory{
}
使用UML类图表示该关系：用空心箭头+实线表示
在这里插入图片描述
实现关系
用来表示一个类实现某个一个接口，例如：
interface IColorDraw{
draw()
}
class RedColorDraw{
draw()
}
class BlueColorDraw{
draw()
}
使用UML类图表示该关系：用空心箭头+虚线表示
在这里插入图片描述
PlantUML中的表示方法：IColorDraw <|… RedColorDraw:实现关系
完整的PlantUML表示：
在这里插入图片描述
@startuml
class ImageLoader{
loadImage(ImageInfo)
}
class ImageInfo{
}
ImageInfo <.. ImageLoader :依赖关系
class Window {
-WindowManager mWindowManager
}
class WindowManager
WindowManager <-- Window:关联关系
class Company
class Department
Company o-- Department:聚合关系
class Bird
class Wing
Bird *-- Wing:组合关系
abstract class Factory
class PhoneFactory
class CarFactory
Factory <|-- PhoneFactory:泛化关系
Factory <|-- CarFactory:也就是继承关系
interface IColorDraw{
draw()
}
class RedColorDraw{
draw()
}
class BlueColorDraw{
draw()
}
IColorDraw <|.. RedColorDraw:实现关系
IColorDraw <|.. BlueColorDraw:实现某个接口
@enduml
网友评论