Widget与Element
- Widget实际上就是Element的配置数据,Widget树实际上是一个配置树,UI渲染树是由Element完成;Element是通过Widget生成,它们之间有对应关系,大多数场景下,可以认为Widget树就是UI控件树
- 一个Widget对象可以对应多个Element对象。根据同一份配置(Widget),可以创建多个实例(Element)。
StatelessWidget
用于不需要维护状态的场景,它通常在build方法中通过嵌套其它Widget来构建UI,在构建过程中会递归的构建其嵌套的Widget.
class Echo extends StatelessWidget {
const Echo({
Key key,
@required this.text,
this.backgroundColor: Colors.grey,
}) : super(key: key);
final String text;
final Color backgroundColor;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
color: backgroundColor,
child: Text(text),
),
),
);
}
}
Stateful Widget
- StatefulElement 继承自Element类,与StatefulWidget相对应(作为其配置数据)。StatefulElement中可多次调用createState()来创建State对象
- createState() 用于创建和Stateful widget相关的状态,可被多次调用。
State
一个StatefulWidget类会对应一个State类,State表示与其对应的StatefulWidget要维护的状态。
- State中的保存的状态信息
- build时可被同步读取
- 在widget生命周期中可以被改变,当State被改变时,调用其setState()方法通知Flutter framework状态发生改变,Flutter framework在收到消息后,会重新调用其build方法重新构建widget树,从而更新UI。
- State中有两个常用属性
- widget : 与该State关联的widget。注意,这种关联并非永久的,因为在应用生命周期中,UI树上的某一个节点的widget实例在重新构建时可能会变化,但State实例只会在第一次插入到树中时被创建,当在重新构建时,如果widget被修改了,Flutter framework会动态设置State.widget为新的widget实例。
- context : BuildContext类的一个实例,表示widget的上下文,是操作widget在树中位置的一个句柄,它包含了一些查找、遍历当前Widget树的方法。每一个widget都有一个自己的context对象。
State生命周期
- 打开路由
I/flutter ( 5436): initState
I/flutter ( 5436): didChangeDependencies
I/flutter ( 5436): build
- 在CounterWidget从widget树中移除时
I/flutter ( 5436): deactive
I/flutter ( 5436): dispose
- initState:当Widget第一次插入到Widget树时会被调用
- didChangeDependencies():当State对象的依赖发生变化时会被调用
- build(): 用于构建Widget子树的
- 调用initState()之后。
- 调用didUpdateWidget()之后
- 调用setState()之后
- 调用didChangeDependencies()之后
- 在State对象从树中一个位置移除后(会调用deactivate)又重新插入到树的其它位置之后
- reassemble():专门为了开发调试而提供的,在热重载时会被调用,Release模式下永远不会被调用。
- didUpdateWidget():在widget重新构建时,Flutter framework会调用Widget.canUpdate,如果canUpdate返回true调用该方法
- deactivate:当State对象从树中被移除时,会调用此回调。、
- dispose:当State对象从树中被永久移除时调用;通常在此回调中释放资源。
基础组件
- Text:一个带格式的文本。
- Row、 Column:水平(Row)和垂直(Column)方向上的布局。
- Stack:和Android中的FrameLayout相似,用 Positioned 来定位他们相对于Stack的上下左右四条边的位置。
- Container:创建矩形视觉元素。
Cupertino组件
Flutter也提供了一套丰富的Cupertino风格的组件,