Flutter中如何获取widget在屏幕上的绝对坐标？

Question

Flutter中如何获取widget在屏幕上的绝对坐标？

或其在父级中的偏移量

示例：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple app',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SimpleScreen(
        title: 'Simple screen',
      ),
    );
  }
}

class SimpleScreen extends StatefulWidget {
  final String title;

  SimpleScreen({Key key, this.title}) : super(key: key);

  @override
  _SimpleScreenState createState() => new _SimpleScreenState();
}

class _SimpleScreenState extends State<SimpleScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          width: 48.0,
          height: 48.0,
          color: Colors.blue,
        ),
      ),
    );
  }
}

目标是获取 Container 在父级中的偏移量。如果 Center 的大小是 48.0，那么 Container 在 Center 的父/根中的偏移量

条件：您不知道包装器布局（它是一个库小部件），应该灵活，没有硬编码值

谢谢

Answer 1

你可以使用我写的这个扩展（需要 Dart 2.6）：

extension GlobalKeyExtension on GlobalKey {
  Rect? get globalPaintBounds {
    final renderObject = currentContext?.findRenderObject();
    final translation = renderObject?.getTransformTo(null).getTranslation();
    if (translation != null && renderObject?.paintBounds != null) {
      final offset = Offset(translation.x, translation.y);
      return renderObject!.paintBounds.shift(offset);
    } else {
      return null;
    }
  }
}

如何使用它的示例：

final containerKey = GlobalKey();

Container(
  key: containerKey,
  width: 100,
  height: 50,
)

void printWidgetPosition() {
  print('absolute coordinates on screen: ${containerKey.globalPaintBounds}');
}

您还可以看到 Daniel 的类似解决方案，但使用

BuildContext

（使用

GlobalKey

相对昂贵）。

Answer 2

根据文档，使用

GlobalKey

相对昂贵。你可以只使用一个 Element(

BuildContext

) 来计算它的全局边界。我从@vovahost改进了上面的解决方案：

extension GlobalPaintBounds on BuildContext {
  Rect? get globalPaintBounds {
    final renderObject = findRenderObject();
    final translation = renderObject?.getTransformTo(null).getTranslation();
    if (translation != null && renderObject?.paintBounds != null) {
      final offset = Offset(translation.x, translation.y);
      return renderObject!.paintBounds.shift(offset);
    } else {
      return null;
    }
  }
}

Answer 3

我更改了@vovahost扩展功能，因为它在转换后的小部件中不起作用（例如

RotatedBox

内的小部件）。这适用于所有小部件。

extension GlobalKeyExtension on GlobalKey {
  Rect? get globalPaintBounds {
    final renderObject = currentContext?.findRenderObject();
    final matrix = renderObject?.getTransformTo(null);

    if (matrix != null && renderObject?.paintBounds != null) {
      final rect = MatrixUtils.transformRect(matrix, renderObject!.paintBounds);
      return rect;
    } else {
      return null;
    }
  }
}

Answer 4

为了根据一些评论者的要求提供丹尼尔答案的完整背景，以下是如何实现它：

1. 在类外包含以下代码：

extension GlobalPaintBounds on BuildContext {
  Rect? get globalPaintBounds {
    final renderObject = findRenderObject(); // Get the RenderObject associated with the widget
    final translation = renderObject?.getTransformTo(null).getTranslation(); // Get its transformation matrix and extract translation
    
    if (translation != null && renderObject?.paintBounds != null) {
      final offset = Offset(translation.x, translation.y); // Convert translation to Offset
      return renderObject!.paintBounds.shift(offset); // Shift the paint bounds by the offset
    } else {
      return null;
    }
  }
}

2. 只需调用

   context.globalPaintBounds

   ，就像我刚刚测试的下面的例子：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Example App'),
    ),
    body: Center(
      child: GestureDetector(
        onTap: () {
          final bounds = context.globalPaintBounds;
          if (bounds != null) {
            print('Global coordinates: ${bounds.toString()}');
          } else {
            print('Could not get global bounds');
          }
        },
        child: Container(
          color: Colors.blue,
          width: 100,
          height: 100,
        ),
      ),
    ),
  );
}

奖励：正如评论者所说，如果您在构建方法之外访问它们，则需要使用 WidgetsBinding.instance.addPostFrameCallback 来获取边界。这是一个例子：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SimpleScreen(),
    );
  }
}

class SimpleScreen extends StatefulWidget {
  @override
  _SimpleScreenState createState() => _SimpleScreenState();
}

class _SimpleScreenState extends State<SimpleScreen> {
  GlobalKey _containerKey = GlobalKey();

  @override
  void initState() {
    super.initState();
    // Add the callback to be run after the widget is built
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _getWidgetPosition();
    });
  }

  void _getWidgetPosition() {
    // Access the global bounds of the container after the frame is built
    final RenderBox? renderBox = _containerKey.currentContext?.findRenderObject() as RenderBox?;
    if (renderBox != null) {
      final position = renderBox.localToGlobal(Offset.zero); // Get global coordinates
      print("Container position: $position");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Widget Position Example"),
      ),
      body: Center(
        child: Container(
          key: _containerKey, // Assign key to the widget you want to track
          width: 100,
          height: 100,
          color: Colors.blue,
        ),
      ),
    );
  }
}