Flutter中使用GlobalKey获取Widget高度时currentState/context为空的问题

我来帮你搞定这个GlobalKey拿不到Widget状态和上下文的问题，我之前在项目里也踩过这个坑，大概率是这几个细节没处理到位：

1. 确保GlobalKey和目标Widget正确绑定 #

这是最常见的问题——你定义了GlobalKey，但没把它传递给对应的Widget，导致key和Widget完全没有关联，自然拿不到currentState或currentContext。

• 第一步：初始化类型匹配的GlobalKey
  如果你的TestWidget是StatefulWidget，要定义和它的State类型对应的GlobalKey，而不是普通的GlobalKey：

  final GlobalKey<TestWidgetState> _testWidgetKey = GlobalKey<TestWidgetState>();
  

• 第二步：把key传递给目标Widget
  在TestPage的build方法里，必须将这个key传给TestWidget的构造函数：

  body: TestWidget(key: _testWidgetKey),
  

  同时TestWidget的构造函数要接收这个key（Flutter 3.0+可以用super.key简化）：

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

2. 确认调用时机确实在Widget挂载后 #

即使你以为是布局渲染完成后调用，也可能时机太早（比如在initState里直接调用，此时Widget还没插入到Widget树中）。正确的做法是用WidgetsBinding.instance.addPostFrameCallback，确保在第一帧渲染完成后执行获取高度的逻辑：

@override
void initState() {
  super.initState();
  // 在第一帧渲染完成后触发
  WidgetsBinding.instance.addPostFrameCallback((_) {
    _getWidgetHeight();
  });
}

3. 避免在build方法里初始化GlobalKey #

如果你的GlobalKey是在build方法里定义的，每次build执行都会生成新的key，导致之前的key失效，自然拿不到关联的Widget状态。必须在State的初始化阶段（比如构造函数或initState）初始化GlobalKey，保证它的唯一性。

完整修正代码示例 #

import 'package:flutter/material.dart';

class TestPage extends StatefulWidget {
  @override
  State<TestPage> createState() => TestPageState();
}

class TestPageState extends State<TestPage> {
  // 初始化对应State类型的GlobalKey
  final GlobalKey<TestWidgetState> _testWidgetKey = GlobalKey<TestWidgetState>();

  @override
  void initState() {
    super.initState();
    // 第一帧渲染完成后获取高度
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _getWidgetHeight();
    });
  }

  void _getWidgetHeight() {
    if (_testWidgetKey.currentContext != null) {
      // 获取RenderBox并计算尺寸
      final RenderBox renderBox = _testWidgetKey.currentContext!.findRenderObject() as RenderBox;
      final Size widgetSize = renderBox.size;
      print("TestWidget的高度：${widgetSize.height}");
    } else {
      print("currentContext为null，请检查key是否绑定正确或Widget是否已挂载");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("测试页面")),
      // 将key传递给TestWidget
      body: TestWidget(key: _testWidgetKey),
    );
  }
}

class TestWidget extends StatefulWidget {
  // 接收父组件传递的key
  const TestWidget({super.key});

  @override
  State<TestWidget> createState() => TestWidgetState();
}

class TestWidgetState extends State<TestWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      width: double.infinity,
      color: Colors.blueAccent,
      child: const Center(child: Text("目标测试Widget")),
    );
  }
}

额外排查点 #

如果还是出现null，检查这两个情况：

• 目标Widget是否被条件渲染（比如在if语句中），如果条件不满足，Widget没有被插入到Widget树中，key自然拿不到上下文；
• 确保一个GlobalKey只绑定一个Widget，不要重复使用同一个key给多个Widget。

内容的提问来源于stack exchange，提问作者Tobias Gubo