Flutter之StatefulWidget与StatelessWidget

Flutter中一切皆Widget

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

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

StatefulWidget和StatelessWidget是Widget的两个子类

StatelessWidget

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

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

StatefulWidget

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小白营”