Flutter学习记录——14.生命周期

r囧r小猫 2023-06-19 05:29 13阅读 0赞

### 文章目录 ###

*  1.Flutter生命周期
 *  2.Flutter按键监听
 *  3.总结

# 1.Flutter生命周期 #

我们先了解下生命周期的概念，也就是一个页面对象从创建到销毁的整个状态管理。我们看下 Flutter 的 State 生命周期的示意图：  
![生命周期][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70]

可以看到我们的一个页面在加载创建时需要执行：

构造函数 -> initState -> didChangeDependencies -> build 方法，然后才会渲染为一个页面。

当销毁关闭时：

deactivate -> dispose

内部的前后台页面状态变化主要有：

enum AppLifecycleState { 
      // 恢复可见
      resumed,
      // 不可见，后台运行，无法处理用户响应
      inactive,
      // 处在并不活动状态，无法处理用户响应。例如来电，画中画，弹框
      paused,
      // 应用被立刻暂停挂起，ios上不会回调这个状态
      suspending,
    }

当页面更新时会执行：

didUpdateWidget -> build

可能会调用多次。

那么接下来通过代码实例来了解 Flutter 的生命周期：

import 'package:flutter/material.dart';
    
    class StateSamples extends StatefulWidget { 
      @override
      State<StatefulWidget> createState() { 
        return StateSamplesState();
      }
    }
    
    class StateSamplesState extends State<StateSamples>
        with WidgetsBindingObserver { 
      //插入渲染树时调用，只调用一次
      @override
      void initState() { 
        super.initState();
        WidgetsBinding.instance.addObserver(this);
      }
    
      //构建Widget时调用
      @override
      Widget build(BuildContext context) { 
        return Scaffold(
          appBar: AppBar(
            title: Text('LifeCycleState'),
          ),
          body: Center(
            child: Column(
              children: <Widget>[],
            ),
          ),
        );
      }
    
      //state依赖的对象发生变化时调用
      @override
      void didChangeDependencies() { 
        super.didChangeDependencies();
      }
    
      //组件状态改变时候调用，可能会调用多次
      @override
      void didUpdateWidget(StateSamples oldWidget) { 
        super.didUpdateWidget(oldWidget);
      }
    
      //当移除渲染树的时候调用
      @override
      void deactivate() { 
        super.deactivate();
      }
    
      //组件即将销毁时调用
      @override
      void dispose() { 
        super.dispose();
        WidgetsBinding.instance.removeObserver(this);
      }
    
      //APP生命周期监听
      @override
      void didChangeAppLifecycleState(AppLifecycleState state) { 
        if (state == AppLifecycleState.resumed) { 
          //恢复可见
        } else if (state == AppLifecycleState.paused) { 
          //处在并不活动状态，无法处理用户响应
          //例如来电，画中画，弹框
        } else if (state == AppLifecycleState.inactive) { 
          //不可见，后台运行，无法处理用户响应
        } else if (state == AppLifecycleState.suspending) { 
          //应用被立刻暂停挂起，ios上不会回调
        }
        super.didChangeAppLifecycleState(state);
      }
    
      //其他方法
    
      //热重载时调用
      @override
      void reassemble() { 
        super.reassemble();
      }
    
      //路由弹出
      @override
      Future<bool> didPopRoute() { 
        return super.didPopRoute();
      }
    
      //新的路由
      @override
      Future<bool> didPushRoute(String route) { 
        return super.didPushRoute(route);
      }
    
      //系统窗口相关改变回调，例如旋转
      @override
      void didChangeMetrics() { 
        super.didChangeMetrics();
      }
    
      //文字缩放大小变化
      @override
      void didChangeTextScaleFactor() { 
        super.didChangeTextScaleFactor();
      }
    
      //本地化语言变化
      @override
      void didChangeLocales(List<Locale> locale) { 
        super.didChangeLocales(locale);
      }
    
      //低内存回调
      @override
      void didHaveMemoryPressure() { 
        super.didHaveMemoryPressure();
      }
    
      //当前系统改变了一些访问性活动的回调
      @override
      void didChangeAccessibilityFeatures() { 
        super.didChangeAccessibilityFeatures();
      }
    
      //平台色调主题变化时
      @override
      void didChangePlatformBrightness() { 
        super.didChangePlatformBrightness();
      }
    }

# 2.Flutter按键监听 #

我们知道在 Android 或 iOS 平台上，手机上或遥控器上的一些实体按键是可以被监听到的，可以执行相关操作，当然 Flutter 上也可以进行按键监听。

首先看下返回键的监听，返回键监听拦截在 Flutter 中比较不一样。是单独使用一个组件：WillPopScope。

然后通过一个实例来看下 Flutter 中实现连按两次返回键退出的效果：

class KeyListenerState extends State<KeyListenerSamples> { 
      int last = 0;
      int index = 0;
    
      @override
      void initState() { 
        super.initState();
      }
    
      @override
      Widget build(BuildContext context) { 
        // 要用WillPopScope包裹
        return WillPopScope(
          // 编写onWillPop逻辑
          onWillPop: _onWillPop,
          child: Scaffold(
              appBar: AppBar(
                title: Text('KeyListener Demo'),
              ),
              body: Center(
                child: Text("按键监听"),
              )),
        );
      }
    
      // 返回键拦截执行方法
      Future<bool> _onWillPop() { 
        int now = DateTime.now().millisecondsSinceEpoch;
        print(now - last);
        if (now - last > 1000) { 
          last = now;
          // showToast("再按一次返回键退出");
          return Future.value(false); //不退出
        } else { 
          return Future.value(true); //退出
        }
      }
    }

那么其他按键的监听使用的是 RawKeyboardListener。

RawKeyboardListener 继承自 StatefulWidget。

const RawKeyboardListener({ 
        Key key,
        // 焦点节点
        @required this.focusNode,
        // RawKeyEvent，按键事件
        @required this.onKey,
        // 子控件
        @required this.child,
      })

我们再看下 RawKeyEvent 的构造方法：

const RawKeyEvent({ 
        // RawKeyEventData
        @required this.data,
        this.character,
      })

监听 Android 平台使用 RawKeyEventDataAndroid，监听 Fuchsia 平台使用RawKeyEventDataFuchsia，iOS 平台暂时还没有发布。

RawKeyboardListener 用法：

class KeyListenerState extends State<KeyListenerSamples> { 
      FocusNode focusNode = FocusNode();
    
      @override
      void initState() { 
        super.initState();
        FocusScope.of(context).requestFocus(focusNode);
      }
    
      @override
      Widget build(BuildContext context) { 
        return Scaffold(
            appBar: AppBar(
              title: Text('RawKeyboardListener Demo'),
            ),
            // RawKeyboardListener包裹
            body: RawKeyboardListener(
                // 可以监听到的前提是有焦点，我们可以让组件先获取焦点
                focusNode: focusNode,
                onKey: (RawKeyEvent event) { 
                  // 这里是监听Android平台按键，并且是KeyDown事件
                  if (event is RawKeyDownEvent &&
                      event.data is RawKeyEventDataAndroid) { 
                    RawKeyDownEvent rawKeyDownEvent = event;
                    RawKeyEventDataAndroid rawKeyEventDataAndroid =
                        rawKeyDownEvent.data;
                    print("keyCode: ${ rawKeyEventDataAndroid.keyCode}");
                    switch (rawKeyEventDataAndroid.keyCode) { 
                      // 这里面的KeyCode值和Android平台的一致
                      case 19: //KEY_UP
                        break;
                      case 20: //KEY_DOWN
                        break;
                      case 21: //KEY_LEFT
    
                        break;
                      case 22: //KEY_RIGHT
    
                        break;
                      case 23: //KEY_CENTER
                        break;
                      default:
                        break;
                    }
                  }
                },
                child: Center(
                  child: Text("按键监听"),
                )),
          );
      }
    }

当然我们也可以把 RawKeyboardListener 应用在输入框的焦点获取和监听上。

# 3.总结 #

本节课主要是给大家讲解了 Flutter 的生命周期和按键监听的用法和特点。主要注意点和建议如下：

*  重点掌握 Flutter 生命周期的几个状态和返回键的拦截处理的用法。
 *  尝试编写监听输入框的按键事件和焦点事件。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191204184837545.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5,size_16,color_FFFFFF,t_70