Flutter新手求助：如何实现长按拖拽时转为图标的TextField组件

直接利用LongPressDraggable的feedback属性就能实现拖拽时切换为Icon的需求，配合DragTarget处理拖拽到目标区域的触发事件，以下是完整实现代码：

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(
      home: Scaffold(
        appBar: AppBar(title: const Text("拖拽TextField示例")),
        body: const DragTextFieldDemo(),
      ),
    );
  }
}

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

  @override
  State<DragTextFieldDemo> createState() => _DragTextFieldDemoState();
}

class _DragTextFieldDemoState extends State<DragTextFieldDemo> {
  final TextEditingController _controller = TextEditingController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 可长按拖拽的TextField
          LongPressDraggable(
            // 拖拽时传递的数据，这里传TextField的内容
            data: _controller.text,
            // 长按开始时取消TextField焦点，避免软键盘干扰
            onLongPress: () => FocusScope.of(context).unfocus(),
            // 拖拽过程中显示的组件（图标样式）
            feedback: const Icon(
              Icons.text_fields,
              size: 40,
              color: Colors.blue,
            ),
            // 平时显示的组件（TextField）
            child: TextField(
              controller: _controller,
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                hintText: "输入内容后长按拖拽",
              ),
            ),
          ),
          const SizedBox(height: 40),
          // 拖拽目标区域
          DragTarget<String>(
            onAccept: (String data) {
              // 拖拽到目标区域触发的事件，这里可以处理数据
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text("拖拽成功！内容：$data")),
              );
            },
            builder: (context, candidateData, rejectedData) {
              return Container(
                width: double.infinity,
                height: 100,
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.green, width: 2),
                  borderRadius: BorderRadius.circular(8),
                ),
                alignment: Alignment.center,
                child: const Text("拖拽到这里"),
              );
            },
          ),
        ],
      ),
    );
  }
}

关键部分说明 #

• LongPressDraggable的feedback：这个属性就是拖拽过程中跟随手指移动的组件，直接设置成你需要的Icon即可，拖拽时会自动替换原有的TextField显示。
• onLongPress回调：长按开始时取消TextField的焦点，避免软键盘还停留在界面上影响拖拽体验。
• DragTarget的onAccept：当拖拽的组件松开并落在目标区域时，会触发这个回调，你可以在这里处理业务逻辑，比如获取拖拽传递的TextField内容。
• data参数：用于在拖拽过程中传递数据，比如示例中传递了TextField的输入内容，方便在目标区域处理。

内容的提问来源于stack exchange，提问作者Gobugi