Flutter学习笔记4（Widget）

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中的保存的状态信息

1. build时可被同步读取
2. 在widget生命周期中可以被改变，当State被改变时，调用其setState()方法通知Flutter framework状态发生改变，Flutter framework在收到消息后，会重新调用其build方法重新构建widget树，从而更新UI。

• State中有两个常用属性

1. widget : 与该State关联的widget。注意，这种关联并非永久的，因为在应用生命周期中，UI树上的某一个节点的widget实例在重新构建时可能会变化，但State实例只会在第一次插入到树中时被创建，当在重新构建时，如果widget被修改了，Flutter framework会动态设置State.widget为新的widget实例。
2. 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

1. initState：当Widget第一次插入到Widget树时会被调用
2. didChangeDependencies()：当State对象的依赖发生变化时会被调用
3. build(): 用于构建Widget子树的
   • 调用initState()之后。
   • 调用didUpdateWidget()之后
   • 调用setState()之后
   • 调用didChangeDependencies()之后
   • 在State对象从树中一个位置移除后（会调用deactivate）又重新插入到树的其它位置之后
4. reassemble()：专门为了开发调试而提供的，在热重载时会被调用，Release模式下永远不会被调用。
5. didUpdateWidget()：在widget重新构建时，Flutter framework会调用Widget.canUpdate，如果canUpdate返回true调用该方法
6. deactivate：当State对象从树中被移除时，会调用此回调。、
7. dispose：当State对象从树中被永久移除时调用；通常在此回调中释放资源。

基础组件

• Text：一个带格式的文本。
• Row、 Column：水平（Row）和垂直（Column）方向上的布局。
• Stack：和Android中的FrameLayout相似，用 Positioned 来定位他们相对于Stack的上下左右四条边的位置。
• Container：创建矩形视觉元素。

Cupertino组件

Flutter也提供了一套丰富的Cupertino风格的组件，