无状态StatelessWidget,有状态StatefulWi

在 Flutter 中一切的显示都是 Widget ，Widget 是一切的基础，利用响应式模式进行渲染。
Widget 分为 有状态 和 无状态 两种，在 Flutter 中每个页面都是一帧，无状态就是保持在那一帧，而有状态的 Widget 当数据更新时，其实是创建了新的 Widget(View)，只是 State 实现了跨帧的数据同步保存。
如果一个控件需要动态的去改变或者相应一些状态，例如点击态、色值、内容区域等，那么一般都是继承自StatefulWidget，常见的有CheckBox、AppBar、TabBar等。其实单纯的从名字也可以看出这两种widget的区别，这两种widget都是继承自Widget类。

无状态StatelessWidget

• 继承 StatelessWidget，通过 build 方法返回一个布局好的控件
• Widget 和 Widget 之间通过 child: 进行嵌套。> 其中有的 Widget 只能有一个 child，

比如下方的 Container ；有的 Widget 可以多个 child ，也就是children，比如` Column 布局，下方代码便是 Container Widget 嵌套了 Text Widget。

import 'package:flutter/material.dart';

class DEMOWidget extends StatelessWidget {
  final String text;
  //数据可以通过构造方法传递进来
  DEMOWidget(this.text);
  @override
  Widget build(BuildContext context) {
    //这里返回你需要的控件
    //这里末尾有没有的逗号，对于格式化代码而已是不一样的。
    return Container(
      //白色背景
      color: Colors.white,
      //Dart语法中，?? 表示如果text为空，就返回尾号后的内容。
      child: Text(text ?? "这就是无状态DMEO"),
    );
  }
}

有状态StatefulWidget

主要是 State ， 通过 State 的 build 方法去构建控件。在 State 中，你可以动态改变数据，在 setState 之后，改变的数据会触发 Widget 重新构建刷新，而下方代码中，是通过延两秒之后，让文本显示为 "这就变了数值"。
如下代码还可以看出，State 中主要的声明周期有 ：

initState ：初始化，理论上只有初始化一次，第二篇中会说特殊情况下。
didChangeDependencies：在 initState 之后调用，此时可以获取其他 State 。
dispose ：销毁，只会调用一次。

import 'dart:async';
import 'package:flutter/material.dart';
class DemoStateWidget extends StatefulWidget {
  final String text;
  ////通过构造方法传值
  DemoStateWidget(this.text);
  ///主要是负责创建state
  @override
  _DemoStateWidgetState createState() => _DemoStateWidgetState(text);
}
class _DemoStateWidgetState extends State<DemoStateWidget> {

  String text;

  _DemoStateWidgetState(this.text);
  
  @override
  void initState() {
    ///初始化，这个函数在生命周期中只调用一次
    super.initState();
    ///定时1秒
    new Future.delayed(const Duration(seconds: 1), () {
      setState(() {
        text = "这就变了数值";
      });
    });
  }

  @override
  void dispose() {
    ///销毁
    super.dispose();
  }

  @override
  void didChangeDependencies() {
    ///在initState之后调 Called when a dependency of this [State] object changes.
    super.didChangeDependencies();
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(text ?? "这就是有状态DMEO"),
    );
  }
}