You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
2.2 KiB
80 lines
2.2 KiB
4 weeks ago
|
import 'package:flutter/material.dart';
|
||
|
|
||
|
void main2() => runApp(MyApp());
|
||
|
|
||
|
class MyApp extends StatelessWidget {
|
||
|
@override
|
||
|
Widget build(BuildContext context) {
|
||
|
return MaterialApp(home: DragIconDemo());
|
||
|
}
|
||
|
}
|
||
|
|
||
|
class DragIconDemo extends StatefulWidget {
|
||
|
@override
|
||
|
_DragIconDemoState createState() => _DragIconDemoState();
|
||
|
}
|
||
|
|
||
|
class _DragIconDemoState extends State<DragIconDemo> {
|
||
|
// 跟踪图标在哪个容器中(1或2)
|
||
|
int iconContainer = 1;
|
||
|
|
||
|
@override
|
||
|
Widget build(BuildContext context) {
|
||
|
return Scaffold(
|
||
|
appBar: AppBar(title: Text('图标拖拽示例')),
|
||
|
body: Row(
|
||
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||
|
children: [
|
||
|
// 第一个容器
|
||
|
buildContainer(
|
||
|
containerNumber: 1,
|
||
|
child: iconContainer == 1 ? buildDraggableIcon() : null,
|
||
|
),
|
||
|
|
||
|
// 第二个容器
|
||
|
buildContainer(
|
||
|
containerNumber: 2,
|
||
|
child: iconContainer == 2 ? buildDraggableIcon() : null,
|
||
|
),
|
||
|
],
|
||
|
),
|
||
|
);
|
||
|
}
|
||
|
|
||
|
// 构建可拖拽图标
|
||
|
Widget buildDraggableIcon() {
|
||
|
return Draggable<int>(
|
||
|
data: iconContainer, // 传递当前容器编号作为数据
|
||
|
feedback: const Icon(Icons.star, size: 50, color: Colors.amber),
|
||
|
childWhenDragging: const Opacity(
|
||
|
opacity: 0.5,
|
||
|
child: Icon(Icons.star, size: 50, color: Colors.amber),
|
||
|
),
|
||
|
child: const Icon(Icons.star, size: 50, color: Colors.amber),
|
||
|
);
|
||
|
}
|
||
|
|
||
|
// 构建容器(同时也是拖放目标)
|
||
|
Widget buildContainer({required int containerNumber, Widget? child}) {
|
||
|
return DragTarget<int>(
|
||
|
builder: (context, candidateData, rejectedData) {
|
||
|
return Container(
|
||
|
width: 150,
|
||
|
height: 150,
|
||
|
decoration: BoxDecoration(
|
||
|
border: Border.all(color: Colors.blue, width: 2),
|
||
|
borderRadius: BorderRadius.circular(10),
|
||
|
),
|
||
|
child: Center(child: child),
|
||
|
);
|
||
|
},
|
||
|
onWillAcceptWithDetails: (data) => true, // 接受任何拖拽数据
|
||
|
onAcceptWithDetails: (data) {
|
||
|
setState(() {
|
||
|
iconContainer = containerNumber; // 更新图标位置
|
||
|
});
|
||
|
},
|
||
|
);
|
||
|
}
|
||
|
}
|