如何在Flutter中检查两个小部件是否重叠？

Question

我想知道在Flutter中是否可以检查两个小部件是否重叠。实际上，我使用Stack叠加了两个AnimatedContainer。我想检查这两个小部件的子项是否重叠。我正在从头开始创建一个游戏，并想要检查碰撞。虽然x和y是可选项，但它们取决于两个对象的高度和宽度，因为它们具有不同的高度和宽度，所以结果非常不准确。

任何帮助将不胜感激。

- Priyanshu Jangra

---

https://dev59.com/X1QJ5IYBdhLWcg3wPDSP - Antonin GAVREL

Answer 1

您可以将一个 `key` 传递给小部件，然后使用 `key.currentContext.findRenderObject()` 来获取渲染对象。

以下是一个可工作的示例。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(home: MyPage());
}

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> with WidgetsBindingObserver {
  final containerKey1 = GlobalKey();
  final containerKey2 = GlobalKey();

  Alignment box2Align = Alignment.topRight;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: [
            Align(
              alignment: Alignment.topLeft,
              child: Container(
                key: containerKey1,
                color: Colors.pink,
                width: 100.0,
                height: 100.0,
              ),
            ),
            Align(
              alignment: box2Align,
              child: Transform.translate(
                offset: const Offset(10.0, 10.0),
                child: Container(
                  key: containerKey2,
                  color: Colors.purple.withOpacity(0.75),
                  width: 100.0,
                  height: 100.0,
                ),
              ),
            ),
            // Buttons
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                FlatButton(
                  color: Colors.yellow,
                  child: Text('Move containers'),
                  onPressed: () => setState(() {
                    if (box2Align == Alignment.topRight)
                      box2Align = Alignment.topLeft;
                    else
                      box2Align = Alignment.topRight;
                  }),
                ),
                FlatButton(
                  color: Colors.yellow,
                  child: Text('Check if boxesCollide'),
                  onPressed: _onCheckTap,
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  void _onCheckTap() {
    RenderBox box1 = containerKey1.currentContext.findRenderObject();
    RenderBox box2 = containerKey2.currentContext.findRenderObject();

    final size1 = box1.size;
    final size2 = box2.size;

    final position1 = box1.localToGlobal(Offset.zero);
    final position2 = box2.localToGlobal(Offset.zero);

    final collide = (position1.dx < position2.dx + size2.width &&
        position1.dx + size1.width > position2.dx &&
        position1.dy < position2.dy + size2.height &&
        position1.dy + size1.height > position2.dy);

    print('Containers collide: $collide');
  }
}

- YoBo

---

现在它有点过时了。你仍然可以使用它，只需在findRenderObejct方法后调用“as RenderBox”。 - JBTG