如何在flutter中将定位的小部件拖动到堆栈小部件内

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: ...
  )