المكونات القائمة على الإجراءات

تُستخدم إجراءات Kirigami لإضافة وظائف إلى المكونات.

الإجراءات

يتكون Kirigami.Action من إجراء قابل للنقر يعتمد مظهره على مكان إضافته. عادةً ما يكون زرًا برمز ونص.

يمكننا استخدام هذه لتزويد تطبيقاتنا بإجراءات سهلة الوصول إليها وهي أساسية لوظائفها.

ملاحظة

ترث إجراءات كيريغامي من QtQuick.Controls.Action ويمكن إسناد اختصارات إليها.

مثل إجراءات تحكمات كيوت كويك، يمكن إسنادها إلى عناصر القوائم وأزرار أشرطة الأدوات، ولكن أيضًا إلى مكونات كيريغامي أخرى متعددة.

import org.kde.kirigami as Kirigami

Kirigami.Action {
    id: copyAction
    text: i18n("Copy")
    icon.name: "edit-copy"
    shortcut: StandardKey.Copy
    onTriggered: {
        // ...
    }
}

ملاحظة

تأخذ الخاصية icon.name أسماء أيقونات على مستوى النظام وفقًا لمواصفات فري دسكتوب. يمكن عرض هذه الأيقونات وأسمائها باستخدام تطبيق كاتل فيش الخاص بكيدي والمرفوع مع plasma-sdk، أو بزيارة مواصفات تسمية أيقونات فري دسكتوب.

إحدى الميزات التي تقدمها إجراءات كيريغامي فوق إجراءات كيوت كويك هي إمكانية تداخل الإجراءات.

import org.kde.kirigami as Kirigami

Kirigami.Action {
    text: "View"
    icon.name: "view-list-icons"
    Kirigami.Action {
        text: "action 1"
    }
    Kirigami.Action {
        text: "action 2"
    }
    Kirigami.Action {
        text: "action 3"
    }
}

ميزة أخرى لإجراءات كيريغامي هي تقديم تلميحات متنوعة للعناصر التي تستخدم الإجراءات حول كيفية عرضها للإجراء. تُعالج هذه بشكل أساسي بواسطة الخاصيتين displayHint و displayComponent.

سيُحترم هذه الخصائص من قبل العنصر إن أمكن. على سبيل المثال، سيُعرض الإجراء التالي كـ TextField مع محاولة العنصر بذل قصارى جهده لإبقاء نفسه مرئيًا لأطول فترة ممكنة.

import org.kde.kirigami as Kirigami

Kirigami.Action {
    text: "Search"
    icon.name: "search"

    displayComponent: TextField { }

    displayHint: Kirigami.DisplayHints.KeepVisible
}

استخدام الإجراءات في المكونات الأخرى

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

صفحة

تعرض Kirigami.Page الإجراءات على يمين الرأس العلوي في وضع سطح المكتب، وفي تذييل في وضع الجوال.

 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
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Actions Demo"
    width: 600
    height: 600

    globalDrawer: Kirigami.GlobalDrawer {}
    contextDrawer: Kirigami.ContextDrawer {}

    pageStack.initialPage: Kirigami.Page {
        title: "Demo"

        actions: [
            Kirigami.Action {
                icon.name: "go-home"
                onTriggered: showPassiveNotification("Main action triggered")
            },
            Kirigami.Action {
                icon.name: "go-previous"
                onTriggered: showPassiveNotification("Left action triggered")
            },
            Kirigami.Action {
                icon.name: "go-next"
                onTriggered: showPassiveNotification("Right action triggered")
            },
            Kirigami.Action {
                text: "Contextual Action 1"
                icon.name: "bookmarks"
                onTriggered: showPassiveNotification("Contextual action 1 clicked")
            },
            Kirigami.Action {
                text: "Contextual Action 2"
                icon.name: "folder"
                enabled: false
            }
        ]
    }
}

الدرج العام

Kirigami.GlobalDrawer هو شريط جانبي يشبه القائمة يوفر تنقلًا قائمًا على الإجراءات لتطبيقك. هنا تكون الإجراءات المتداخلة مفيدة لأنه من الممكن إنشاء تنقل متداخل:

import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Actions Demo"
    globalDrawer: Kirigami.GlobalDrawer {
        title: "Demo"
        titleIcon: "applications-graphics"
        actions: [
            Kirigami.Action {
                text: "View"
                icon.name: "view-list-icons"
                Kirigami.Action {
                    text: "View Action 1"
                    onTriggered: showPassiveNotification("View Action 1 clicked")
                }
                Kirigami.Action {
                    text: "View Action 2"
                    onTriggered: showPassiveNotification("View Action 2 clicked")
                }
            },
            Kirigami.Action {
                text: "Action 1"
                onTriggered: showPassiveNotification("Action 1 clicked")
            },
            Kirigami.Action {
                text: "Action 2"
                onTriggered: showPassiveNotification("Action 2 clicked")
            }
        ]
    }
    //...
}

يمكنك قراءة المزيد عن الأدراج العامة في صفحة التوثيق للأدراج.

الدرج السياقي

يتكون Kirigami.ContextDrawer من مجموعة إضافية من الإجراءات المخفية خلف قائمة من ثلاث نقاط في أعلى اليمين في وضع سطح المكتب أو في أسفل اليمين في وضع الجوال إذا لم تكن هناك مساحة. يُستخدم لعرض الإجراءات ذات الصلة بصفحة معينة فقط. يمكنك قراءة المزيد عنها في دليل أدراج كيريغامي.

حقول نص الإجراء

يُستخدم Kirigami.ActionTextField لإضافة بعض الإجراءات السياقية إلى حقل نص، على سبيل المثال لمسح النص، أو للبحث عن النص.

Kirigami.ActionTextField {
    id: searchField
    rightActions: [
        Kirigami.Action {
            icon.name: "edit-clear"
            visible: searchField.text !== ""
            onTriggered: {
                searchField.text = ""
                searchField.accepted()
            }
        }
    ]
}

في هذا المثال، ننشئ زر "مسح" لحقل بحث لا يظهر إلا عند إدخال نص.

ملاحظة

نادرًا ما ينبغي استخدام ActionTextField مباشرة. يرث كل من SearchField و PasswordField من ActionTextField ومن المرجح أن يغطيا حالة الاستخدام المرغوبة.

عنصر قائمة السحب

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

ListView {
    model: myModel
    delegate: SwipeListItem {
        Controls.Label {
            text: model.text
        }
        actions: [
             Action {
                 icon.name: "document-decrypt"
                 onTriggered: print("Action 1 clicked")
             },
             Action {
                 icon.name: model.action2Icon
                 onTriggered: //افعل شيئًا
             }
        ]
    }
}

شريط أدوات الإجراء

شريط أدوات Kirigami.ActionToolBar هو شريط أدوات مبني من قائمة إجراءات. افتراضيًا، سيمثل كل إجراء يتسع في شريط الأدوات بواسطة ToolButton، مع نقل تلك التي لا تتسع إلى قائمة في نهاية شريط الأدوات.

كما هو الحال مع ActionTextField، قد لا تحتاج إلى استخدام ActionToolBar مباشرة لأنه يُستخدم بواسطة رؤوس الصفحات والبطاقات لتوفير عرض إجراءاتها.

import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Actions Demo"
    width: 350
    height: 350
    header: Kirigami.ActionToolBar {
        actions: [
            Kirigami.Action {
                text: i18n("View Action 1")
                onTriggered: showPassiveNotification(i18n("View Action 1 clicked"))
            },
            Kirigami.Action {
                text: i18n("View Action 2")
                onTriggered: showPassiveNotification(i18n("View Action 2 clicked"))
            },
            Kirigami.Action {
                text: i18n("Action 1")
                onTriggered: showPassiveNotification(i18n("Action 1 clicked"))
            },
            Kirigami.Action {
                text: i18n("Action 2")
                onTriggered: showPassiveNotification(i18n("Action 2 clicked"))
            }
        ]
    }
}

يمكنك قراءة المزيد عن مكونات ActionToolBar في صفحة توثيقها المخصصة.

البطاقات

تُستخدم Kirigami.Card لعرض مجموعة من المعلومات أو الإجراءات معًا. يمكن إضافة هذه الإجراءات إلى مجموعة actions، على غرار المكونات السابقة.

Kirigami.Card {
    actions: [
        Kirigami.Action {
            text: qsTr("Action1")
            icon.name: "add-placemark"
        },
        Kirigami.Action {
            text: qsTr("Action2")
            icon.name: "address-book-new-symbolic"
        },
        // ...
    ]
    banner {
        source: "../banner.jpg"
        title: "Title Alignment"
        titleAlignment: Qt.AlignLeft | Qt.AlignBottom
    }
    contentItem: Controls.Label {
        wrapMode: Text.WordWrap
        text: "My Text"
    }
}

لقطة شاشة لبطاقة كاملة بخلفية لافتة خلف عنوانها، وخلفية بيضاء خلف نصها، وإجراءين مع أيقونات وقائمة هامبرغر في الأسفل

لمزيد من المعلومات، راجع صفحة المكونات الخاصة بالبطاقات.

الطباعة

صفوف الصفحات وكومات الصفحات