إضافة إجراءات
خلاصة
حتى الآن، بنينا تطبيقًا بسيطًا يعرض البطاقات. لكن، لا توجد حاليًا طريقة للمستخدم لإضافة بطاقات جديدة إلى عرض البطاقات.
في هذا الدليل، سننظر إلى إجراءات كيريغامي. ستساعدنا هذه الإجراءات في إضافة التفاعلية إلى تطبيقنا بطريقة متسقة وسريعة ويسيرة الوصول.
الإجراءات
يُغلّف Kirigami.Action إجراء واجهة المستخدم. يمكننا استخدام هذه الإجراءات لتزويد تطبيقاتنا بإجراءات سهلة الوصول ضرورية لوظائفها.
إذا كنت قد استخدمت تطبيقات كيريغامي من قبل، فبالتأكيد تفاعلت مع إجراءات كيريغامي. في هذه الصورة، نرى إجراءات على يمين عنوان الصفحة برموز مختلفة. يمكن عرض إجراءات كيريغامي بعدة طرق ويمكنها فعل مجموعة واسعة من الأشياء.


إضافة العدادات التنازلية
تطبيق العد التنازلي عديم الفائدة إلى حد كبير دون القدرة على إضافة عدادات تنازلية. لننشئ إجراءً يتيح لنا فعل ذلك.
pageStack.initialPage: Kirigami.ScrollablePage {
// خصائص الصفحة الأخرى...
actions: [
Kirigami.Action {
id: addAction
icon.name: "list-add-symbolic"
text: i18nc("@action:button", "Add kountdown")
onTriggered: kountdownModel.append({
name: "Kirigami Action added card!",
description: "Congratulations, your Kirigami Action works!",
date: 1000
})
}
]
// ...
}نضع Kirigami.Action الخاص بنا داخل صفحتنا الرئيسية من الدروس السابقة. إذا أردنا، يمكننا إضافة المزيد من الإجراءات إلى صفحتنا (وحتى تداخل الإجراءات داخل إجراءات!).
الأقواس [] المستخدمة أعلاه مشابهة لمصفوفات JavaScript، مما يعني أنه يمكنك تمرير شيء أو أكثر إليها، مفصولة بفاصلة:
// مصفوفة جافا سكريبت عامة للمكونات:
variable: [ component1, component2 ]
// تمرير مصفوفة من إجراءات كيريغامي إلى QML:
actions: [ Kirigami.Action {}, Kirigami.Action {} ]خصائص id و text يجب أن تكون مألوفة من الدروس السابقة. لكن، الخاصية الموروثة Action.icon يجب أن تكون مثيرة للاهتمام: إنها كائن بعدة خصائص تتيح لك عرض رموز معينة لإجراءاتك. لحسن الحظ، لاستخدام رموز كيدي، كل ما نحتاجه هو توفير خاصية الاسم لخاصية الرمز، icon.name.
عرض الرموز المتاحة
انقر هنا لترى كيفية التحقق من الأيقونات المتوفرة في نظامك
مستكشف الأيقونات هو تطبيق كيدي يتيح لك عرض جميع الأيقونات التي يمكنك استعمالها لتطبيقك. يقدم عددًا من الميزات المفيدة مثل معاينات مظهرها عبر السمات المثبتة المختلفة، ومعاينات بأحجام مختلفة، والمزيد. قد تجده أداة مفيدة عند تحديد الأيقونات التي ستستعملها في تطبيقك.
تتبع العديد من رموز كيدي مواصفات تسمية رموز FreeDesktop. لذلك، قد تجد أيضًا من المفيد استشارة موقع مشروع FreeDesktop، الذي يسرد جميع أسماء الرموز المتوافقة عبر أسطح المكتب.
معالج الإشارة onTriggered هو الأهم. هذا ما سيفعله إجراءنا عند استخدامه. ستلاحظ أننا في مثالنا نستخدم طريقة kountdownModel.append من kountdownModel الذي أنشأناه في درسنا السابق. تتيح لنا هذه الطريقة إلحاق عنصر جديد بنموذج القائمة لدينا. نقدم له كائنًا (مشارًا إليه بأقواس معقوفة {}) له الخصائص ذات الصلة بعداداتنا التنازلية (name و description و date كعنصر نائب).

في كل مرة ننقر فيها على زر "Add kountdown" الموجود في أعلى اليمين، يُضاف العد التنازلي المخصص الخاص بنا.

نسخة الجوال
الدرج العام
المكون التالي هو Kirigami.GlobalDrawer. يظهر كقائمة هامبرغر. مبدئيًا، يفتح شريطًا جانبيًا، وهو مفيد بشكل خاص على الجوال، حيث يمكن للمستخدم ببساطة التمرير من جانب الشاشة لفتحه. الأدراج العامة مفيدة للتنقل والإجراءات العامة. سننشئ درجًا عامًا بسيطًا يتضمن زر "خروج".
Kirigami.ApplicationWindow {
id: root
// خصائص النافذة الأخرى...
globalDrawer: Kirigami.GlobalDrawer {
isMenu: true
actions: [
Kirigami.Action {
text: i18n("Quit")
icon.name: "application-exit-symbolic"
shortcut: StandardKey.Quit
onTriggered: Qt.quit()
}
]
}
// ...
}هنا، نضع درجنا العام داخل نافذة التطبيق. الخاصية الرئيسية التي نحتاج إلى الانتباه إليها هي GlobalDrawer.actions، والتي تأخذ شكل مصفوفة من مكونات Kirigami.Action. لهذا الإجراء رمز مناسب وينفذ دالة Qt.quit() عند تشغيله، مما يغلق التطبيق.
بما أننا نبقي درجنا العام بسيطًا الآن، نضبط خاصية GlobalDrawer.isMenu على true. يعرض هذا درجنا العام كقائمة تطبيق عادية، تشغل مساحة أقل من لوحة الدرج العام المبدئية.

الدرج العام

الدرج العام كقائمة
تلميح
صفحة المكونات القائمة على الإجراءات من هذه الوثائق تقدم تفاصيل إضافية حول إجراءات كيريغامي وكيفية استخدامها.الإجراءات سياقية
مكونات كيريغامي مصممة بحيث يكون المكان الذي تضع فيه إجراءات كيريغامي ذا صلة. كما رأينا أعلاه، إذا أضفت إجراءات إلى Kirigami.Page أو Kirigami.ScrollablePage أو أي مكون صفحة مشتق آخر، فستظهر على الجانب الأيمن من الرأس في وضع سطح المكتب، وفي الأسفل في وضع الجوال.
وبالمثل، إذا أُضيفت إجراءات كيريغامي إلى Kirigami.GlobalDrawer، فستظهر في الدرج أو القائمة الناتجة.
أمثلة أخرى على إجراءات كيريغامي التي تظهر بشكل مختلف اعتمادًا على المكون الأصلي لها هي:
- Kirigami.ContextDrawer - دليل ContextDrawer هنا
- Kirigami.AbstractCard ومشتقاته - دليل البطاقات هنا
- Kirigami.Dialog ومشتقاته - دليل الحوارات هنا
- Kirigami.ActionToolBar - دليل شريط أدوات الإجراءات هنا
ضمن مكونات كيريجامي الأخرى.
تطبيقنا حتى الآن
Main.qml:
| |