Flutter系列（3）Flutter中的Widget、Stat

2021-09-02 本文已影响0人蓝师傅_Android

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生命周期

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实战》电子书-基础组件