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}가 있어야하는 것 같습니다. 이유는 무엇입니까? 나는 super 키워드가 사용 되지 않는 다른 예를 보았 으므로 이것이 내 혼란이있는 곳입니다.

TLDR : 모든 위젯은 있어야한다 Key key로 선택 매개 변수 또는 생성자입니다. Key목록에서 어떤 위젯이 변경되었는지 인식하는 단계에서 플러터 엔진이 사용하는 것입니다.

잠재적으로 제거 / 삽입 될 수있는 동일한 유형 의 위젯 목록 ( 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")),
  ]
)

문제 :를 사용하지 않으면 Keyflutter는 두 번째 요소가 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")),
  ]
)

덕분에 keyFlutter Engine은 이제 어떤 위젯이 제거되었는지 확인합니다. 이제 떠나는 애니메이션이 "42"대신 "바"에서 올바르게 재생됩니다.

키는 무엇입니까?

키는 위젯의 ID입니다. StatelessWidgets뿐만 아니라 모든 위젯에 이러한 기능이 있습니다. 위젯을 재사용 할 수 있는지 또는 다시 빌드해야하는지 결정하기 위해 요소 트리에서 사용됩니다. 키가 지정되지 않으면 (일반적인 경우) 위젯 유형이이를 결정하는 데 사용됩니다.

키를 사용하는 이유는 무엇입니까?

키는 위젯의 수 또는 위치가 변경 될 때 상태를 유지하는 데 유용합니다. 키가 없으면 Flutter 프레임 워크는 어떤 위젯이 변경되었는지 혼동 할 수 있습니다.

키는 언제 사용합니까?

프레임 워크가 업데이트 할 위젯을 알기 위해 도움이 필요할 때만 사용하십시오.

대부분의 경우 키를 사용할 필요가 없습니다. 키는 대부분 상태를 유지하는 데만 유용하기 때문에 자식이 모두 상태 비 저장 인 상태 비 저장 위젯이있는 경우 키를 사용할 필요가 없습니다. 이 경우 키를 사용해도 나쁘지는 않지만 도움이되지 않습니다.

키를 사용하여 수행 할 수있는 몇 가지 미세 최적화가 있습니다. 이 기사를 참조 하십시오 .

키는 어디에서 사용합니까?

재정렬 또는 추가 / 삭제가 발생하는 위젯 트리의 부분에 키를 놓습니다. 예를 들어 자식이 ListTile 위젯 인 ListView의 항목을 재정렬하는 경우 ListTile 위젯에 키를 추가합니다.

어떤 종류의 키를 사용할까요?

키는 ID 일 뿐이지 만 ID의 종류는 다를 수 있습니다.

ValueKey

ValueKey는 문자열이나 정수와 같은 간단한 값을 취하는 로컬 키입니다.

ObjectKey

위젯이 단일 값보다 더 복잡한 데이터를 표시하는 경우 해당 위젯에 대해 ObjectKey를 사용할 수 있습니다.

UniqueKey

이 유형의 키는 매번 고유 한 ID를 제공합니다. 그래도 사용한다면 build방법에 넣으십시오 . 그렇지 않으면 위젯이 동일한 ID를 가지지 않으므로 요소 트리는 재사용 할 일치 항목을 찾지 못합니다.

GlobalKey

GlobalKeys는 앱 전체에서 상태를 유지하는 데 사용할 수 있지만 전역 변수와 유사하므로 아껴서 사용합니다. 대신 상태 관리 솔루션을 사용하는 것이 좋습니다.

키 사용 예

• AnimatedLists
• 열 / 행에서 위치 변경
• TextFormField

참고 문헌

• 열쇠! 그들은 무엇에 좋은가요?
• Flutter에서 키 사용

키는 위젯 트리에서 상태를 보존하는 데 필요한 선택적 매개 변수입니다. 트리에서 요소 모음을 이동하고 상태를 보존하려면 키를 사용해야합니다.

가장 좋은 설명은 Google When to Use Keys-Flutter Widgets 101 Ep 의이 비디오에서 찾을 수 있습니다 . 4

키는 위젯을 고유하게 식별하는 데 사용되는 개체입니다.

상태를 액세스하거나 복원하는 데 사용됩니다 StatefulWidget(위젯 트리가 모두 상태 비 저장 위젯이면 대부분 필요하지 않음). 사용법에 따라 설명해볼 키에는 여러 가지가 있습니다.

목적 ( key types)

1. i.e. remove / add / reorder item to list체크 된 항목이 제거되는 드래그 가능한 할일 목록과 같은 상태 저장 위젯 의 컬렉션 을 변경합니다.

➡️ ObjectKey, ValueKey & UniqueKey

2. 위젯을 상태를 유지하면서 한 부모에서 다른 부모로 이동합니다.

➡️ GlobalKey

3. 여러 화면에 동일한 위젯을 표시하고 상태를 유지합니다.

➡️ GlobalKey

4. 양식을 확인합니다.

➡️ GlobalKey

5. 데이터를 사용하지 않고 키를 제공하려고합니다.

➡️ UniqueKey

6. 사용자의 UUID와 같은 특정 데이터 필드를 고유 키로 사용할 수있는 경우.

➡️ ValueKey

7. 키로 사용할 고유 필드가 없지만 개체 자체가 고유 한 경우.

➡️ ObjectKey

8. GlobalKey가 필요한 동일한 유형의 여러 양식 또는 여러 위젯이있는 경우.

➡️ GlobalObjectKey, LabeledGlobalKey whichever is appropriate, similar logic to ValueKey and ObjectKey

❌ 임의 string/number의 키를 키로 사용하지 마십시오. 키의 목적에 위배됩니다 ❌