Flutter中获取父组件尺寸以限制拖拽方块的移动范围

我正在学习Flutter，想要实现一个可通过鼠标拖拽三个彩色方块的示例，要求方块的移动范围被限制在窗口区域内。已实现位置下边界的限制（位置不能小于0），但尚未找到设置上边界的方法，需要获取父组件的宽高尺寸，但不知如何实现。已知Draggable类可实现类似功能，但出于学习目的，希望使用底层组件来实现，同时想了解多种实现该需求的方法。

原始实现代码 #

import 'dart:math';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Moving Boxes',
      home: MyMainPage(),
    );
  }
}

class MyMainPage extends StatelessWidget {
  const MyMainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
        body: Stack(
        children: <Widget>[
          MovableBox(color: Colors.red, left: 100, top: 100),
          MovableBox(color: Colors.yellow, left: 200, top: 50),
          MovableBox(color: Colors.blue, left: 0, top: 0)
          ]
    ));
  }
}

class MovableBox extends StatefulWidget {
  const MovableBox({super.key, required this.color, this.top = 0, this.left = 0});

  @override
  State<MovableBox> createState() => _MovableBoxState();

  final Color color;
  final double top;
  final double left;
}

class _MovableBoxState extends State<MovableBox> {
  double _left = 0;
  double _top = 0;

  @override
  void initState()
  {
    super.initState();
    _left = widget.left;
    _top = widget.top;
  }

  @override
  Widget build(BuildContext context) {
    return Positioned(
      top:  max(_top, 0), // 此处限制了下边界，我还想限制上边界
      left: max(_left, 0),
      width: 200,
      height: 200,
      child: Container(
        color: widget.color,
        child: GestureDetector(
          onPanUpdate: (details) {
            setState(() {
              _left += details.delta.dx;
              _top += details.delta.dy;
            });
          },
        ),
      ),
    );
  }
}

方案一：通过 MediaQuery 获取屏幕尺寸 #

直接利用MediaQuery.of(context)获取当前窗口的宽高，计算方块可移动的最大边界（窗口尺寸减去方块自身宽高），在更新位置时做双重限制（不小于0，不超过最大边界）。

修改后的_MovableBoxState代码：

class _MovableBoxState extends State<MovableBox> {
  double _left = 0;
  double _top = 0;
  final double _boxSize = 200; // 提取方块固定宽高为常量

  @override
  void initState() {
    super.initState();
    _left = widget.left;
    _top = widget.top;
  }

  @override
  Widget build(BuildContext context) {
    // 获取屏幕可用宽高（自动去除状态栏、导航栏等系统UI占用空间）
    final screenWidth = MediaQuery.of(context).size.width;
    final screenHeight = MediaQuery.of(context).size.height;
    // 计算方块可移动的最大边界
    final maxLeft = screenWidth - _boxSize;
    final maxTop = screenHeight - _boxSize;

    return Positioned(
      top: max(min(_top, maxTop), 0),
      left: max(min(_left, maxLeft), 0),
      width: _boxSize,
      height: _boxSize,
      child: Container(
        color: widget.color,
        child: GestureDetector(
          onPanUpdate: (details) {
            setState(() {
              _left += details.delta.dx;
              _top += details.delta.dy;
              // 提前限制范围，避免setState后出现临时越界的视觉闪烁
              _left = max(min(_left, maxLeft), 0);
              _top = max(min(_top, maxTop), 0);
            });
          },
        ),
      ),
    );
  }
}

方案二：使用 LayoutBuilder 获取父容器尺寸 #

如果方块的父容器不是全屏（比如Scaffold的body有padding、margin），用LayoutBuilder可以获取父组件的实际可用尺寸，比MediaQuery更精准。

1. 修改MyMainPage，用LayoutBuilder包裹Stack #

class MyMainPage extends StatelessWidget {
  const MyMainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) {
          // 将父容器的尺寸约束传递给子组件
          return Stack(
            children: <Widget>[
              MovableBox(color: Colors.red, left: 100, top: 100, parentConstraints: constraints),
              MovableBox(color: Colors.yellow, left: 200, top: 50, parentConstraints: constraints),
              MovableBox(color: Colors.blue, left: 0, top: 0, parentConstraints: constraints),
            ],
          );
        },
      ),
    );
  }
}

2. 修改MovableBox接收约束参数并计算边界 #

class MovableBox extends StatefulWidget {
  const MovableBox({
    super.key,
    required this.color,
    this.top = 0,
    this.left = 0,
    required this.parentConstraints,
  });

  @override
  State<MovableBox> createState() => _MovableBoxState();

  final Color color;
  final double top;
  final double left;
  final BoxConstraints parentConstraints; // 父容器的尺寸约束
}

class _MovableBoxState extends State<MovableBox> {
  double _left = 0;
  double _top = 0;
  final double _boxSize = 200;

  @override
  void initState() {
    super.initState();
    _left = widget.left;
    _top = widget.top;
  }

  @override
  Widget build(BuildContext context) {
    // 基于父容器约束计算最大移动边界
    final maxLeft = widget.parentConstraints.maxWidth - _boxSize;
    final maxTop = widget.parentConstraints.maxHeight - _boxSize;

    return Positioned(
      top: max(min(_top, maxTop), 0),
      left: max(min(_left, maxLeft), 0),
      width: _boxSize,
      height: _boxSize,
      child: Container(
        color: widget.color,
        child: GestureDetector(
          onPanUpdate: (details) {
            setState(() {
              _left += details.delta.dx;
              _top += details.delta.dy;
              _left = max(min(_left, maxLeft), 0);
              _top = max(min(_top, maxTop), 0);
            });
          },
        ),
      ),
    );
  }
}

方案三：使用 GlobalKey 获取父组件尺寸 #

通过GlobalKey绑定父容器，在组件渲染完成后主动获取其实际渲染尺寸，适合需要动态监听父容器尺寸变化的场景。

1. 在MyMainPage中定义GlobalKey并绑定到Stack #

class MyMainPage extends StatefulWidget {
  const MyMainPage({super.key});

  @override
  State<MyMainPage> createState() => _MyMainPageState();
}

class _MyMainPageState extends State<MyMainPage> {
  final _stackKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        key: _stackKey,
        children: <Widget>[
          MovableBox(color: Colors.red, left: 100, top: 100, stackKey: _stackKey),
          MovableBox(color: Colors.yellow, left: 200, top: 50, stackKey: _stackKey),
          MovableBox(color: Colors.blue, left: 0, top: 0, stackKey: _stackKey),
        ],
      ),
    );
  }
}

2. 修改MovableBox接收GlobalKey并计算尺寸 #

class MovableBox extends StatefulWidget {
  const MovableBox({
    super.key,
    required this.color,
    this.top = 0,
    this.left = 0,
    required this.stackKey,
  });

  @override
  State<MovableBox> createState() => _MovableBoxState();

  final Color color;
  final double top;
  final double left;
  final GlobalKey stackKey;
}

class _MovableBoxState extends State<MovableBox> {
  double _left = 0;
  double _top = 0;
  final double _boxSize = 200;
  late double _maxLeft;
  late double _maxTop;

  @override
  void initState() {
    super.initState();
    _left = widget.left;
    _top = widget.top;
    // 组件渲染完成后获取父容器尺寸
    WidgetsBinding.instance.addPostFrameCallback((_) {
      setState(() {
        final stackSize = widget.stackKey.currentContext!.size!;
        _maxLeft = stackSize.width - _boxSize;
        _maxTop = stackSize.height - _boxSize;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    // 初始化时用MediaQuery作为 fallback，避免初始值为空
    final maxLeft = _maxLeft.isNaN ? MediaQuery.of(context).size.width - _boxSize : _maxLeft;
    final maxTop = _maxTop.isNaN ? MediaQuery.of(context).size.height - _boxSize : _maxTop;

    return Positioned(
      top: max(min(_top, maxTop), 0),
      left: max(min(_left, maxLeft), 0),
      width: _boxSize,
      height: _boxSize,
      child: Container(
        color: widget.color,
        child: GestureDetector(
          onPanUpdate: (details) {
            setState(() {
              _left += details.delta.dx;
              _top += details.delta.dy;
              _left = max(min(_left, maxLeft), 0);
              _top = max(min(_top, maxTop), 0);
            });
          },
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者HiFile.app - best file manager