Flutter 中的key

一 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"),
    );
  }
}