الأدراج

الأدراج هي لوحات تنزلق من جوانب نافذة التطبيق. يمكن ملؤها بعناصر تفاعلية مثل إجراءات كيريغامي، الأزرار، النصوص، والمزيد.

تأتي الأدراج بأنواع وأشكال وصيغ مختلفة. في هذه الصفحة سنستعرض كل نوع ونقدم نظرة عامة على خصائصه.

الدرج العام

الدرج العام هو ميزة قياسية في تطبيقات كيدي المحمولة ويمكن العثور عليه أحيانًا في إصداراتها المكتبية أيضًا. يحتوي على القائمة الرئيسية للتطبيق: تُدرج هنا أي وظائف ليست خاصة بالصفحة الحالية ولكنها لا تزال مهمة للتنقل العام أو التفاعل داخل التطبيق.

يمكن تفعيله بالنقر على قائمة الهامبرغر أو بالسحب من الحافة اليسرى إلى منتصف الشاشة في وضع اليسار إلى اليمين أو من الحافة اليمنى في وضع اليمين إلى اليسار.

مكونات Kirigami.GlobalDrawer هي ما نستخدمه لإنشاء مثل هذه الأدراج. تُضبط هذه المكونات لخاصية globalDrawer من Kirigami.ApplicationWindow التي تشكل أساس تطبيق كيريغامي الخاص بنا.

import QtQuick
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Drawers App"
    width: 600
    height: 600
    pageStack.initialPage: Kirigami.Page { /* Page code here... */ }

    globalDrawer: Kirigami.GlobalDrawer {
        title: "Global Drawer"
        titleIcon: "applications-graphics"
        actions: [
            Kirigami.Action {
                text: "Kirigami Action 1"
                icon.name: "user-home-symbolic"
                onTriggered: showPassiveNotification("Action 1 clicked")
            },
            Kirigami.Action {
                text: "Kirigami Action 2"
                icon.name: "settings-configure-symbolic"
                onTriggered: showPassiveNotification("Action 2 clicked")
            },
            Kirigami.Action {
                text: i18n("Quit")
                icon.name: "application-exit-symbolic"
                shortcut: StandardKey.Quit
                onTriggered: Qt.quit()
            }
        ]
    }
}

الرأس

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

يمكن ضبط مكون الرأس المختار باستخدام خاصية header للدرج العام، وسيحل محل عنوان الدرج العام. هذا مفيد لإضافة Kirigami.SearchField، على سبيل المثال:

import QtQuick
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Drawers App"
    width: 600
    height: 600
    pageStack.initialPage: Kirigami.Page { /* Page code here... */ }

    globalDrawer: Kirigami.GlobalDrawer {
        title: "Global Drawer with searchfield (not visible)"

        header: Kirigami.SearchField {
                id: searchField
        }

        actions: [
            Kirigami.Action {
                text: "Kirigami Action 1"
                icon.name: "user-home-symbolic"
                onTriggered: showPassiveNotification("Action 1 clicked")
            },
            Kirigami.Action {
                text: "Kirigami Action 2"
                icon.name: "settings-configure-symbolic"
                onTriggered: showPassiveNotification("Action 2 clicked")
            },
            Kirigami.Action {
                text: i18n("Quit")
                icon.name: "application-exit-symbolic"
                shortcut: StandardKey.Quit
                onTriggered: Qt.quit()
            }
        ]
    }
}

التكيف مع سطح المكتب

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

لحسن الحظ، توفر الأدراج العامة في كيريغامي خاصية isMenu. عند ضبطها على true، تتحول إلى قوائم أكثر تقليدية فقط على سطح المكتب.

globalDrawer: Kirigami.GlobalDrawer {
    isMenu: true

    actions: [
        // إجراءات كيريغامي هنا...
    ]
}

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

بينما يعرض Kirigami.GlobalDrawer الإجراءات العامة المتاحة في جميع أنحاء التطبيق، يجب استخدام Kirigami.ContextDrawer لعرض الإجراءات ذات الصلة فقط في سياقات معينة. يُستخدم هذا عادةً في صفحات منفصلة.

سيتصرف الدرج السياقي بشكل مختلف اعتمادًا على ما إذا كان يُستخدم على منصة محمولة أو على سطح المكتب.

على سطح المكتب، عندما تتوفر مساحة كافية للنافذة، تظهر الإجراءات السياقية كجزء من مجموعة الإجراءات في شريط الأدوات العلوي. عندما تكون المساحة محدودة، كحال جهاز محمول أو نافذة ضيقة، تُخفى الإجراءات السياقية خلف قائمة هامبرغر على الجانب الأيمن. يختلف هذا عن الإجراءات الأخرى في مجموعة actions، وهي actions.main و actions.left و actions.right؛ فهذه لا تُخفى في النوافذ محدودة المساحة، بل تُطوى إلى أيقوناتها الخاصة.

 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

import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Drawers App"
    height: 600
    width: 1200
    minimumWidth: 500

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

    pageStack.initialPage: [ emptyPage, contextDrawerPage ]

    Kirigami.Page {
        title: "Empty page"
        id: emptyPage
    }

    Kirigami.Page {
        id: contextDrawerPage
        title: "Context Drawer page"

        actions: [
            Kirigami.Action {
                icon.name: "media-record"
            },
            Kirigami.Action {
                icon.name: "arrow-left"
            },
            Kirigami.Action {
                icon.name: "arrow-right"
            },
            Kirigami.Action {
                text: "Contextual Action 1"
                icon.name: "media-playback-start"
            },
            Kirigami.Action {
                text: "Contextual Action 2"
                icon.name: "media-playback-stop"
            }
        ]
    }
}

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

الأدراج المشروطة والمضمنة

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

• الأدراج المشروطة مخفية مبدئيًا وتُظلم باقي التطبيق، وتُرفض عند النقر على منطقة مظلمة.
• الأدراج المضمنة معروضة مبدئيًا وتسمح للمستخدم بالتفاعل مع باقي التطبيق دون رفضها، ولا تُظلم المناطق الأخرى.

هذا النوع من الأدراج مفتوح النهاية ومرن، ولكن عمومًا، قد ترغب في استخدام هذا النوع من الأدراج عندما تريد ظهور قائمة صغيرة من الخيارات عند الضغط المطول أو النقر بالزر الأيمن.

هذان الدرجان متشابهان جدًا لأنهما يمكن، في الواقع، تنفيذهما باستخدام نفس مكون كيريغامي: Kirigami.OverlayDrawer. إليك بعض الخصائص الموروثة المهمة لهذا المكون التي يجب تذكرها:

• تتحكم Popup.modal في ما إذا كان الدرج سيكون مشروطًا أم مضمنًا اعتمادًا على قيمة منطقية.
• تتحكم Drawer.edge في أي حافة من نافذة التطبيق سيظهر الدرج؛ خيارات هذه الخاصية جزء من Edge enum، وهي Qt.TopEdge و Qt.RightEdge و Qt.BottomEdge و Qt.LeftEdge.
• يحتوي Popup.contentItem على المكون الذي سيشكل محتوى درجك.

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Drawers App"
    width: 400
    height: 600
    pageStack.initialPage: Kirigami.Page {
        title: "OverlayDrawer at the bottom"
        actions: [
            Kirigami.Action {
                text: "Open bottomDrawer"
                onTriggered: bottomDrawer.open()
            }
        ]
        Kirigami.OverlayDrawer {
            id: bottomDrawer
            edge: Qt.BottomEdge
            // اضبط modal إلى false لجعل هذا الدرج مضمنًا!
            modal: true

            contentItem: RowLayout {
                Controls.Label {
                    Layout.fillWidth: true
                    text: "Say hello to my little drawer!"
                }
                Controls.Button {
                    text: "Close"
                    onClicked: bottomDrawer.close()
                }
            }
        }
    }
}