获取一个小部件相对于另一个的位置

Question

是否有更好的方法来获取一个小部件相对于另一个的位置？

GlobalKey _key = GlobalKey();
GlobalKey _keyRoot = GlobalKey();
RenderBox box = _key.currentContext.findRenderObject();
Offset position = box.localToGlobal(Offset.zero);
RenderBox box2 = _keyRoot.currentContext.findRenderObject();
Offset position2 = box2.localToGlobal(Offset.zero);
double x = position.dx - position2.dx;
double y = position.dy - position2.dy;

此外，我希望位置由左下角给出。

你以前这样做过吗？

Answer 1

我把我的解决方案放在外部类中

class Utils {
static Offset getPositionBottomLeft(GlobalKey parentKey, GlobalKey childKey) {
final parentBox =
parentKey.currentContext!.findRenderObject() as RenderBox?;
if (parentBox == null) {
throw Exception();
}
final childBox = childKey.currentContext!.findRenderObject() as RenderBox?;
if (childBox == null) {
throw Exception();
}
final parentPosition = parentBox.localToGlobal(Offset.zero);
final parentHeight = parentBox.size.height;
final childPosition = childBox.localToGlobal(Offset.zero);
final childHeight = childBox.size.height;
final x = childPosition.dx - parentPosition.dx;
final y =(childPosition.dy + childHeight - parentPosition.dy - parentHeight).abs();
return Offset(x, y);
}
}

Answer 2

您可以创建GlobalKey的扩展来返回小部件的位置：

extension GlobalKeyEx on GlobalKey {
Offset get globalPosition {
final RenderBox box = currentContext?.findRenderObject();
return box?.localToGlobal(Offset.zero);
}
}

然后你计算你的距离，类似于你已经写的：

double x = _key1.globalPosition.dx - _key2.globalPosition.dx;
double y = _key1.globalPosition.dy - _key2.globalPosition.dy;

这里有一个演示它的示例应用程序：

import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark(),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatefulWidget {@override
createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
final key1 = GlobalKey();
final key2 = GlobalKey();
var message = "Tap the button";

@override
Widget build(BuildContext context) {       
return Stack(
children: <Widget>[
Positioned(
key: key1,
top: 120,
left: 40,
child: Text("Widget 1"),
),
Positioned(
key: key2,
top: 150,
left: 100,
child: Text("Widget 2"),
),
Positioned(
top: 200,
left: 10,
child: RaisedButton(            
child: Text("Tap me"),
onPressed: () {
// Compute the distance between the two widgets
var x = key1.globalPosition.dx - key2.globalPosition.dx;
var y = key1.globalPosition.dy - key2.globalPosition.dy;

// we show the absolute distance between the widgets
setState(() => message = "The distance is X: ${x.abs()}, Y: ${y.abs()}");
},
),
),
Positioned(
top: 250,
left: 10,
child: Text(message),
),
],
); 
}
}
extension GlobalKeyEx on GlobalKey {
Offset get globalPosition {
final RenderBox box = currentContext?.findRenderObject();
return box?.localToGlobal(Offset.zero);
}
}