英文:
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.
Here is the example code
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, // 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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论