يمكن استخدام PopupMenuButton في Flutter لإنشاء القوائم المنبثقة التي تظهر عند النقر على زر أو عنصر. تتيح هذه الأداة للمطورين إنشاء قوائم منبثقة بسهولة، وتحديد تصميمات مختلفة لها بسهولة. يمكن استخدام PopupMenuButton لإنشاء قوائم منبثقة مختلفة، مثل القوائم الخاصة بالإعدادات، القوائم الخاصة بالتحكم في الحسابات، والمزيد.
خصائص ويدجت PopupMenuButton في فلاتر
1- الخاصية itemBuilder
هذه هي الخاصية المستخدمة لإنشاء عناصر القائمة التي ستظهر عند النقر على ال PopupMenuButton. يجب توفير هذه الدالة عند إنشاء PopupMenuButton. يمكن استخدامها لإنشاء عناصر من نوع PopupMenuItem. يمكن استخدامها كالتالي:
PopupMenuButton(
itemBuilder: (BuildContext context) {
return [
PopupMenuItem(
child: Text('Option 1'),
value: 'Option 1',
),
PopupMenuItem(
child: Text('Option 2'),
value: 'Option 2',
),
PopupMenuItem(
child: Text('Option 3'),
value: 'Option 3',
),
];
},
);
“اقرأ أيضاً: شرح استخدام PositionedDirectional في فلاتر“
2- الخاصية onSelected
هذا الخيار يتم استخدامه لتعيين دالة تستدعى عند تحديد عنصر من القائمة. ستتلقى الدالة القيمة التي تم تحديدها. يمكن استخدامها كالتالي:
PopupMenuButton(
itemBuilder: (BuildContext context) {
return [
PopupMenuItem(
child: Text('Option 1'),
value: 'Option 1',
),
PopupMenuItem(
child: Text('Option 2'),
value: 'Option 2',
),
PopupMenuItem(
child: Text('Option 3'),
value: 'Option 3',
),
];
},
onSelected: (value) {
// أدخل الإجراء الذي سيتم تنفيذه عند اختيار عنصر من القائمة المنبثقة هنا
print('Selected value: $value');
},
);
“اقرأ أيضاً: شرح استخدام ويدجت DropdownButton في فلاتر“
3- الخاصية initialValue
هذا الخيار يمكن استخدامه لتحديد القيمة الافتراضية للقائمة. يتم تمييز العنصر الذي يتم تحديده بدلاً من الافتراضي بعلامة تحديد. يمكن استخدامه كالتالي:
PopupMenuButton(
itemBuilder: (BuildContext context) {
return [
PopupMenuItem(
child: Text('Option 1'),
value: 'Option 1',
),
PopupMenuItem(
child: Text('Option 2'),
value: 'Option 2',
),
PopupMenuItem(
child: Text('Option 3'),
value: 'Option 3',
),
];
},
initialValue: 'Option 1',
onSelected: (value) {
// أدخل الإجراء الذي سيتم تنفيذه عند اختيار عنصر من القائمة المنبثقة هنا
},
);
4- الخاصية tooltip
هذا الخيار يمكن استخدامه لتعيين نص توضيحي عند تمرير المؤشر فوق PopupMenuButton. يمكن استخدامه كالتالي:
PopupMenuButton(
itemBuilder: (BuildContext context) {
return [
PopupMenuItem(
child: Text('Option 1'),
value: 'Option 1',
),
PopupMenuItem(
child: Text('Option 2'),
value: 'Option 2',
),
PopupMenuItem(
child: Text('Option 3'),
value: 'Option 3',
),
];
},
tooltip: 'Show options',
onSelected: (value) {
// أدخل الإجراء الذي سيتم تنفيذه عند اختيار عنصر من القائمة المنبثقة هنا
);
5- الخاصية elevation
هذا الخيار يمكن استخدامه لتعيين الارتفاع الافتراضي للقائمة المنبثقة. يمكن استخدامه كالتالي:
PopupMenuButton(
elevation: 8,
itemBuilder: (BuildContext context) => <PopupMenuEntry>[
const PopupMenuItem(
value: 'value1',
child: Text('Item 1'),
),
const PopupMenuItem(
value: 'value2',
child: Text('Item 2'),
),
const PopupMenuItem(
value: 'value3',
child: Text('Item 3'),
),
],
)
6- الخاصية icon
هذا الخيار يمكن استخدامه لتعيين رمز الأيقونة الذي سيتم استخدامه لعنصر PopupMenuButton. يمكن استخدامه كالتالي:
PopupMenuButton(
icon: Icon(Icons.more_vert),
itemBuilder: (BuildContext context) => <PopupMenuEntry>[
const PopupMenuItem(
value: 'value1',
child: Text('Item 1'),
),
const PopupMenuItem(
value: 'value2',
child: Text('Item 2'),
),
const PopupMenuItem(
value: 'value3',
child: Text('Item 3'),
),
],
)
7- الخاصية offset
هذا الخيار يمكن استخدامه لتعيين الإزاحة الافتراضية للقائمة المنبثقة عند النقر على PopupMenuButton. يمكن استخدامه كالتالي:
PopupMenuButton(
offset: Offset(0, 20),
itemBuilder: (BuildContext context) => <PopupMenuEntry>[
const PopupMenuItem(
value: 'value1',
child: Text('Item 1'),
),
const PopupMenuItem(
value: 'value2',
child: Text('Item 2'),
),
const PopupMenuItem(
value: 'value3',
child: Text('Item 3'),
),
],
)
8- الخاصية shape
هذا الخيار يمكن استخدامه لتعيين الشكل الافتراضي للقائمة المنبثقة. يمكن استخدامه كالتالي:
PopupMenuButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
itemBuilder: (BuildContext context) => <PopupMenuEntry>[
const PopupMenuItem(
value: 'value1',
child: Text('Item 1'),
),
const PopupMenuItem(
value: 'value2',
child: Text('Item 2'),
),
const PopupMenuItem(
value: 'value3',
child: Text('Item 3'),
),
],
)
9- الخاصية constraints
هذا الخيار يمكن استخدامه لتحديد القيود التي يجب تطبيقها على حجم القائمة المنبثقة. يمكن استخدامه كالتالي:
PopupMenuButton(
constraints: BoxConstraints(
minWidth: 100,
maxWidth: 200,
),
itemBuilder: (BuildContext context) => <PopupMenuEntry>[
const PopupMenuItem(
value: 'value1',
child: Text('Item 1'),
),
const PopupMenuItem(
value: 'value2',
child: Text('Item 2'),
),
const PopupMenuItem(
value: 'value3',
child: Text('Item 3'),
),
],
)
10- الخاصية color
هذا الخيار يمكن استخدامه لتعيين لون الخلفية للقائمة المنبثقة. يمكن استخدامه كالتالي:
PopupMenuButton(
color: Colors.grey,
itemBuilder: (BuildContext context) => <PopupMenuEntry>[
const PopupMenuItem(
value: 'value1',
child: Text('Item 1'),
),
const PopupMenuItem(
value: 'value2',
child: Text('Item 2'),
),
const PopupMenuItem(
value: 'value3',
child: Text('Item 3'),
),
],
)
“اقرأ أيضاً: شرح استخدام ويدجت SwitchListTile في فلاتر“
PopupmenuButton هو أداة مهمة في Flutter لإنشاء القوائم المنبثقة بسهولة. يمكن استخدامها لإنشاء قوائم منبثقة مختلفة وتحديد تصميمات مختلفة لها بسهولة. يمكن استخدام الخصائص المختلفة لتخصيص القوائم المنبثقة وتحديد الإجراءات التي يتم تنفيذها عند اختيار عنصر من القائمة المنبثقة. لمزيد من المعلومات حول PopupMenuButton وغيرها من أدوات Flutter، يمكن الاطلاع على المستندات الرسمية لـ Flutter.
