无状态小部件类中的键是什么? [英] What are Keys in the Stateless widgets class?

问题描述

在 flutter 文档中有一个无状态小部件子类的示例代码，如下所示:

In the flutter docs there's sample code for a stateless widget subclass as shown:

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

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

还有这个

class Frog extends StatelessWidget {
  const Frog({
    Key key,
    this.color: const Color(0xFF2DBD3A),
    this.child,
  }) : super(key: key);

  final Color color;

  final Widget child;

  @override
  Widget build(BuildContext context) {
    return new Container(color: color, child: child);
  }
}

什么是键，什么时候应该使用这个超级构造函数?好像如果你有自己的构造函数，你必须有 {Key key} 为什么?我看过其他未使用 super 关键字的例子，所以这就是我的困惑所在.

What is a key and when should this super constructor be used? It seems like if you have your own constructor you must have {Key key} why? I've seen other examples where the super keyword is not used so this is where my confusion is.

推荐答案

TLDR:所有小部件都应该有一个 Key key 作为 optional 参数或其构造函数.Key 是 Fl​​utter 引擎在识别列表中的哪个小部件已更改的步骤中使用的东西.

TLDR: All widgets should have a Key key as optional parameter or their constructor. Key is something used by flutter engine at the step of recognizing which widget in a list as changed.

当你有一个 list(Column、Row 等)相同类型的小部件时，它很有用em> 可能会被删除/插入.

It is useful when you have a list (Column, Row, whatever) of widgets of the same type that can potentially get removed/inserted.

假设你有这个(代码不起作用，但你明白了):

Let's say you have this (code not working, but you get the idea) :

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

可能，您可以通过滑动来单独删除这些小部件中的任何一个.

Potentially, you can remove any of these widgets individually with a swipe.

问题是，当一个孩子被移除时，我们的列表有一个动画.所以让我们删除bar".

The thing is, our list has an animation when a child is removed. So let's remove "bar".

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

问题:如果没有Key，flutter 将无法知道你的Row 的第二个元素是否消失了.或者，如果是最后一个消失了，而第二个有其子变化.

The problem: Without Key, flutter won't be able to know if the second element of your Row disappeared. Or if it's the last one that disappeared and the second has its child change.

因此如果没有 Key，您可能会遇到一个错误，即您的 leave 动画将在最后一个元素上播放！

So without Key, you could potentially have a bug where your leave animation will be played on the last element instead!

这是Key发生的地方.

如果我们再次开始我们的例子，使用密钥我们会有这个:

If we start our example again, using key we'd have this :

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

注意键是如何不是子索引而是元素独有的.

notice how the key is not the child index but something unique to the element.

从这里开始，如果我们再次删除bar"，我们将有

From this point, if we remove "bar" again, we'll have

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

多亏了 key 的存在，flutter 引擎现在可以确定哪个小部件被删除了.现在我们的 leave 动画将在bar"而不是42"上正确播放.

Thanks to key being present, flutter engine now knows for sure which widget got removed. And now our leave animation will correctly play on "bar" instead of "42".

这篇关于无状态小部件类中的键是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！