Skip to main content
تخط المحتوى

إضافة إجراءات

سيساعدنا تعلم المزيد عن إجراءات كيريجامي في جعل تطبيقنا أكثر فائدة.

خلاصة

حتى الآن، بنينا تطبيقًا بسيطًا يعرض البطاقات. لكن، لا توجد حاليًا طريقة للمستخدم لإضافة بطاقات جديدة إلى عرض البطاقات.

في هذا الدليل، سننظر إلى إجراءات كيريغامي. ستساعدنا هذه الإجراءات في إضافة التفاعلية إلى تطبيقنا بطريقة متسقة وسريعة ويسيرة الوصول.

الإجراءات

يُغلّف 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.

معالج الإشارة onTriggered هو الأهم. هذا ما سيفعله إجراءنا عند استخدامه. ستلاحظ أننا في مثالنا نستخدم طريقة kountdownModel.append من kountdownModel الذي أنشأناه في درسنا السابق. تتيح لنا هذه الطريقة إلحاق عنصر جديد بنموذج القائمة لدينا. نقدم له كائنًا (مشارًا إليه بأقواس معقوفة {}) له الخصائص ذات الصلة بعداداتنا التنازلية (name و description و date كعنصر نائب).


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

في كل مرة ننقر فيها على زر "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، فستظهر في الدرج أو القائمة الناتجة.

أمثلة أخرى على إجراءات كيريغامي التي تظهر بشكل مختلف اعتمادًا على المكون الأصلي لها هي:

ضمن مكونات كيريجامي الأخرى.

تطبيقنا حتى الآن

Main.qml:
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    id: root

    width: 400
    height: 300

    title: i18nc("@title:window", "Day Kountdown")

    // Global drawer element with app-wide actions
    globalDrawer: Kirigami.GlobalDrawer {
        // Makes drawer a small menu rather than sliding pane
        isMenu: true
        actions: [
            Kirigami.Action {
                text: i18n("Quit")
                icon.name: "application-exit-symbolic"
                shortcut: StandardKey.Quit
                onTriggered: Qt.quit()
            }
        ]
    }

    ListModel {
        id: kountdownModel
        ListElement {
            name: "Dog birthday!!"
            description: "Big doggo birthday blowout."
            date: 100
        }
    }

    Component {
        id: kountdownDelegate
        Kirigami.AbstractCard {
            contentItem: Item {
                implicitWidth: delegateLayout.implicitWidth
                implicitHeight: delegateLayout.implicitHeight
                GridLayout {
                    id: delegateLayout
                    anchors {
                        left: parent.left
                        top: parent.top
                        right: parent.right
                    }
                    rowSpacing: Kirigami.Units.largeSpacing
                    columnSpacing: Kirigami.Units.largeSpacing
                    columns: root.wideScreen ? 4 : 2

                    Kirigami.Heading {
                        Layout.fillHeight: true
                        level: 1
                        text: date
                    }

                    ColumnLayout {
                        Kirigami.Heading {
                            Layout.fillWidth: true
                            level: 2
                            text: name
                        }
                        Kirigami.Separator {
                            Layout.fillWidth: true
                            visible: description.length > 0
                        }
                        Controls.Label {
                            Layout.fillWidth: true
                            wrapMode: Text.WordWrap
                            text: description
                            visible: description.length > 0
                        }
                    }
                    Controls.Button {
                        Layout.alignment: Qt.AlignRight
                        Layout.columnSpan: 2
                        text: i18n("Edit")
                    }
                }
            }
        }
    }

    pageStack.initialPage: Kirigami.ScrollablePage {
        title: i18nc("@title", "Kountdown")

        // Kirigami.Action encapsulates a UI action. Inherits from Controls.Action
        actions: [
            Kirigami.Action {
                id: addAction
                // Name of icon associated with the action
                icon.name: "list-add-symbolic"
                // Action text, i18n function returns translated string
                text: i18nc("@action:button", "Add kountdown")
                // What to do when triggering the action
                onTriggered: kountdownModel.append({
                    name: "Kirigami Action added card!",
                    description: "Congratulations, your Kirigami Action works!",
                    date: 1000
                })
            }
        ]

        Kirigami.CardsListView {
            id: cardsView
            model: kountdownModel
            delegate: kountdownDelegate
        }
    }
}