如何在颤振状态下拖动堆栈小部件内部的定位小部件

Question

我正在创建一个应用程序，用户可以在其中将文本拖到图像上并生成该图像。我可以将文本小部件拖到图像上，但问题是，如果我们将文本拖到任何方向(上、左、下、右)的末尾，文本就会离开屏幕。我想要的是，如果文本比较大，用户把它拖到右边，它会自动安排到下一行。

这就是我想要的特性。请访问memegenerator，

代码

import 'package:flutter/material.dart';
class DesignScreen extends StatefulWidget {
final String formData;
const DesignScreen({Key? key, required this.formData}) : super(key: key);
@override
State<DesignScreen> createState() => _DesignScreenState();
}
class _DesignScreenState extends State<DesignScreen> {
Offset _offset = Offset.zero;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Design"),
),
body: Column(
children: [
GestureDetector(
child: Stack(
children: [
Image.asset(
"assets/images/oneIO.jpg",
width: double.infinity,
),
Positioned(
top: _offset.dy,
left: _offset.dx,
child: FittedBox(
fit: BoxFit.contain,
child: Text(widget.formData),
),
),
],
),
onPanUpdate: (details) {
setState(() {
_offset = Offset(_offset.dx + details.delta.dx,
_offset.dy + details.delta.dy);
});
},
)
],
),
);
}
}

Answer 1

它们出屏是因为它们的top和left属性太小或太大。可以使用clamp函数将偏移量限制在一定范围内。例如:

Positioned(
top: _offset.dy.clamp(0, 200),
left: _offset.dx.clamp(0, 200),
child: ...
)