物类之起,必有所始。荣辱之来,必象其德。
前言
前面一章简单的介绍了Widget类,这一章主要介绍一下StatelessWidget和StatefulWidget,两者都是继承Widget。
正文
- StatelessWidget
StatelessWidget相对比较简单,用于不需要维护状态的场景(初始化后不需要改变UI),它通常在build方法中通过嵌套其它 widget来构建UI,在构建过程中会递归的构建其嵌套的 widget 。其类的定义如下:
abstract class StatelessWidget extends Widget {
const StatelessWidget({ Key? key }) : super(key: key);
/// Creates a [StatelessElement] to manage this widget's location in the tree.
///
/// It is uncommon for subclasses to override this method.
@override
StatelessElement createElement() => StatelessElement(this);
@protected
Widget build(BuildContext context);
}
重写了createElement()方法,StatelessElement间接继承自Element类,与StatelessWidget相对应(作为其配置数据)。
举个栗子:
class StatelessPage extends StatelessWidget {
const StatelessPage({
Key? key,
required this.content,
required this.backgroudColor,
}) : super(key: key);
final String content;
final Color backgroudColor;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(content),
),
body: Center(
child: Container(
height: 50,
alignment: Alignment.center,
color: backgroudColor,
child: Text(content),
),
),
);
}
}
这是一个简单的页面,有2个必传的构造属性(content、backgroudColor),导航title是传进来的content。页面的中间有个组件,组件是个高50,子控件居中,背景颜色是传进来的颜色,子组件是Text,内容是传进来的content。
注意:构造参数要用
final修饰,前面说过flutter刷新机制,属性变了,这个Widget就不是本身的了。另外的,如果是必传的要加required,可选的用?修饰即可。
构造方法
StatelessPage(content: '我的StatelessWidget', backgroudColor: Colors.yellow)
效果如图1:

- StatefulWidget
和StatelessWidget相比,StatefulWidget添加了一个新的接口createState()。其类定义如下:
abstract class StatefulWidget extends Widget {
const StatefulWidget({ Key key }) : super(key: key);
@override
StatefulElement createElement() => StatefulElement(this);
@protected
State createState();
}
StatefulElement间接继承自Element类,与StatefulWidget相对应(作为其配置数据)。StatefulElement中可能会多次调用createState()来创建状态(State)对象。createState()用于创建和StatefulWidget相关的状态,它在StatefulWidget的生命周期中可能会被多次调用。例如,当一个StatefulWidget同时插入到widget树的多个位置时,Flutter 框架就会调用该方法为每一个位置生成一个独立的State实例,其实,本质上就是一个StatefulElement对应一个State实例。
不好理解可以跳过,写段时间再回头看。下面详细介绍一下State。
一个StatefulWidget 类会对应一个 State类,State表示与其对应的 StatefulWidget要维护的状态,State中的保存的状态信息可以:
- 在
Widget构建时可以被同步读取。 - 在
Widget生命周期中可以被改变,当State被改变时,可以手动调用其setState()方法通知Flutter 框架状态发生改变,Flutter 框架在收到消息后,会重新调用其build方法重新构建 widget 树,从而达到更新UI的目的。
State 中有两个常用属性:
widget,它表示与该 State 实例关联的 widget 实例,由Flutter 框架动态设置。注意,这种关联并非永久的,因为在应用生命周期中,UI树上的某一个节点的 widget 实例在重新构建时可能会变化,但State实例只会在第一次插入到树中时被创建,当在重新构建时,如果 widget 被修改了,Flutter 框架会动态设置State. widget 为新的 widget 实例。context。StatefulWidget对应的BuildContext,作用同StatelessWidget的BuildContext。
state生命周期:
理解State的生命周期对flutter开发非常重要,如果想看详细的请参见 state生命周期,我这里对生命周期主要方法总结一下:
1、
initState():当 widget 第一次插入到 widget 树时会被调用,对于每一个State对象,Flutter 框架只会调用一次该回调。2、
didChangeDependencies():当State对象的依赖发生变化时会被调用;3、
build():主要是用于构建 widget 子树的,会在如下场景被调用:
1、在调用
initState()之后。
2、在调用didUpdateWidget()之后。
3、在调用setState()之后。
4、在调用didChangeDependencies()之后。
5、在State对象从树中一个位置移除后(会调用deactivate)又重新插入到树的其它位置之后。
- 4、
reassemble():此回调是专门为了开发调试而提供的,在热重载(hot reload)时会被调用,此回调在Release模式下永远不会被调用。 - 5、
didUpdateWidget ():在新旧 widget 的key和runtimeType同时相等时didUpdateWidget()就会被调用。 - 6、
deactivate():当 State 对象从树中被移除时,会调用此回调; - 7、
dispose():当 State 对象从树中被永久移除时调用;通常在此回调中释放资源;
StatefulWidget 生命周期图2

小结
前期开发记住几点就行了:
1、先走initState(),后走build();
2、所有的UI构建要放在build()里面;
3、刷新UI直接调用setState();
4、回收垃圾在dispose()。
总结
- Q:什么时候使用
StatelessWidget和StatefulWidget?
A:如果一个UI在初始化之后就不用更新,那就使用StatelessWidget,反之StatefulWidget。- Q:既然都是Widget,啥是VC,啥是view?
A:StatelessWidget、StatefulWidget的build方法里面,如果第一子节点是Scaffold(带有appBar、body、bottomNavigationBar这种的),那就可以理解为这个页面是VC,反之可以理解为view。- Q:iOS中的self在Flutter中是啥?
A:首字母小写的widget。