无状态窗口小部件类中的键是什么？ [英] 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：所有小部件都应具有密钥键作为可选参数或其构造函数。
键是颤振引擎在识别列表中的哪个小部件已更改的步骤中使用的东西。

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.

当您有一个列表（列， 行，无论哪种类型）都可能会被删除/插入的相同类型的小部件。

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.

问题是，当删除一个孩子时，我们的列表中有一个动画。因此，让我们删除栏。

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")),
  ]
)

问题：如果没有键，颤振将无法知道的第二个元素行消失了。或者，如果它是最后一个消失了，而第二个消失了。

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 ，则可以可能有一个错误，您的离开动画将在最后一个元素上播放！

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

这是密钥发生的地方。

如果我们再次开始我们的示例，使用密钥我们将有以下内容：

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 存在，颤振引擎现在确定删除了哪个小部件。现在，我们的离开动画将可以在 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屋！