Widget
在
Flutter中几乎所有的对象都是一个widget。比如用于手势检测的GestureDetector、用于APP主题数据传递的Theme等等，都是widget。widget的功能是“描述一个UI元素的配置信息”，非常轻量级，随时可以重绘。Widget是不可变的，Widget中定义的属性（即配置信息）必须是不可变的（final）Widget类本身是一个抽象类，我们一般都不用直接继承Widget类来实现一个新组件。我们通常会通过继承
StatelessWidget或StatefulWidget来间接继承widget类。
4颗树
-
widget是配置信息，会形成一颗widget树，非常轻量级，不可变，随时会重绘。
-
- 根据
Widget树生成一个Element树，Element树中的节点都继承自Element类。这是一颗中间树，用于过渡。
- 根据
- 根据
Element树生成Render树（渲染树），渲染树中的节点都继承自RenderObject类。这个负责具体的绘制，比较重量级。使用差量法，尽量减少重绘。
- 根据
- 根据渲染树生成
Layer树，然后上屏显示，Layer树中的节点都继承自Layer类。这颗树跟GPU有关，一般由Engine层负责。
- 根据渲染树生成
image.png
三棵树中，
Widget和Element是一一对应的，但并不和RenderObject一一对应。比如StatelessWidget和StatefulWidget都没有对应的RenderObject
StatefulWidget
- 能保留状态的原因是增加了一个
state类。
abstract class StatefulWidget extends Widget {
const StatefulWidget({ Key key }) : super(key: key);
@override
StatefulElement createElement() => StatefulElement(this);
@protected
State createState();
}
-
widget，它表示与该State实例关联的widget实例，由Flutter框架动态设置。注意，这种关联并非永久的，因为在应用生命周期中，UI树上的某一个节点的widget实例在重新构建时可能会变化，但State实例只会在第一次插入到树中时被创建，当在重新构建时，如果widget被修改了，Flutter框架会动态设置State.widget为新的widget实例。
widget经常变，但是State一直是同一个，所以能保持状态。
-
State生命周期
image.png
initState只执行一次；build经常执行; 对应的Widget经常变；
通过Context获取State对象
一般会提供一个
of方法对外暴露state，这是一种约定俗成的习惯。通过
state可以实现动态界面。
Builder(builder: (context) {
return ElevatedButton(
onPressed: () {
// 直接通过of静态方法来获取ScaffoldState
ScaffoldState _state=Scaffold.of(context);
// 打开抽屉菜单
_state.openDrawer();
},
child: Text('打开抽屉菜单2'),
);
}),
通过GlobalKey获取State对象
- 给目标
StatefulWidget添加GlobalKey。
//定义一个globalKey, 由于GlobalKey要保持全局唯一性，我们使用静态变量存储
static GlobalKey<ScaffoldState> _globalKey= GlobalKey();
...
Scaffold(
key: _globalKey , //设置key
...
)
- 通过
GlobalKey来获取State对象
_globalKey.currentState.openDrawer()
通过 RenderObject 自定义 Widget
-
Flutter最原始的定义组件的方式就是通过定义RenderObject来实现，而StatelessWidget和StatefulWidget只是提供的两个帮助类。
类似原生开发的画界面，就要通过
RenderObject实现
用来继承的类分为三种：
LeafRenderObjectWidget，SingleChildRenderObjectWidget，MultiChildRenderObjectWidget大概的样子
class CustomWidget extends LeafRenderObjectWidget{
@override
RenderObject createRenderObject(BuildContext context) {
// 创建 RenderObject
return RenderCustomObject();
}
@override
void updateRenderObject(BuildContext context, RenderCustomObject renderObject) {
// 更新 RenderObject
super.updateRenderObject(context, renderObject);
}
}
class RenderCustomObject extends RenderBox{
@override
void performLayout() {
// 实现布局逻辑
}
@override
void paint(PaintingContext context, Offset offset) {
// 实现绘制
}
}
