Flutter 的设计思想是“一切皆 Widget”。
一、demo解读
我们新建一个Flutter项目，默认生成一个demo，代码如下：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
//1、MyApp 是一个 StatelessWidget
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
//2 、MyHomePage 是一个 StatefulWidget
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
//3、 _MyHomePageState 是一个 State
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
除去控件部分不说，我们的Flutter demo由 StatelessWidget 和 StatefulWidget和 State 构成。
StatelessWidget：处理静态的，无状态的视图展示。
StatefulWidget：应对有交互，需要动态变化视觉效果的场景，例如图片控件。
通过父View初始化时传入的静态配置，StatelessWidget就能完全控制其静态显示。而StatefulWidget还要借助State对象，处理用户交互和UI变化，并体现在UI上。
二、Widget 设计思路和基本原理
Widget、Element、RenderObject
界面
生成三棵树
Widget是视图结构描述，Element是Widget的一个实例化对象，将Widget树的变化做了抽象，能够只将需要修改的部分同步到真正的RenderObject树中。
三棵树设计的好处是提高性能，RenderObject 的创建是比较耗性能的，涉及到底层的绘制逻辑，而Widget树每次刷新都会重建，Element树会跟上次绘制的Element对比看哪些是有变化的，只对有变化的对象创建对应的RenderObject。
二、组件
StatelessWidget 和 StatefulWidget
StatelessWidget：处理静态的，无状态的视图展示。
StatefulWidget：应对有交互，需要动态变化视觉效果的场景。
通过父View初始化时传入的静态配置，StatelessWidget就能完全控制其静态显示。而StatefulWidget还要借助State对象，处理用户交互和UI变化，并体现在UI上。
State生命周期
State生命周期
1.创建
- 构造：可以接收父View传递的数据
- initState：会在State插入视图树的时候调用，生命周期只会调一次，可以为变量设置默认值。
- didChangeDependencies：专门处理State对象依赖关系变化。
- build：创建视图，经过以上步骤，Framework认为State已经准备好，调用build方法，创建一个Widget返回
2.更新
Widget状态更新，主要由三个方法触发，setState、didChangeDependencies、didUpdateWidget
-
setState：数据改变就通过这个方法告诉Flutter我这里数据改变，需要重建UI，会调用build方法
-
didChangeDependencies：系统语言或主题改变时会回调。
-
didUpdateWidget：Widget配置关系发生变化，例如父View触发重建，热重载时会地哦啊用这个方法。
一旦以上方法被调用，Flutter会销毁老的Widget，调用build方法重建Widget。
3.销毁
- deactivate：组件的可见状态发生变化会被调用。页面切换时，State对象在视图树中发生变化，需要暂时移除后重新添加，会触发组件重建，调用这个方法。
- dispose：State被永久从视图树中移除时调用，组件就要销毁了，可以做一些资源回收操作
4. App生命周期监听
WidgetsBindingObserver
官方demo
class AppLifecycleReactor extends StatefulWidget {
const AppLifecycleReactor({ Key key }) : super(key: key);
@override
_AppLifecycleReactorState createState() => _AppLifecycleReactorState();
}
class _AppLifecycleReactorState extends State<AppLifecycleReactor> with WidgetsBindingObserver {
@override
void initState() {
super.initState();
WidgetsBinding.instance.addObserver(this);
}
@override
void dispose() {
WidgetsBinding.instance.removeObserver(this);
super.dispose();
}
AppLifecycleState _notification;
@override
void didChangeAppLifecycleState(AppLifecycleState state) {
setState(() { _notification = state; });
}
@override
Widget build(BuildContext context) {
return Text('Last notification: $_notification');
}
}
5.帧数据回调
WidgetsBinding.instance.addPostFrameCallback((_){
print("FrameCallback 单次Frameh绘制回调"); //只回调一次
});
WidgetsBinding.instance.addPersistentFrameCallback((_){
print("FrameCallback 实时Frameh绘制回调"); //每一帧都回调
});
触发setState，就能看到日志。
参考：
极客时间-Flutter核心技术与实战
《Flutter实战》电子书-基础组件
网友评论