效果图
StatefulWidget 及 State
- 可变状态的 Widget
- 创建 State 对象
- 多生命周期
StatefulWidget の Demo
每点击文本一次,body文本中就会多一次‘赞’
// main.dart import 'package:flutter/material.dart'; import 'stateful.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData.light(), home: MyStatefulApp("Vava熊の一天") ); } }
//stateful.dart import 'package:flutter/material.dart'; class MyStatefulApp extends StatefulWidget { String content; MyStatefulApp(this.content); @override State<StatefulWidget> createState() { return MyStatefulAppState(); } } class MyStatefulAppState extends State<MyStatefulApp> { bool isShowText =true; void increment(){ setState(() { widget.content += "赞"; }); } //build() 方法在 didChangeDependencies()(或者 didUpdateWidget() )之后调用 @override Widget build(BuildContext context) { return Scaffold( appBar:AppBar( title: Text('StatefulWidget及State'), ), body:Center( child: GestureDetector( child: isShowText? Text(widget.content) :null, onTap: increment, ) ) ); } //-------only 生命周期 log------------ //创建 State 对象后要调用的第一个方法 @override void initState() { super.initState(); print("initState"); context.runtimeType; } @override void didChangeDependencies() { super.didChangeDependencies(); print("didChangeDependencies"); } //runtimeType 和 Widget.key 都一样,那么就会调用 didUpdateWidget()。 @override void didUpdateWidget(MyStatefulApp oldWidget) { super.didUpdateWidget(oldWidget); print("didUpdateWidget"); } // StaefulWidget 从树中移除时 @override void dispose() { super.dispose(); print("dispose"); } //执行 HotReload,就会触发 reassemble(),这提供了重新初始化在 initState() 方法中准备的任何数据的机会,包括全局变量。 @override void reassemble() { super.reassemble(); print("reassemble"); } }
效果图
State 的生命周期
在上面的例子中,除了效果外,我们也看到了关于生命周期的备注信息。
// 控制台日志 // 1.第一次 | 新打开 .... Restarted application in 1,153ms. flutter: initState flutter: didChangeDependencies flutter: reassemble flutter: didUpdateWidget ... // 2.我们点击⚡️按钮热重载 ... Syncing files to device iPhone Xʀ... flutter: reassemble flutter: didUpdateWidget ... // 3. 移除 widget ... flutter: reassemble flutter: dispose Reloaded 2 of 442 libraries in 117ms. ...
盗图小结
葵花宝典:如果 UI 需要改变,就用 StatefulWidget。不需要改变,就用 StatelessWidget。
写在最后の总结
Widget 特点
- 一切皆 Widget
- UI的配置信息
- 一次性的
- 轻量的
Widget 应用
Widget 众多,需要开发者们更多地实践与性能的关注。