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

您可以创建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);
  }
}

Answer 2

我将解决方案放在外部类中

class Utils {
  static Offset getPositionBottomLeft(GlobalKey parentKey, GlobalKey childKey) {
    final parentBox = parentKey.currentContext.findRenderObject() as RenderBox;
    final parentPosition = parentBox.localToGlobal(Offset.zero);
    final parentHeight = parentBox.size.height;

    final childBox = childKey.currentContext.findRenderObject() as RenderBox;
    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);
  }
}

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

2 个答案: