Flutter 详解 Key

时间:2021-7-21 作者:qvyue

转载 原文链接:https://juejin.im/post/6863300824660082701

作者: fgyong

github:https://github.com/ifgyong

Key 是什么

用官方的说法就是:

key是用来作为WidgetElementSemanticsNode的标示,仅仅用来更新widget->key相同的小部件的状态。

Key子类包含LocalKeyGlobalKey

LocalKey

看下LocalKey的定义:

abstract class LocalKey extends Key {
  const LocalKey() : super.empty();
}

LocalKey定义了初始化函数,默认为值空。

LocalKey子类包含ValueKey/ObjectKey/UniqueKey,如图所示:

Flutter 详解 Key
image

ValueKey

ValueKey顾名思义是比较的是值

看下关键函数

  @override
  bool operator ==(Object other) {
    if (other.runtimeType != runtimeType)
      return false;
    return other is ValueKey
        && other.value == value;
  }

那么使用起来也是很简单的,当我们想要系统根据我们所给的key来判断是否可以刷新时,可以使用该key

TextField(
          key: ValueKey('value1'),
        ),
        TextField(
          key: ValueKey('value2'),
        ),
Flutter 详解 Key
image

当我们来交换顺序时,TextField的值也交换了,也就是我们的key带走了值。

TextField(
  key: ValueKey('value2'),
),
TextField(
  key: ValueKey('value1'),
),
Flutter 详解 Key
image

如果我们使用其他类来传值呢?我们把类Student作为value传值进去。


class Student {
  final String name;

  Student(this.name);

  @override
  int get hashCode => name.hashCode;
}

TextField(
  key: ObjectKey(Student('老王')),
),
TextField(
  key: ObjectKey(Student('老王')),
),

刷新之后并无报错,使用正常。

当我们在Student重写了操作符==之后再看下,我们将Student代码稍微改动下

class Student {
  final String name;

  Student(this.name);

  @override
  int get hashCode => name.hashCode;

  @override
  bool operator ==(Object other) =>
      identical(this, other) ||
      other is Student &&
          runtimeType == other.runtimeType &&
          name == other.name;
}

然后hot reload,结果报错了

If multiple keyed nodes exist as children of another node, they must have unique keys.

刚才我们所改的Student操作符==导致了,在Key对比Value的时候重载了Student的操作符,才导致的报错,我们需要设置不同姓名的同学,来区分不同的同学。

ObjectKey

顾名思义是比较对象的key,那么这个key是如何比较对象呢?我们看下源码;

  @override
  bool operator ==(Object other) {
    if (other.runtimeType != runtimeType)
      return false;
    return other is ObjectKey
        && identical(other.value, value);
  }

官方显示比较类型,当类型不一致,判定为不是通过一个对象,如果另外一个也是ObjectKey,则判断地址是否相同,只有地址相同才判定为同一个对象。

测试数据;

class Student {
  final String name;

  Student(this.name);

  @override
  int get hashCode => name.hashCode;

  @override
  bool operator ==(Object other) =>
      identical(this, other) ||
      other is Student &&
          runtimeType == other.runtimeType &&
          name == other.name;
}


TextField(
    key: ObjectKey(Student('老王')),
  ),
  TextField(
    key: ObjectKey(Student('老王')),
  ),

刷新界面之后,并无报错。

ObjectKey稍微修改

   _student = Student('老王');

  TextField(
    key: ObjectKey(_student),
  ),
  TextField(
    key: ObjectKey(_student),
  ),

刷新之后报错了,存在了相同的key

If multiple keyed nodes exist as children of another node, they must have unique keys.

UniqueKey

每次生成不同的值,当我们每次刷新都需要一个新的值,那么正是这个存在的意义。

我们每次刷新就生成一个新的 颜色,并且渐隐渐显效果。

AnimatedSwitcher(
  duration: Duration(milliseconds: 1000),
  child: Container(
    key: UniqueKey(),
    height: 100,
    width: 100,
    color: Colors.primaries[count % Colors.primaries.length],
  ),
)

效果:

Flutter 详解 Key
image

GlobalKey & GlobalObjectKey

作为全局使用的key,当跨小部件我们通常可以使用GlobalKey来刷新其他小部件。

GlobalObjectKeyObjectKey是否相等的判定条件是一致的,GlobalObjectKey继承GlobalKey,通过GlobalKey>来指定继承state,并实现StatefulWidget接口的类,然后可以通过GlobalKey.currentState来获取当前state,然后调用state.setState((){})完成当前小部件标记为dirty,在下一帧刷新当前小部件

例子

点击按钮刷新小部件的背景颜色。

GlobalKey _key = GlobalKey();
_Container(_key),
OutlineButton(
  child: Text('global key 刷新'),
  onPressed: () {
    _key.currentState.setState(() {});
  },

点击globalKey刷新局部小部件,点击右下角刷新整个页面。可以看到局部刷新时,只有下边的小部件改变颜色,整个页面刷新时。

效果:

Flutter 详解 Key
image

参考

  • 例子代码库
  • 官方源码
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。