Widgets 介绍

Flutter Widget采用现代响应式框架构建，这是从 React 中获得的灵感，中心思想是用widget构建你的UI。 Widget描述了他们的视图在给定其当前配置和状态时应该看起来像什么。当widget的状态发生变化时，widget会重新构建UI，Flutter会对比前后变化的不同， 以确定底层渲染树从一个状态转换到下一个状态所需的最小更改（译者语：类eact/Vue中虚拟DOM的diff算法似于R）。

import 'package:flutter/material.dart';
void main() {
  runApp(
    Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

runApp() 函数会持有传入的 Widget，并且使它成为 widget 树中的根节点

基础 widgets

Flutter 自带了一套强大的基础 widgets，下面列出了一些常用的：

• Text：Text widget 可以用来在应用内创建带样式的文本。
• Row, Column：这两个 flex widgets 可以让你在水平（Row）和垂直（Column）方向创建灵活的布局。它是基于 web 的 flexbox 布局模型设计的。
• Stack：Stack widget 不是线性（水平或垂直）定位的，而是按照绘制顺序将 widget 堆叠在一起。你可以用 Positionedwidget 作为 Stack 的子 widget，以相对于 Stack 的上，右，下，左来定位它们。Stack 是基于 Web 中的绝对位置布局模型设计的。
• Container： Container widget 可以用来创建一个可见的矩形元素。Container 可以使用 BoxDecoration 来进行装饰，如背景，边框，或阴影等。Container 还可以设置外边距、内边距和尺寸的约束条件等。另外，Container 可以使用矩阵在三维空间进行转换。

StatefulWidget和StatelessWidget区别

StatelessWidget是一个不需要状态更改的widget - 它没有要管理的内部状态。
当您描述的用户界面部分不依赖于对象本身中的配置信息以及widget的BuildContext 时，无状态widget非常有用。
AboutDialog, CircleAvatar和 Text 都是StatelessWidget的子类。

StatefulWidget是可变状态的widget。 需要在State类中使用setState方法管理StatefulWidget的状态的改变。调用setState告诉Flutter框架，某个状态发生了变化，Flutter会重新运行build方法，以便应用程序可以应用最新状态。

状态是在构建widget时可以同步读取的信息可能会在widget的生命周期中发生变化。确保在状态改变时及时通知状态 变化是widget实现者的责任。当widget可以动态更改时，需要使用StatefulWidget。 例如, 通过键入表单或移动滑块来更改widget的状态. 或者, 它可以随时间变化 - 或者数据推送更新UI
Checkbox, Radio, Slider, InkWell, Form, 和 TextField 都是有状态的widget，也是StatefulWidget的子类。

widget生命周期

构造函数 > initState > didChangeDependencies > Widget build

initState: 只调用一次, 初始化一些数据
didChangeDependencies：当State对象的依赖发生变化时会被调用
Build: 构建Widget子树的，调用次数：多次，初始化之后开始绘制界面，当setState触发的时候会再次被调用