如何检查两个小部件是不是在颤动中重叠？

Posted 2023-02-23

【中文标题】如何检查两个小部件是不是在颤动中重叠？

【英文标题】：How to check if two widgets are overlapping in flutter?如何检查两个小部件是否在颤动中重叠？

【发布时间】：2021-05-23 21:03:58

【问题描述】：

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

任何帮助将不胜感激。

【问题讨论】：

***.com/questions/54291245/…

【参考方案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');