重学flutter第三天下-StatefulWidget的使用（未完待续）

上篇文章介绍了StatelessWidget的使用，这篇文章介绍一下StatefulWidget的使用，类似React的有状态的组件，使用StatefulWidget组件分为两步：

1、声明的组件继承StatefulWidget，重载 createState函数，返回State数据类型泛型为StatefulWidget，createState函数内部返回state组件。

2、生命State组件继承State泛型为MyApp，这个State组件才是真正的组件，内部可以定义方法，属性，重载build函数，并绑定方法。

代码如下：

import 'package:flutter/material.dart';

void main() => runApp(MyApp("Hello World"));

class MyApp extends StatefulWidget {
  // This widget is the root of your application.

  String content;

  MyApp(this.content);

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {

  bool isShowText =true;

  void increment(){
    setState(() {
      widget.content += "d";
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
          appBar: AppBar(title: Text("Widget -- StatefulWidget及State"),),
          body: Center(
              child: GestureDetector(
                child: isShowText? Text(widget.content) :null,
                onTap: increment,
              )
          ),
        )
    );
  }
}

观察代码MyApp组件内部只是定义了state即content，并重载了createState，createState内部返回了MyAppState。

而MyAppState组件继承了State，State的泛型为MyApp，内部重载了build。

MyApp和MyAppState犬牙交错，互相咬合构成了StatefulWidget，MyApp的createState返回MyAppState，MyAppState继承泛型为MyApp的state。

MyApp的简化代码如下：

class MyApp extends StatefulWidget {
  // This widget is the root of your application.

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return MyAppState("Hello World");
  }
}

class MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return ...
  }
 
}

仔细观察主要由两部分构成：StatefulWidget和State。