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} 为什么？我已经看到了 super 关键字是 的其他示例。不是 使用所以这是我的困惑所在。

Answer 1

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

当您有可能被删除/插入的相同类型的小部件列表( Column ， Row 等等)时，它很有用。

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

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

潜在地，您可以通过滑动单独删除任何这些小部件。

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

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

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

所以没有 Key ，您可能会遇到一个错误，即您的离开动画将在最后一个元素上播放!

这是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 引擎现在可以确定删除了哪个小部件。现在我们的离开动画将在“bar”而不是“42”上正确播放。