في Flutter ، يمكن استخدام العديد من المكونات لتصميم واجهات المستخدم ، بما في ذلك DragTarget ، الذي يستخدم لإضافة إمكانية إسقاط العناصر في مكان محدد. يمكن استخدام DragTarget في Flutter لتحسين تفاعل المستخدم مع التطبيق.
في هذا المقال ، سنشرح DragTarget ونوضح جميع خصائصه بالتفصيل ونوضح كيفية استخدامه في تصميم واجهات المستخدم.
ما هو DragTarget في فلاتر؟
DragTarget هو واحد من المكونات الأساسية في Flutter والتي تستخدم لإضافة إمكانية إسقاط العناصر في مكان محدد. يمكن استخدام DragTarget في Flutter لتحسين تفاعل المستخدم مع التطبيق.
“اقرأ أيضاً: شرح استخدام ويدجت AnimatedIcon في فلاتر“
خصائص DragTarget
يمكن تحديد خصائص DragTarget باستخدام العديد من الخصائص التي تحدد شكل ومظهر DragTarget والتحكم في المحتوى. يمكن استخدام العديد من الخصائص في DragTarget في Flutter.
1- builder
تسمح هذه الخاصية بتحديد الويدجت التي يتم عرضها عند السحب.
DragTarget<int>(
builder: (BuildContext context, List<int?> candidateData, List<dynamic> rejectedData) {
return Container(
height: 100,
width: 100,
color: candidateData.isEmpty ? Colors.grey : Colors.blue,
);
},
onWillAccept: (data) {
return true;
},
onAccept: (data) {
// Handle accepted data
},
);
“اقرأ أيضاً: شرح استخدام MaterialApp في فلاتر“
2- onWillAccept
تسمح هذه الخاصية بتحديد ما إذا كان DragTarget يقبل البيانات المسقطة.
DragTarget<int>(
builder: (BuildContext context, List<int?> candidateData, List<dynamic> rejectedData) {
return Container(
height: 100,
width: 100,
color: candidateData.isEmpty ? Colors.grey : Colors.blue,
);
},
onWillAccept: (data) {
return true;
},
onAccept: (data) {
// Handle accepted data
},
);
3- onAccept
تسمح هذه الخاصية بتحديد الإجراء الذي يتم تنفيذه عند إسقاط البيانات المسقطة وقبولها.
DragTarget<int>(
builder: (BuildContext context, List<int?> candidateData, List<dynamic> rejectedData) {
return Container(
height: 100,
width: 100,
color: candidateData.isEmpty ? Colors.grey : Colors.blue,
);
},
onWillAccept: (data) {
return true;
},
onAccept: (data) {
// Handle accepted data
},
);
4- onLeave
تسمح هذه الخاصية بتحديد الإجراء الذي يتم تنفيذه عند مغادرة البيانات المسقطة DragTarget.
DragTarget<int>(
builder: (BuildContext context, List<int?> candidateData, List<dynamic> rejectedData) {
return Container(
height: 100,
width: 100,
color: candidateData.isEmpty ? Colors.grey : Colors.blue,
);
},
onWillAccept: (data) {
return true;
},
onAccept: (data) {
// Handle accepted data
},
onLeave: (value){
// Handle when data is left
},
);
5- onMove
تسمح هذه الخاصية بتحديد الإجراء الذي يتم تنفيذه عندما تتحرك البيانات المسقطة داخل DragTarget.
DragTarget<int>(
builder: (BuildContext context, List<int?> candidateData, List<dynamic> rejectedData) {
return Container(
height: 100,
width: 100,
color: candidateData.isEmpty ? Colors.grey : Colors.blue,
);
},
onWillAccept: (data) {
return true;
},
onAccept: (data) {
// Handle accepted data
},
onLeave: (value) {
// Handle when data is left
},
onMove: (details) {
// Handle when data is moved
},
);
6- key
تسمح هذه الخاصية بتحديد مفتاح لـ DragTarget.
DragTarget<int>(
key: Key('drag_target_key'),
builder: (BuildContext context, List<int?> candidateData, List<dynamic> rejectedData) {
return Container(
height: 100,
width: 100,
color: candidateData.isEmpty ? Colors.grey : Colors.blue,
);
},
onWillAccept: (data) {
return true;
},
onAccept: (data) {
// Handle accepted data
},
onLeave: (value) {
// Handle when data is left
},
onMove: (details) {
// Handle when data is moved
},
);
في هذا المقال ، شرحنا DragTarget في Flutter ووضحنا جميع خصائصه بالتفصيل ومثال على استخدام كل خاصية. يمكن استخدام DragTarget في Flutter لإضافة إمكانية إسقاط الويدجت في مكان محدد وبذلك تحسين تفاعل المستخدم مع التطبيق.
