3、StatefulWidget和StatelessWidget

StatefulWidget和StatelessWidget是Flutter中所有Widget的两个分类，StatefulWidget的内部保存有状态，当状态发生改变时，Widget的界面也会随之改变（这点跟React类似）；StatelessWidget的内部没有保存状态，它的界面也不会发生改变。上面的代码中已经展示了定义一个无状态Widget的步骤：继承StatelessWidget并实现build方法即可。

如果是定义一个有状态的Widget，代码会稍微多一点，如下代码所示：

import 'package:flutter/material.dart';

void main() => runApp(new MyStatefulWidget());

// 定义一个有状态的组件
class MyStatefulWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new MyStatefulWidgetState();
  }
}

// 定义一个有状态的组件时，必须为该组件创建一个状态类，这个类继承自State类
class MyStatefulWidgetState extends State<MyStatefulWidget> {

  String text = "Click Me!";

  changeText() {
    if (text == "Click Me!") {
      setState(() {
        text = "Hello World!";
      });
    } else {
      setState(() {
        text = "Click Me!";
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "Test",
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Test"),
        ),
        body: new Center(
          // InkWell是Flutter内置的一个Widget，用于给其他Widget添加点击事件，并且在点击时会有水波纹扩散效果
          child: new InkWell(
            child: new Text(text),
            onTap: () {
              this.changeText();
            },
          ),
        ),
      ),
    );
  }
}

定义一个有状态的组件的步骤如下：

1. 创建类继承自StatefulWidget并实现createState方法，注意，这里跟StatelessWidget不同了，不是实现build方法。createState方法返回的是一个状态State。
2. 为了让第一步中的createState方法有返回值，还需要创建一个状态类继承自State类，State类是个泛型类，你需要将第一步中创建的类传给State。
3. 创建完自定义的State类后，实现build方法，并返回你所需要的Widget。
4. 在自定义的State类中，用变量保存组件的状态，并在合适的时候改变这个状态值。比如在上面的代码中，我们需要在点击文本时切换文本，所以用一个text变量保存组件的文本值，当点击按钮时，通过调用State组件的setState()方法，重新为text变量赋值，从而达到改变文本的目的。