• 赚钱入口【需求资源】限时招募流量主、渠道主,站长合作;【合作模式】CPS长期分成,一次推广永久有收益。主动打款,不扣量;

flutter key 的作用

Flutter cps12345 1年前 (2020-08-21) 232次浏览 0个评论

在 一些 Google 的示例代码中我们可以看到一些 StatelessWidget 的构造方法中使用了 Key

class GreenFrog extends StatelessWidget {
  const GreenFrog({ Key key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Container(color: const Color(0xFF2DBD3A));
  }
}

那么 key 的作用是什么,什么时候使用勒? 可以查看 Google 的官方说明:下面我们用实际的代码来演示一下,key 在此处的作用:

用一句话来描述 Key 的作用就是:flutter engine 用来识别组件身份的标记

假设有下面一个支持动画的列表(代码无法运行,只做理解演示):

AnimatedList(
  children: [
    Card(child: Text("foo")),
    Card(child: Text("bar")),
    Card(child: Text("42")),
  ]
)

当你通过滑动删除了其中一条,假设移除 bar, 如果没有 key 来标记的话,flutter engine 就不知道你移除的是哪一条,那么执行的动画就是在列表最后发生了删除。如果我们添加上 key:

AnimatedList(
  children: [
    Card(key: ObjectKey("foo"), child: Text("foo")),
    Card(key: ObjectKey("bar"), child: Text("bar")),
    Card(key: ObjectKey("42"), child: Text("42")),
  ]
)

此时当我们删除 bar 的时候,flutter engine 就知道我们删除的是哪一行,那么就可以在该行上执行正确的动画了。

 

喜欢 (0)

您必须 登录 才能发表评论!