无状态窗口小部件类中的键是什么？

小编典典

无状态窗口小部件类中的键是什么？

flutter

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

密钥是什么？何时应使用此超级构造函数？似乎如果您有自己的构造函数，则必须具有{Key key}为什么？我看到了其他未
使用super关键字的示例，因此这是我的困惑所在。

阅读 359

2020-08-13

共1个答案

小编典典

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

当您具有可能会被删除/插入 的相同类型 的小部件列表（Column，Row无论如何）时，此功能很有用。 __

假设您有此代码（代码不起作用，但是您知道了）：

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

潜在地，您可以通过滑动分别删除所有这些小部件。

事实是，当删除一个孩子时，我们的列表中有一个动画。因此，让我们删除“酒吧”。

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

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

因此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”上播放。

2020-08-13