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.
 
 
 

79 lines
2.2 KiB

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; // 更新图标位置
});
},
);
}
}