Flutter 里的 key 是什么？有什么用？

Flutter 里的 key 是什么？有什么用？

在 Flutter 中，Key 是一种标识符，用于帮助框架区分和管理不同的 widget 实例。它可以防止在重新构建界面时，Flutter 不必要地销毁和重建 widget，从而更高效地更新 UI。Key 通常用于需要保持状态或优化性能的场景。

Flutter 中 Key 的作用

在 Flutter 的 widget 树中，每当界面发生变化时，Flutter 会尝试对比新旧 widget 树的差异，然后进行必要的更新。如果某些 widget 的位置改变或被替换，Flutter 可能会在没有 Key 的情况下重新创建它们，而这可能导致状态丢失等问题。Key 的主要作用就是帮助 Flutter 确认一个 widget 在重建过程中是否相同。通过为 widget 提供 Key，Flutter 可以根据 Key 来匹配和识别 widget，即使它们在树中的位置发生了变化。

常见的 Key 类型

1. GlobalKey

   GlobalKey 是全局唯一的 Key，允许在 widget 树的任何地方访问对应 widget 的状态。它适用于需要跨组件访问状态或在多个地方共享同一状态的场景。

   import 'package:flutter/material.dart';
   
   void main() {
     final GlobalKey myGlobalKey = GlobalKey();
     runApp(MyApp(myGlobalKey));
   }
   
   class MyApp extends StatelessWidget {
     final GlobalKey myGlobalKey;
   
     MyApp(this.myGlobalKey);
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(title: Text('GlobalKey Example')),
           body: Center(
             child: MyWidget(key: myGlobalKey),
           ),
           floatingActionButton: FloatingActionButton(
             onPressed: () {
               // Access the state of MyWidget using myGlobalKey
               final state = myGlobalKey.currentState as MyWidgetState;
               print(state.someData);
             },
             tooltip: 'Get State',
             child: Icon(Icons.info),
           ),
         ),
       );
     }
   }
   
   class MyWidget extends StatefulWidget {
     @override
     _MyWidgetState createState() => _MyWidgetState();
   }
   
   class _MyWidgetState extends State<MyWidget> {
     String someData = 'Hello, World!';
   
     @override
     Widget build(BuildContext context) {
       return Text(someData);
     }
   }
   

2. ValueKey

   ValueKey 是根据给定的值创建的 Key。当 ValueKey 的值相同，Flutter 会认为是同一个 widget。ValueKey 通常用于列表项等不需要全局唯一的元素。

   import 'package:flutter/material.dart';
   
   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(title: Text('ValueKey Example')),
           body: ListView.builder(
             itemCount: 10,
             itemBuilder: (context, index) {
               return ListTile(
                 key: ValueKey(index),
                 title: Text('Item $index'),
               );
             },
           ),
         ),
       );
     }
   }
   

3. UniqueKey

   UniqueKey 是一个总是唯一的 Key，即使是两个 UniqueKey 实例之间也不会相同。它适用于需要确保每个 widget 都唯一的情况。

   import 'package:flutter/material.dart';
   
   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(title: Text('UniqueKey Example')),
           body: Column(
             children: List.generate(
               5,
               (index) => UniqueWidget(key: UniqueKey()),
             ),
           ),
         ),
       );
     }
   }
   
   class UniqueWidget extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Container(
         color: Colors.primary,
         height: 50,
         child: Center(child: Text('Unique Widget')),
       );
     }
   }
   

什么时候使用 Key？

Key 通常在以下场景中使用：

1. 可重排序的列表：在 ListView 或 GridView 中使用 Key 来跟踪每个列表项，确保用户在重排序时状态不会丢失。

2. 有状态的组件：当组件的重建会导致状态丢失时，可以通过 Key 来帮助 Flutter 区分组件的不同实例，从而保留其状态。

3. 复杂的 UI 结构：在一些复杂布局或动态修改 widget 的情况下，使用 Key 可以避免 Flutter 误认为某些 widget 是新的，从而避免无谓的重建。

总结

在 Flutter 中，Key 是一种优化工具，用于控制 widget 在重建过程中的标识性。通过合理使用 Key，可以确保应用在界面更新时保留状态、优化性能。