☰

ステートレスウィジェットクラスのキーとは何ですか? 質問する

tag-icon • tag-icon dart 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}が必要ですが、なぜですか？スーパーキーワードがない使用されているので、これが私の混乱の原因です。

ベストアンサー1

TLDR: すべてのウィジェットにはKey keyasが必要ですオプションパラメータまたはそのコンストラクタ。Keyリスト内のどのウィジェットが変更されたかを認識するステップで、Flutter エンジンによって使用されるものです。

これは、リスト（Column、、Rowその他）ウィジェット同じタイプの削除/挿入される可能性があります。

次のようなコードがあるとします (コードは動作しませんが、考え方はわかります) :

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

スワイプすることで、これらのウィジェットを個別に削除できる可能性があります。

実は、リストには子が削除されたときにアニメーションが実行されます。そこで、「bar」を削除しましょう。

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

問題: がないと、Flutter は の 2 番目の要素が消えたかどうか、または最後に消えた要素で 2 番目の要素の子要素が変更されたKeyかどうかを認識できません。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エンジンはどのウィジェットが削除されたかを確実に知ることができます。そして今、離れるアニメーションは「42」ではなく「bar」で正しく再生されます。

おすすめ記事