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

Question

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

Answer 1

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

当您有一个列表(列、行等等），其中包含可能被移除/插入的相同类型的小部件时，它非常有用。

假设您有这样的代码（代码不起作用，但您明白了）：

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我们将得到以下内容：

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

注意键不是子索引，而是元素所特有的。

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