Flutter关于uniqueKey的使用场景

服务端技术精选 • 2024年5月17日下午11:02 • 技术分享 • 阅读 239

关注我，一起成长，一起变强。

1.uniqueKey的使用

在 Flutter 中，UniqueKey是Key的一个特殊子类，它可以在创建时生成一个全局唯一的标识符。

它有哪些使用场景呢？

1.动态列表中的元素标识

当你需要在ListView、GridView 或其他页面中添加、删除或更新元素时，使用 UniqueKey 可以确保每个元素都具有唯一的标识符。

2.路由跳转时的页面标识

使用 UniqueKey 可以确保每次路由跳转都创建一个新的页面实例，而不是重复使用之前的页面，这样能够保持页面状态的独立性。

示例

class UniqueKeyPage extends StatefulWidget {
  const UniqueKeyPage({super.key});

  @override
  State<UniqueKeyPage> createState() => _UniqueKeyPageState();
}

class _UniqueKeyPageState extends State<UniqueKeyPage> {

  var  _uniqueKey = UniqueKey();
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(''),
      ),
      body: Center(child:  Column(
        children: [
          const Text('使用 UniqueKey 更新的 Widget'), 
          const SizedBox(height: 30,), 
          ElevatedButton(
            onPressed: () {
              setState(() {
                  _uniqueKey = UniqueKey();
              });
            
            }, 
            child: const Text('更新 Widget')),

            const SizedBox(height: 30,),  

            UniqueKeyDemoWidget(key: _uniqueKey),
        ],
      ),
    ));
  }
}

class UniqueKeyDemoWidget extends StatelessWidget {
  const UniqueKeyDemoWidget({super.key});

  @override
  Widget build(BuildContext context) {
    debugPrint('UniqueKeyDemoWidget build');
    return Container(
      width: 200,
      height: 200,
      color: Colors.blue,
      child: const Center(
        child: Text('UniqueKey 示例 Widget'),
      ),
    );
  }
}