Flutter调用setState后如何自动获取Container组件的最新dx、dy坐标

要实现点击按钮后自动打印Container的最新坐标，我们可以通过GlobalKey获取组件渲染对象，配合帧绘制回调拿到更新后的坐标值。

核心逻辑说明 #

• 给需要获取坐标的Container绑定唯一GlobalKey，用于后续获取它的渲染实例
• 不能直接在setState执行后立刻读取坐标，因为setState仅标记组件需要重绘，UI还未完成更新
• 使用WidgetsBinding.instance.addPostFrameCallback监听帧绘制完成事件，此时拿到的是最新的布局坐标
• 通过RenderBox.localToGlobal(Offset.zero)即可拿到组件左上角相对于屏幕全局坐标系的dx、dy值

完整修改后代码 #

import 'package:flutter/material.dart';

class Data extends StatefulWidget {
  Data({super.key});

  @override
  DataState createState() => DataState();
}

class DataState extends State<Data> {
  double height = 10.0;
  // 绑定目标Container的GlobalKey
  final GlobalKey _containerKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(Icons.add),
          onPressed: () {
            setState(() {
              height += 10.0;
            });
            // 等当前帧UI更新完成后读取坐标
            WidgetsBinding.instance.addPostFrameCallback((_) {
              final RenderBox? renderBox = _containerKey.currentContext?.findRenderObject() as RenderBox?;
              if (renderBox != null) {
                Offset position = renderBox.localToGlobal(Offset.zero);
                print('Container最新坐标：dx=${position.dx}, dy=${position.dy}');
              }
            });
          },
        ),
      ),
      body: Column(
        children: [
          SizedBox(
            height: height,
          ),
          Container(
            key: _containerKey,
            color: Colors.red,
            height: 25,
          )
        ],
      ),
    );
  }
}

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