Flutter Key의 원리와 활용 (2) Widget과 Element의 대응

이전 글에서 문제가 발생했는데 위젯이 위치를 바꾸다보면 어떤 사고가 일어나서 우리가 원하는대로 위치가 바뀌지 않는 경우가 있었습니다 widget. widget설정한 대로 표시되어야 하지만 실제로 widget는 화면에 최종적으로 나타나는 것이 아닙니다.

위젯 트리

일부 사람들은 중첩된 위젯 트리에 대해 들어봤을 것입니다 widget.
예를 들어, 다음 코드는 다음과 같습니다.

Column(
  children: [
    Box(Colors.blue),
    Box(Colors.red),
  ],
)

해당 위젯 트리는 다음과 같습니다.

 - Column 
   - Box
   - Box

Widget Tree그러나 이것은 우리 모두가 알고 있듯이 실제로 화면에 그려지는 것이 아니므 Wdiget是描述UI元素Element的配置로 실제로 실행될 때 인스턴스화 후 생성된 개체인 다른 개체가 있을 Element Tree것 Element Tree입니다 Widget Tree.

위젯 트리 — 인스턴스화 —> 요소 트리

 - Column                             - ColumnElement
   - Box             -实例化->          - BoxElement
   - Box                                - BoxElement

Widget은 색상, 크기, 모양 등과 같은 렌더링 방법을 담당합니다.

요소는 내부 상태 관리를 담당합니다.

따라서 상태도 Element그에 따라 변하고 모양도 Widget그에 따라 변하는데, 이 둘은 별개이다.

왜 우리가 헤어져야 합니까?

Widget은 변경할 수 없기 때문에 종종 다음과 같은 프롬프트가 표시될 수 있습니다.

이미지.png

Immutable 즉, 생성 후 런타임에 변경할 수 없지만 변경할 수 있습니다 .일반적으로 위젯은 변경 불가능 하기 때문에 위젯을 변경하는 대신 알림 플러터를 State사용하여 새 위젯을 다시 빌드합니다.그러나 이 위젯은 버려야 합니다. setState함께 상태를 잃지 않습니다.

대부분의 UI 디자인은 Widget을 변경하여 구현하기 때문에 Widget과 State를 분리할 수 있다면 hot reloadWidget을 변경할 때 그 상태를 유지할 수 있습니다. 프로그램은 쓸모가 없으며 Hot Reload지원 및 애니메이션 효과가 없습니다.

위젯의 순서를 변경하는 이유는 UI에서 순서가 변경되지 않음

따라서 Widiget이 변경되면 이를 원래 State와 연결하려고 합니다.

어떻게 관련이 있습니까?

Widget이 변경되면 flutter는 Widget이 Element와 동일한지 확인 합니다 Columen. Row혼란스러운 위젯은 명확하게 구별됩니다.물론 키가 전달되지 않으면 키를 비교할 수 없습니다.위젯이 변경되지 않은 경우 이전 요소가 계속 사용됩니다.

두 개체가 같은지 여부를 판단하는 것과 약간 비슷하며 먼저 유형을 비교합니다.

따라서 Box위치를 변경할 때, 예를 들어 위에 2개가 있고 Box, 위치가 변경되면 해당 Widget Tree가 원래 유형이므로 BoxElement는 이전 Box에 해당할 수 있으므로 Flutter는 없다고 생각할 것입니다. 변화.

따라서 다음과 같이 변경할 때:

Column(                                 Column(
  children: [                              children: [
    Box(Colors.blue),         ->             Box(Colors.red),
    Box(Colors.red),                         Box(Colors.blue),
  ]                                         ]

Flutter의 입장에서는 위의 Widget을 빨간색으로, 아래의 Widget을 파란색으로 바꾸는 정도일 뿐입니다.

다음으로 Key의 경우를 보자.

 - Column                             - ColumnElement
   - Box (Key1)            -实例化->              - BoxElement (Key1)   
   - Box (Key2)                                   - BoxElement (Key2)

위 Box와 아래 Box의 위치 교환 비교 Type이 같은 후 Key를 비교하면 첫 번째 BoxElement(Key1)는 해당 Box의 Key가 일치하지 않는 것을 발견하고 이때 Flutter는 다음 위치에서 다른 Widget을 검색합니다. 동일한 키가 있는지 확인하기 위해 동일한 키가 있는지 확인하고 아래에서 해당 상자를 찾았으며 동일한 방법을 아래에서 찾을 수 있습니다.

변경 후의 모습은 다음과 같습니다.

 - Column                                      - ColumnElement
   - Box (Key2)            -实例化->              - BoxElement (Key1)   
   - Box (Key1)                                   - BoxElement (Key2)

또한 상태를 상호 교환할 수 있고 Flutter가 키를 사용하여 주문 변경을 추적할 수 있는 효과도 달성합니다.

예전처럼 하나를 삭제하면 어떻게 될까요?

Column(
  children: [
    Box(Colors.blue),
    Box(Colors.red),
  ],
)

첫 번째 것을 삭제하면 다음과 같이 됩니다.

Column(
  children: [
    Box(Colors.red),
  ],
)

그러면 빨간색 상자가 첫 번째 상자가 됩니다.
원본

 - ColumnElement
   - BoxElement
   - BoxElement

첫 번째 BoxElement는 빨간색 Box에 해당하고 두 번째는 찾을 수 없으므로 버립니다.

키가 있는 경우 첫 번째 요소가 위젯을 찾을 때 첫 번째 키가 일치하지 않고 같은 수준에서 해당 키를 찾을 수 없으면 자신을 버리고 두 번째 요소가 첫 번째 요소에 해당하며 변경 사항은 우리의 기대에 부합합니다.

Widget을 추가하는 경우도 마찬가지인데, Element는 위에서 아래로 순서대로 조회되기 때문에 Key가 없으면 새로 추가된 같은 종류의 Widget이 이전에 해당하는 위치의 Widget을 교체하게 되고, Widget은 마지막 위치는 해당 요소가 없기 때문에 createState를 호출하여 새 Stete를 생성합니다.