【 Flutter 】Flutter を 基礎 から 学習 ( Flutterの内部構造 ) part228 Key

基礎 から 学ぶ Flutter 」という書籍で  学習 したことを ブログでアウトプットしていこうと思います。今回は Flutterの内部構造 ( part228 )です。

前回

【 Flutter 】Flutter を 基礎 から 学習 ( Flutterの内部構造 ) part227 ライフサイクル

新しいセクション、Keyについて学びます。

Key

Keyはほとんどすべてのウィジェットのコンストラクタで指定可能です。

以下のようなシーンでしようするものです。

  • 類似したウィジェットのコレクションを追加・削除・並び替え
  • ユーザのスクロール位置を保持

そういえばListTileあたりの学習でこのKeyの設定があったような気がしますね🤔

 

開発環境が不調で確認できませんでした・・・。

ポイントは★マークの部分です。UniqueKeyを指定し、ランタイム内でユニークな番号を払い出してそれぞれのStateにKeyとして使用しています。
これが無いと並び替えができないのです。これには裏で暗躍しているエレメントツリーの参照が関わっています。
ウィジェットの再構築が行われるとエレメントツリーからウィジェットの参照の変更判断が行われます。

このときKey(とruntimeType)が使用されます。この2つの状態いかんによってエレメントツリーとウィジェットの参照関係が変更されるかそのままなのかが決まるようです。

・・・しかし参考書の図をみて説明を読んでもよくわかりませんでした。

keyを指定しないと並び替えはできない」という浅い学習で終わりました。

最後に

内部構造は難しい!

今日はここまで!