Flutter 获取 Widget 高宽终极指南：使用 GlobalKey 精准测量

在 Flutter 开发中，获取 Widget 的尺寸信息是常见的需求，例如动态调整布局、实现动画效果等。GlobalKey 为我们提供了一种便捷的方式来实现这一目标。

GlobalKey 简介

GlobalKey 是 Flutter 中的一种特殊 Key，它可以在 Widget 树中全局唯一地标识一个 Widget。通过 GlobalKey，我们可以在 Widget 渲染完成后获取其对应的 RenderObject 对象，进而获取 Widget 的各种属性，包括尺寸信息。

使用 GlobalKey 获取 Widget 高宽的步骤

以下是使用 GlobalKey 获取 Widget 高宽的详细步骤：

创建 GlobalKey 对象

首先，我们需要创建一个 GlobalKey 对象，并将其与目标 Widget 相关联。
```
Container(     key: _key,     // 其他属性   )   ```
```
获取 RenderBox 对象

在 Widget 渲染完成后，我们可以通过 GlobalKey 的 currentContext 属性获取其对应的 BuildContext 对象，进而获取 RenderBox 对象。

dart BuildContext? context = _key.currentContext; if (context != null) { RenderBox renderBox = context.findRenderObject() as RenderBox; // 使用 renderBox 获取尺寸信息 }
获取 Widget 高宽

获取到 RenderBox 对象后，我们就可以通过其 size 属性获取 Widget 的宽度和高度。

dart double width = renderBox.size.width; double height = renderBox.size.height;

示例代码dartimport 'package:flutter/material.dart';

class MyWidget extends StatefulWidget { const MyWidget({Key? key}) : super(key: key);

@override State createState() => _MyWidgetState();}

class _MyWidgetState extends State { final GlobalKey _containerKey = GlobalKey(); double _width = 0; double _height = 0;

@override void initState() { super.initState(); // 在 Widget 渲染完成后获取尺寸信息 WidgetsBinding.instance.addPostFrameCallback((_) { _getWidgetSize(); }); }

void _getWidgetSize() { BuildContext? context = _containerKey.currentContext; if (context != null) { RenderBox renderBox = context.findRenderObject() as RenderBox; setState(() { _width = renderBox.size.width; _height = renderBox.size.height; }); } }

@override Widget build(BuildContext context) { return Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Container( key: _containerKey, width: 200, height: 100, color: Colors.blue, ), SizedBox(height: 20), Text('宽度: $_width'), Text('高度: $_height'), ], ), ); }}

注意事项

使用 GlobalKey 获取 Widget 尺寸信息时，需要确保 Widget 已经完成渲染。* 过度使用 GlobalKey 会影响应用性能，请谨慎使用。

希望本指南能够帮助您在 Flutter 中轻松获取 Widget 的高宽信息。 Happy coding!