Flutter中Key的原理及使用 GlobalKey (二)


发文时间:2022年03月28日 11:42:45     编辑:Aaron      标签:Flutter KeyGlobalKey 3840


GlobalKey可以让widget随便改变它在Wdiget Tree中的位置,而它的状态不会丢失。

前言

    GlobalKey在flutter中能实现跨Widget访问状态,且GlobalKey是在整个应用程序中唯一的键,而LocalKey是局部键,假设我们需要在外部改变指定的Widget状态,这时使用GlobalKey就很合适了

  官方源码如下

@optionalTypeArgs
class LabeledGlobalKey extends GlobalKey {
  /// Creates a global key with a debugging label.
  ///
  /// The label does not affect the key's identity.
  // ignore: prefer_const_constructors_in_immutables , never use const for
  // this class
  LabeledGlobalKey(this._debugLabel) : super.constructor();

  final String? _debugLabel;

  @override
  String toString() {
    final String label = _debugLabel != null ? ' $_debugLabel' : '';
    if (runtimeType == LabeledGlobalKey)
      return '[GlobalKey#${shortHash(this)}$label]';
    return '[${describeIdentity(this)}$label]';
  }
}

 案例

image.png 若在TestBox上嵌套一个Widget, hotreload后 会出现什么呢?image.png

可以看到灰色值从3变成了0,而红色的2还存在,若想让灰色hotReload后在不同层级下也保存状态,那么使用GlobalKey是最佳的选择。

GlobalKey的使用

关于globalKey的使用,它每次在build时会重新生成,若想让它长期存在,在build外层先定义即可。

final GlobalKey _globalKey= GlobalKey();

image.png

即使TestBox外嵌套了一个Center,并非在同一层级下 hoTreload后build层也会保留使用globalKey的widget的状态。

GlobalKey的方法

关于GlobalKey的使用方法,可以拿来寻找对应的widget和state等等。

image.png

    如上图所示可以看到globalKey提供了好几个方法,如可以通过GlobalLey可以寻找到对应的BuildContext,state,和currentContext之类的。

    如currentContext可获取到对应组件的尺寸和位置信息,这些对有些特定布局场景下是常需的。




                                                                                                               today   心烦意乱

 

若无特殊说明,此文章为博主原创。
写稿不易,如需转载,请注明出处: https://www.aaroner.cn/art/26.html




SITE MAP

  FOLLOW US