Flutter Primeiros passos e jornada avançada (23) Flutter Key

Introdução:
Key é um conceito muito importante no Flutter, que pode nos ajudar a otimizar o desempenho, evitar problemas de reconstrução e garantir que os Widgets sejam atualizados corretamente. Este artigo fornecerá uma análise detalhada do Flutter Key e apresentará como aplicá-lo de maneira flexível no desenvolvimento real.

1. O que é chave?

Key é uma classe abstrata no Flutter, usada para identificar Widgets. Cada Flutter Widget pode usar Key como um identificador exclusivo para se identificar, que também pode ser usado para comparar novos Widgets com Widgets antigos. A chave em si não possui nenhuma implementação específica, mas suas subclasses têm muitos tipos para escolher, como ValueKey, ObjectKey, etc.

As categorias específicas são as seguintes:

1.1Tipos de chave No Flutter, a chave tem principalmente os seguintes tipos:

• ValueKey: Este é o tipo de chave mais comumente usado, que atribui um valor à chave. Quando os valores de duas ValueKeys são iguais, a estrutura Flutter considerará as duas Keys iguais.

• ObjectKey: semelhante ao ValueKey, mas ObjectKey usa uma referência a um objeto.

• UniqueKey: Uma chave exclusiva é gerada toda vez que ela é criada.

• GlobalKey: Esta é uma chave globalmente exclusiva que pode ser referenciada em todo o aplicativo
  

• Chave Local

LocalKey é herdado diretamente de Key. Ele é usado ao comparar widgets com o mesmo elemento pai. Ou seja, no exemplo acima, há um widget com vários filhos que precisa mover seus widgets filhos. Nesse caso, você deve usar Localkey . É também uma chave que usamos mais a cada dia.

Localkey deriva muitas chaves de subclasse:

• ValueKey: ValueKey('String')
• ObjectKey: ObjectKey(Objeto)
• Chave Única: Chave Única()
• Valuekey deriva PageStorageKey: PageStorageKey('value')

Nota: Se for um statelessWidget, então não há necessidade de usar uma chave, porque o widget será reconstruído a cada quadro; e como o statefulWidget usa estado, o estado geralmente armazena em cache muitas variáveis ​​que precisam ser exibidas na UI, e ele não será reconstruído com frequência, então você precisa usar a chave para forçar a alteração.

• ValorKey

Qualquer objeto pode ser passado e seu conteúdo será comparado para ver se é consistente.

  @override
  bool operator ==(Object other) {
    
    
    if (other.runtimeType != runtimeType)
      return false;
    return other is ValueKey<T>
        && other.value == value;
  }

• ObjectKey

Você pode passar qualquer parâmetro e, durante a comparação, ele irá comparar se seus ponteiros são consistentes, ou seja, se são o mesmo objeto.

  @override
  bool operator ==(Object other) {
    
    
    if (other.runtimeType != runtimeType)
      return false;
    return other is ObjectKey
        && identical(other.value, value);
  }

• Chave única

Não há necessidade de passar nenhum parâmetro, cada atualização gerará um novo valor, que normalmente é usado para transições de animação. por exemplo:

         AnimatedSwitcher(
              duration: const Duration(seconds: 1),
              child: Text("no keyrrths", key: UniqueKey()),
            )

Cada vez que o texto for alterado, se uniqueKey não for passado, não haverá efeito de animação gradiente, e se UniqueKey for passado, haverá um efeito de animação gradiente. Porque quando uniqueKey não for passado, será considerado apenas que o widget de texto mudou todas as vezes, e o widget de texto só será substituído por um novo widget, enquanto o elemento ainda será o mesmo e não mudará, então será será considerado que a UI não mudou, então ela não mudará; se um uniqueKey for passado, cada vez que o widget for comparado, ele será considerado um widget diferente porque sua própria chave é inconsistente, resultando na reconstrução do elemento e do renderObject • As duas UIs antes e depois são inconsistentes e ocorrerão efeitos de animação.

• Chave Global

Variáveis ​​globais, como o nome sugere, são únicas em todo o aplicativo, portanto a mesma globalKey só pode ser usada em um widget. Você pode obter o estado e o elemento ou widget correspondente por meio de globalKey, que pode ser usado para alterar o estado ou o valor da variável do estado e atualizar a IU. No entanto, isso não é recomendado. Geralmente é recomendado atualizar a UI controlando variáveis ​​externas.

        floatingActionButton: FloatingActionButton(
          onPressed: (){
    
    
            var state = (_globalKey as BoxState);
            state.count++;
            state.setState(() {
    
    
            });
          },
          child: const Icon(Icons.add),
        ),

2. O papel da chave

2.1 Identificador único

A principal função da Key é identificar exclusivamente o Widget. Quando a estrutura do widget muda, o Flutter identificará a diferença entre o widget antigo e o novo com base na chave para determinar se ele precisa ser reconstruído. Sem Key, o Flutter não será capaz de distinguir diferentes widgets e reconstruirá todos eles, resultando em degradação de desempenho.

2.2 Otimize o desempenho

Por meio do Key, o Flutter pode atualizar com eficiência algumas subárvores na árvore de widgets em vez de reconstruir toda a árvore de widgets. Isso evita reconstruções desnecessárias e melhora o desempenho.

2.3 Evite problemas de reconstrução

Em alguns casos, queremos manter o estado do widget inalterado, mesmo que a posição do widget mude. Key pode nos ajudar a resolver esse problema adicionando uma chave exclusiva ao widget para garantir que o estado original seja retido corretamente ao atualizar a árvore do widget, em vez de redefini-la para o valor padrão.

3. Principais exemplos de uso

3.1 Lista de construção

Ao construir listas, geralmente usamos ListView.builder, neste momento precisamos usar IndexedWidgetBuilder como parâmetro itemBuilder. Para garantir que os itens da lista sejam exibidos e atualizados corretamente, precisamos adicionar uma chave exclusiva para cada item da lista, geralmente usando ValueKey ou ObjectKey.

List<String> items = ["item1", "item2", "item3"];

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    
    
    return ListTile(
      key: ValueKey(items[index]), // 或者使用ObjectKey(items[index])
      title: Text(items[index]),
    );
  },
);

3.2 Atualizar widget

Quando precisarmos atualizar um Widget existente, se o tipo do Widget mudar, o Flutter pensará que este é um Widget diferente, não apenas uma mudança nos atributos, e reconstruirá toda a subárvore. Para evitar esta reconstrução, podemos usar a mesma chave ao atualizar.

ValueKey("myKey") // 使用相同Key更新Widget

4. Principais especificações de uso

4.1 Singularidade

Cada Widget deve ter uma chave única para que o Flutter possa identificar corretamente suas diferenças. Se a mesma chave aparecer, o Flutter reportará um erro e lançará uma exceção.

4.2 Estabilidade

A chave deve ser estável e não deve mudar conforme as propriedades do widget mudam. Se a chave mudar conforme as propriedades do widget mudam, o Flutter pensará que é um widget diferente, fazendo com que ele seja reconstruído.

4.3 Manutenibilidade

A chave deve ser uma string legível e descritiva ou outro tipo. Isso nos ajuda a localizar rapidamente o problema e depurá-lo, se necessário.

Resumir

Key é um conceito muito importante no Flutter, que pode nos ajudar a gerenciar e atualizar melhor os Widgets. Compreender e dominar o uso da chave pode ajudar a otimizar melhor o desempenho, evitar problemas de reconstrução e garantir que os widgets sejam atualizados corretamente.