StatelessWidget:无状态部件的生命周期
import 'package:flutter/material.dart';
void main() {
runApp(App());
}
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(title: 'MyHome'),
);
}
}
class MyHomePage extends StatelessWidget {
final String? title;
MyHomePage({this.title}) {
print('MyHomePage:构造函数被调用了');
}
@override
Widget build(BuildContext context) {
print('build:被调用了');
return Center(
child: Text(title!),
);
}
}
// 执行顺序:MyHomePage:构造函数被调用了 -> build:被调用了
StatefulWidget:有状态部件的生命周期
import 'package:flutter/material.dart';
void main() {
runApp(App());
}
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(title: 'MyHome'),
);
}
}
class MyHomePage extends StatefulWidget {
final String? title;
MyHomePage({this.title}) {
print('Widget:构造函数被调用');
}
@override
State<MyHomePage> createState(){
print('createState:被调用');
return _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePage> {
// 这个方法一般忽略不写
_MyHomePageState(){
print('State 的 _MyHomePageState:构造函数被调用');
}
@override
void initState() {
print('State 的 initState:被调用');
super.initState();
}
@override
void didChangeDependencies() {
print('didChangeDependencies:被调用(改变依赖关系)');
super.didChangeDependencies();
}
@override
Widget build(BuildContext context) {
print('build:被调用');
return Center(
child: Text(widget.title!),
);
}
@override
void dispose() {
print('State 的 dispose:销毁被调用');
super.dispose();
}
}
// 执行顺序:
Widget:构造函数被调用
createState:被调用
State 的 _MyHomePageState:构造函数被调用
State 的 initState:被调用
didChangeDependencies:被调用(改变依赖关系) // 下一篇文章会配合:InheritedWidget数据共享,一起使用
build:被调用
当离开页面
当Widget销毁时:State 的 dispose:被调用
// 如果在有状态的组件中 更新数据,需要调用:setState会重新调用build进行渲染
setState(() {
});
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » Flutter:Widget生命周期
发表评论 取消回复