Key는 결국 언제 사용합니까?

Flutter를 만지고 있는 사람이라면 Key의 존재는 알고 있다고 생각합니다.
하지만 언제 사용합니까? 라는 질문에 명확하게 대답할 수 있는 사람은 적을까 생각합니다.

그렇다면 이 기사에서는 Key에 대해 자세하게 자유자재로 사용할 수 있게 되자! 라는 이야기입니다.

Key는 거의 모든 Widget의 생성자로 지정할 수 있습니다.
어떤 때에 이용할까요?

그것은 주로 다음과 같은 경우입니다.

· 유사 Widget의 컬렉션을 식별하고 추가, 삭제 및 정렬하고 싶습니다.

· 사용자의 스크롤 위치를 유지하고 싶습니다.

목록을 바꾸는 앱

설명을 위해 목록을 교환하는 앱을 만드십시오!
코드. . . 돈!

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: KeySample(),
    );
  }
}

class KeySample extends StatefulWidget {
  @override
  KeySampleState createState() {
    return KeySampleState();
  }
}

class KeySampleState extends State<KeySample> {
  List<Widget> titles = [
    StatefulRandomTitle(key: UniqueKey()),
    StatefulRandomTitle(key: UniqueKey())
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("key sample"),
      ),
      body: Column(
        children: [
          ElevatedButton(
            onPressed: swapTitle,
            child: const Text("入れ替える"),
          ),
          Column(
            children: titles,
          )
        ],
      ),
    );
  }

  swapTitle() {
    setState(() {
      titles.insert(1, titles.removeAt(0));
    });
  }
}

class StatefulRandomTitle extends StatefulWidget {
  StatefulRandomTitle({Key key}) : super(key: key);

  @override
  StatefulRondomTitleState createState() => StatefulRondomTitleState();
}

class StatefulRondomTitleState extends State<StatefulRandomTitle> {
  int rondom;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    rondom = Random().nextInt(100);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ListTile(
          title: Text(rondom.toString()),
        ),
      ],
    );
  }
}

코드 설명은 나중에
동영상을 준비했으므로 움직임을 먼저 보자!

  List<Widget> titles = [
    StatefulRandomTitle(key: UniqueKey()),
    StatefulRandomTitle(key: UniqueKey()),
  ];

1번의 포인트는 StatefulRandomTitle의 key에 UniqueKey()를 세트 하고 있는 곳입니다.

덧붙여서, UniqueKey를 주지 않으면 바꿀 수 없습니다.

왜 UniqueKey()를 주지 않으면 변경되지 않는가?

자세히 살펴 보겠습니다!

Run 버튼을 누르면 다음과 같은 트리가 생성됩니다.

위젯에는 해당하는 요소가 있습니다.

(「Element 따위 만들지 않았어?」라고 생각한 분들을 위해서 또 기사를 씁니다.)

일단이 그림을 받아주세요!



버튼을 누르고, 교환 처리를 하고 있는 도중, StatefulRandomTitle가 재구축됩니다만, Element의 참조처는 이전과 같습니다.

Widget(StatefulRandomTitle)를 재구축한 후, 낡은 쪽의 StatefulRandomTitle와 새로운 StatefulRandomTitle의 型とKey 가 같은지 어떤지를 Elemet 클래스의 updateChild() 메소드내에서 조사합니다.

설명을 위해 이전 StatefulRandomTitle을 StatefulRandomTitle (old)
새로운 StatefulRandomTitle을 StatefulRandomTitle(new)로 정의합니다!

아래 그림을 보면서 설명합니다.
형태와 Key가 낡은 것과 완전히 같기 때문에 Element의 참조처가 new의 것으로 변경됩니다.
(StatefulRandomTitle.key에서 확인할 수 있음)

만약, Key를 지정하지 않았던 경우는, Key가 null(같다)로 형태가 같기 때문에 Element의 참조처가 이동합니다. 하지만 UIの更新はされません。 그래서 버튼을 눌러도 아무것도 반응하지 않는 것 같은 움직임이 됩니다.

좀 더 자세히 살펴 보겠습니다.

Key를 지정하지 않는 경우

키를 지정하지 않으면,
Element로부터 Widget의 참조는 변경됩니다만, RnderObject(묘화 처리)가 갱신되지 않기 때문에 아무것도 움직이지 않는 것처럼 보입니다. (StatefulWidget에 random 변수를 갖게 하면, Key가 없어도 갱신할 수 있지만 가변의 변수를 StatefulWidget에 갖게 하는 것은 좋지 않은 설계이므로 역시 Key를 주자)

Widget이 변경되었을 때, Element의 참조를 바꾸는 것만으로 처리를 가볍게 하는 시도가 되고 있습니다.