Flutter开发1：Widget与生命周期

2022-05-03  本文已影响0人  十二栗子

什么是Widget

Flutter中几乎所有的对象都是一个Widget，这与原生开发中“控件”概念稍有不同，Flutter中的Widget表示一切与UI框架相关的对象，例如：手势检测 GestureDetector，而原生开发中的Widget控件通常仅仅指UI布局中的各种控件，不包含Flutter中的功能型Widget。

标识符：Key

Flutter 是响应式框架，每次刷新 UI 的时候，都会重新构建新的 Widget树，并和之前的 Widget树进行对比，计算出变化的部分，这个计算过程就是diff，在 diff 过程中，如果能提前知道哪些 Widget 没有变化，就能提高 diff 的性能，这时候就需要使用到标识符。

给 Widget 添加一个唯一的标识符，然后在 Widget树 的 diff 过程中查看刷新前后的 Widget树，如果标识符相同，则说明 Widget 没有变化，否则说明 Widget 有变化。

这个标识符就是Flutter 中的Key属性，所有 Widget 都有 Key 属性

Key有两种类型：

什么是StatelessWidget

它是一个比较简并继承自Widget类的一个类，常在build方法中通过嵌套其它Widget来构建UI。当我们需要组合并封装多个Widget控件，且不需要维护数据状态时，可以自定义Widget并继承该类。它最大的特点是仅表示当前一帧的页面，当页面动态变化时，每次都会重建数据。

需要注意，它的内部成员变量是immutable的，通常需要使用final修饰。

什么是 StatefulWidget

它也是继承自Widget类，不同的是一个StatefulWidget类就会对应一个State类。State表示与其对应的StatefulWidget要维护的状态，且State中存在与原生开发中类似的生命周期回调。

State 类有两个功能：

调用setState()方法并在其中修改数据的值，会触发 State 的 build() 方法，重建 Widget，重建时会重新绑定数据，这时数据已变化，从而达到更新页面的目的。

State 中还有三个重要的成员变量

if(mounted){
    setState((){
        // :TODO
    })
}

StatelessWidget 和 StatefulWidget的区别

widget生命周期回调

StatefulWidget 生命周期回调

class _MyHomePageState extends State<MyHomePage> {
//定义变量区域
  final GlobalKey _gk = GlobalKey();
  int count = 0;

//定义其他函数，放前面或者后面都可以
  void _showHint() {

  }

//widget生命周期函数如下
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    debugPrint('initState');
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    debugPrint('didChangeDependencies');
  }

  @override
  Widget build(BuildContext ctx) {
    // this.context;
    return Scaffold();
  }

  @override
  void didUpdateWidget(covariant MyHomePage oldWidget) {
    super.didUpdateWidget(oldWidget);
    debugPrint('didUpdateWidget');
  }

  @override
  void deactivate() {
    super.deactivate();
    debugPrint('deactivate');
  }

  @override
  void dispose() {
    super.dispose();
    debugPrint('dispose');
  }
}

App 的生命周期

除了Widget，App本身也存在生命周期，这类似原生App的生命周期，主要指进入app，按home键等系统级的操作。

要监听系统级的App生命周期回调，需要在页面的State类上混入WidgetsBindingObserver类，并实现didChangeAppLifecycleState回调方法
注意：不要忘了注册和移除监听器，否则不生效

class _MyAppState extends State<MyApp> with WidgetsBindingObserver{

  @override
  void initState() {
    super.initState();
    /// 注册监听器
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    switch (state) {
      case AppLifecycleState.resumed:
        break;
      case AppLifecycleState.inactive: 
        break;
      case AppLifecycleState.paused: 
        break;
      case AppLifecycleState.detached: 
        break;
    }
  }

  @override
  void dispose() {
    /// 移除监听器
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }
}

AppLifecycleState提供四种状态

上一篇下一篇

猜你喜欢

热点阅读