dart - 无状态小部件类中的键是什么？

Question

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

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);
  }
}

什么是键，什么时候应该使用这个 super 构造函数？好像如果你有自己的构造函数，你必须有 {Key key} 为什么？我已经看到了其他示例，其中 not 使用了 super 关键字，所以这就是我的困惑所在。

Answer 1

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

---

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

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

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

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

问题是，当一个 child 被移除时，我们的列表有一个动画。所以让我们删除“bar”。

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

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

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

---

这是 Key 发生的地方。

如果我们再次开始我们的示例，使用 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”，我们将拥有

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

感谢 key 的存在，flutter 引擎现在可以确定删除了哪个小部件。现在我们的 leave 动画将在“bar”而不是“42”上正确播放。