Flutter之StatefulWidget与StatelessWidget

jiezi

5 年前

Flutter 中一切皆 Widget

Widget 是组件视觉效果的封装，是 UI 界面的载体，而 build 方法则是 Flutter 框架构建 UI 界面的实现

在 build 方法中，通常会通过对基础 Widget 进行相应的 UI 配置，或是组合各类基础 Widget 的方式进行 UI 的定制化操作。

StatefulWidget 和 StatelessWidget 是 Widget 的两个子类

Flutter 中的 StatelessWidget 是一个不需要更改状态的 Widget，即 StatelessWidget 没有需要管理的内部状态，是一个无状态的 Widget

AboutDialog、CircleAvatar、Text 等都是 StatelessWidget 的子类

StatefulWidget 是可变状态的 Widget，即 StatefulWidget 依赖的数据在 Widget 生命周期中可能会频繁的发生变化。使用 setState 方法管理 StatefulWidget 的状态的改变

setState 方法是 Flutter 已数据驱动视图更新的关键函数，它会通知 Flutter 框架有状态发生了改变，而当 Flutter 框架收到通知后，会执行 Widget 的 build 方法，根据新的状态重建此 Widget

注意：状态的更改一定要配合使用 setState 方法。通过 setState 方法的调用，Flutter 会在底层标记 Widget 的状态，进而触发 Widget 重建

Widget 只是视图的“配置信息”，是数据的映射

在使用 Widget 时，该如何选择使用 StatefulWidget 还是 StatelessWidget 呢

在 Flutter 中，Widget 是有状态的还是无状态的，取决于他们依赖于状态的变化

有状态：用户交互或数据改变会导致 Widget 改变
无状态：一个 Widget 是最终态的或不可改变的

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue,),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ...
  @override
  Widget build(BuildContext context) {...}
}

从以上代码可以看出：StatelessWidget 中有一个 build 方法返回 Widget；而 StatefulWidget 中并没有一个 build 方法返回 Widget，而是多了一个 createState 方法返回_MyHomePageState 对象，而 build 方法则包含在_MyHomePageState 这个类中

已同步更新至微信公众号，欢迎关注“Android 小白营”