[移动开发]Flutter开发(六)：Flutter状态管理

1. StatelessWidget?

它是一个不需要状态更改的 widget ，它没有要管理的内部状态。

其中 AboutDialog 、CircleAvator 和 Text 是 StatelessWidget 的子类。

void main() {
  runApp(MyApp(myText:"My StatelessWidget"));
}

class MyApp extends StatelessWidget {
  final String myText;
  MyApp({Key? key, required this.myText}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        myText,
        textDirection: TextDirection.ltr,
      ),
    );
  }
}

2. StatefulWidget

它是可改变状态的 widget，使用 setState 方法管理?StatefulWidget 状态的改变。调用 setState 方法后，Flutter 会重新运行 build 方法，以便更新应用程序。

Checkbox，Radio，Slider，InkWell，Form，TextField 等都是 StatefulWidget 的子类。

声明一个?StatefulWidget ，需要用 createState() 方法。这个方法创建管理 widget 的状态对象。

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    //构建widget
    return Scaffold(
      appBar: AppBar(
        title: Text("标题"),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Container(
              color: Colors.red,
              width: 100.0,
              height: 100.0,
            ),
            Container(
              color: Colors.blue,
              width: 100.0,
              height: 100.0,
            ),
          ],
        ),
      ),
    );
  }
}

?

3. StatelessWidget 与 StatefulWidget 实践

两种 widget 实践：

当一个 widget 是无状态的，使用?StatelessWidget ；

当一个 widget 是有状态的，使用?StatefulWidget ；

如何判断有状态还是无状态：

如果用户交互或数据改变导致 widget 改变，那么它就是有状态的。

如果一个 widget 是最终或不可变的，那么它就是无状态的。

有状态的话，管理状态的三种方式：

每个 widget 管理自己的状态。

父 widget 管理 widget 的状态。

混合搭配管理的方法。

具体使用哪种方式，请参考以下：

状态是用户数据，如复选框，用父 widget 管理。

状态取决于动作，如动画， widget 管理自己的状态。

如果不确定，用父 widget 管理。

将?StatefulWidget 添加到 widget 树中，其中 MyHomePage 继承 StatefulWidget：

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}