Flutter系列(3)Flutter中的Widget、State

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 {
  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: [
            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由 StatelessWidgetStatefulWidgetState 构成。

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

你可能感兴趣的:(Flutter系列(3)Flutter中的Widget、State)