Positioned widget with GestureDetector, Dragging a widget will go off the screen.

huangapple go评论69阅读模式
英文:

Positioned widget with GestureDetector, Dragging a widget will go off the screen

问题

我正在尝试使用GestureDetector拖动一个容器,但当我拖动到屏幕的边缘时,容器会超出屏幕。

我希望它在达到屏幕边缘时停止。

以下是示例代码

import 'package:flutter/material.dart';

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

  @override
  State<DrawDraggableRectangle> createState() => _DrawDraggableRectangleState();
}

class _DrawDraggableRectangleState extends State<DrawDraggableRectangle> {
  double zoneHeight = 122;
  double zoneWidth = 112;
  double topY = 21;
  double leftX = 16;
  late double initX;
  late double initY;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          top: topY,
          left: leftX,
          child: GestureDetector(
            onPanStart: (DragStartDetails details) {
              setState(() {
                initX = details.globalPosition.dx;
                initY = details.globalPosition.dy;
              });
            },
            onPanUpdate: (DragUpdateDetails details) {
              final dx = details.globalPosition.dx - initX;
              final dy = details.globalPosition.dy - initY;
              initX = details.globalPosition.dx;
              initY = details.globalPosition.dy;
              setState(() {
                topY = topY + dy;
                leftX = leftX + dx;
                // 这里可以添加一些边界检查逻辑
                // 确保容器不会超出屏幕边缘
              });
            },
            child: Container(
              height: zoneHeight,
              width: zoneWidth,
              //color: Colors.red.withOpacity(0.5),
              decoration: BoxDecoration(
                color: Colors.transparent,
                border: Border.all(
                    color: Colors.pink, // 设置边框颜色
                    width:
                        3.0), // 设置边框宽度// 使边框具有圆角
              ),
            ),
          ),
        ),
      ],
    );
  }
}
英文:

Im trying to Drag a container with GestureDetector, but when i dragg to the edges of the screen the container is going off the screen.

I wanted it to stop when it reaches the edges of the screen.

Positioned widget with GestureDetector, Dragging a widget will go off the screen.

Here is the example code

import &#39;package:flutter/material.dart&#39;;

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

  @override
  State&lt;DrawDraggableRectangle&gt; createState() =&gt; _DrawDraggableRectangleState();
}

class _DrawDraggableRectangleState extends State&lt;DrawDraggableRectangle&gt; {
  double zoneHeight = 122;
  double zoneWidth = 112;
  double topY = 21;
  double leftX = 16;
  late double initX;
  late double initY;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          top: topY,
          left: leftX,
          child: GestureDetector(
            onPanStart: (DragStartDetails details) {
              setState(() {
                initX = details.globalPosition.dx;
                initY = details.globalPosition.dy;
              });
            },
            onPanUpdate: (DragUpdateDetails details) {
              final dx = details.globalPosition.dx - initX;
              final dy = details.globalPosition.dy - initY;
              initX = details.globalPosition.dx;
              initY = details.globalPosition.dy;
              setState(() {
                topY = topY + dy;
                leftX = leftX + dx;
              });
            },
            child: Container(
              height: zoneHeight,
              width: zoneWidth,
              //color: Colors.red.withOpacity(0.5),
              decoration: BoxDecoration(
                color: Colors.transparent,
                border: Border.all(
                    color: Colors.pink, // Set border color
                    width:
                        3.0), // Set border width// Make rounded corner of border
              ),
            ),
          ),
        ),
      ],
    );
  }
}

答案1

得分: 1

你可以尝试使用clamp()函数将分配给y和x的值限制在屏幕的边界上。在下面的示例中,我使用了double.infinity作为上限值,因为此时我们不知道屏幕的确切大小。

            onPanUpdate: (DragUpdateDetails details) {
              final dx = details.globalPosition.dx - initX;
              final dy = details.globalPosition.dy - initY;
              initX = details.globalPosition.dx;
              initY = details.globalPosition.dy;
              setState(() {
                topY = (topY + dy).clamp(0.0, double.infinity);
                leftX = (leftX + dx).clamp(0.0, double.infinity);
              });
            },

DartPad上查看此示例的实际效果。

如果你想确保Positioned保持在任意边界内,可以尝试在Stack周围使用LayoutBuilder来获取约束条件。然后,你可以以类似的方式将右边缘和底边限制在这些约束内。

英文:

You can try to clamp() the values assigned to y and x to the boundaries of your screen. In the example below I used double.infinity for the upper value as we don't know exact size of the screen at this time.

            onPanUpdate: (DragUpdateDetails details) {
              final dx = details.globalPosition.dx - initX;
              final dy = details.globalPosition.dy - initY;
              initX = details.globalPosition.dx;
              initY = details.globalPosition.dy;
              setState(() {
                topY = (topY + dy).clamp(0.0, double.infinity);
                leftX = (leftX + dx).clamp(0.0, double.infinity);
              });
            },

See this in practice using DartPad

If you'd like to make sure that the Positioned stays within arbitrary bounds you may try to use LayoutBuilder around Stack to get the constraints. Then you would be able to clamp the right and bottom edge in a similar way.

huangapple
  • 本文由 发表于 2023年6月5日 22:32:42
  • 转载请务必保留本文链接:https://go.coder-hub.com/76407498.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定