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

Question

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

39

或其在父元素中的偏移量

示例：

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

目标是获取容器在父元素中的偏移量。如果中心的尺寸为48.0，则容器在中心所在的父元素/根元素中的偏移量。

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

谢谢

- Ihor Klimov

那个例子一点也没帮助。你想用这些信息做什么？ - Rémi Rousselet

嗨，看看这个问题： https://github.com/flutter/flutter/issues/1234 似乎有一个 https://docs.flutter.io/flutter/widgets/CompositedTransformFollower-class.html 可能会对此有所帮助。:) 不过我自己还没有尝试过。 - behzad.robot

@behzad.robot CompositedTransformFollower 解决了在那个 GitHub 问题中提到的具体问题。它不会获取小部件的绝对坐标。 - jamesdlin

4个回答

9

我修改了@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;
    }
  }
}

- Karen Hovhannisyan

它在ListView中也能工作吗？我在vovahost的答案下发表了评论，关于我面临的问题。在ListView中滚动后，测量变得不准确。 - Renegade

8

根据文档，使用GlobalKey相对较昂贵。您可以仅使用元素（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;
    }
  }
}

- Daniel

1

你怎么使用这个？你能提供一个例子吗？ - sagar suri

@sagarsuri 如果你的实例化对象有一个 BuildContext context 属性，你可以在 build 方法中最容易地调用 context.globalPaintBounds。 - Andy Shephard

但是我该如何使用它？在上面的解决方案中，我可以为每个Widget附加一个密钥，但是通过这种修改，我不能为每个Widget分配不同的BuildContext吗？ - Cedric

2

也许这个简单的小部件是你想要的： rect_getter 0.0.1 这是一个小部件，提供了一种简单的方法来获取子元素在渲染后的矩形信息。 demo

- debuggerx

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vovahost · Accepted Answer

你可以使用我编写的这个扩展（需要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相对较昂贵）。