Flutter 中的key

最新推荐文章于 2025-10-24 20:14:14 发布

原创最新推荐文章于 2025-10-24 20:14:14 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android

Flutter 相关专栏收录该内容

39 篇文章

订阅专栏

本文介绍了Flutter中的Key分类，包括LocalKey和GlobalKey。LocalKey有ValueKey、ObjectKey和UniqueKey，用于同级Widget的比较。GlobalKey则提供全局唯一性，可用于访问Widget的State和Context。示例代码展示了如何使用GlobalKey来获取Widget的属性和状态。

一 Key 的分类

Flutter 中的key 主要分为两类，

LocalKey : 应用于具有相同父Element的Widget 进行比较，也是diff 算法的核心所在

GlobalKey ：通常我们会使用GlobalKey 某个widget 对应的Widget 或State 或者Element

二 LocalKey的分类

1 ValueKey：

ValueKey是当我们以特定的值作为key时使用，比如一个字符串、数字等等

2 ObjectKey：

如果两个学生，他们的名字一样，使用name作为他们的key就不合适了
我们可以创建出一个学生对象，使用对象来作为key

3 UniqueKey

如果我们要确保key的唯一性，可以使用UniqueKey；
比如我们之前使用随机数来保证key的不同，这里我们就可以换成UniqueKey；

三 GlobalKey

使用方式就是声明一个globalKey,再把这个globalKey传给想要放到的widget里面

通过这个globalKey 可以访问到

currentContext: 可以找到包括renderBox在内的各种element有关的东西

// 这里可以通过currentContext 找到findRenderObject RenderBox属性里面
          RenderBox? renderObj =
              contentKey.currentContext?.findRenderObject() as RenderBox;
          print(renderObj.size);

currentWidget: 可以得到widget的属性

currentState: 可以得到state里面的变量.

1 简单使用

import 'package:flutter/material.dart';

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

  @override
  State<GlobalKeyDemoPage> createState() => _GlobalKeyDemoPageState();
}

class _GlobalKeyDemoPageState extends State<GlobalKeyDemoPage> {
  final GlobalKey<_GKDContentPageState> contentKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("123"),
      ),
      body: GKDContentPage(key: contentKey),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 获取其name 的值
          print("${contentKey.currentState!.widget.name}");
          // 获取其message 的值
          print("${contentKey.currentState!.message}");
          print("${contentKey.currentContext}");
        },
        child: Icon(Icons.add_a_photo),
      ),
    );
  }
}

class $ {}

class GKDContentPage extends StatefulWidget {
  final String name = "everything will be fine !!!";
  const GKDContentPage({super.key});

  @override
  State<GKDContentPage> createState() => _GKDContentPageState();
}

class _GKDContentPageState extends State<GKDContentPage> {
  final String message = "just do right things !!!";
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("GKDContentPage"),
    );
  }
}