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

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

أنشئ أشرطة الأدوات القابلة للتخصيص الخاصة بك باستخدام مكون ActionToolBar

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

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

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

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

مثل معظم المكونات الأخرى الحاملة للإجراءات، يحتوي Kirigami.ActionToolBar على خاصية actions. يمكننا تعيين مصفوفة من مكونات Kirigami.Action لهذه الخاصية.

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

Kirigami.ApplicationWindow {
    id: root

    title: "ActionToolBar App"
    width: 600
    height: 400

    pageStack.initialPage: Kirigami.Page {
        Kirigami.ActionToolBar {
            anchors.left: parent.left
            anchors.right: parent.right

            actions: [
                Kirigami.Action {
                    text: "Beep"
                    icon.name: "notifications"
                    onTriggered: showPassiveNotification("BEEP!")
                },
                Kirigami.Action {
                    text: "Action Menu"
                    icon.name: "overflow-menu"

                    Kirigami.Action {
                        text: "Deet";
                        icon.name: "notifications"
                        onTriggered: showPassiveNotification("DEET!")
                    }
                    Kirigami.Action {
                        text: "Doot";
                        icon.name: "notifications"
                        onTriggered: showPassiveNotification("DOOT!")
                    }
                },
                Kirigami.Action {
                    icon.name: "search"
                    displayComponent: Kirigami.SearchField { }
                }
            ]
        }
    }
}
شريط أدوات ActionToolBar بمساحة كافية لجميع العناصر الفرعية

شريط أدوات ActionToolBar بمساحة كافية لجميع العناصر الفرعية

شريط أدوات ActionToolBar بقائمة فائض تحتوي على عناصر فرعية

شريط أدوات ActionToolBar بقائمة فائض تحتوي على عناصر فرعية

المحاذاة

افتراضيًا، ستكون الإجراءات في Kirigami.ActionToolBar محاذاة إلى اليسار. قد لا يكون هذا مرغوبًا في جميع الحالات. لحسن الحظ، يمكننا تغيير ذلك باستخدام خاصية alignment. يمكننا تعيين هذه الخاصية إلى مجموعة من القيم، لكن الثلاث الأكثر صلة هي Qt.AlignLeft و Qt.AlignCenter و Qt.AlignRight (التي تتعامل مع المحاذاة الأفقية).

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

Kirigami.ApplicationWindow {
    id: root

    title: "ActionToolBar App"
    width: 600
    height: 400

    pageStack.initialPage: Kirigami.Page {
        Controls.GroupBox {
            anchors.left: parent.left
            anchors.right: parent.right

            Kirigami.ActionToolBar {
                anchors.fill: parent

                alignment: Qt.AlignCenter

                actions: [
                    Kirigami.Action {
                        text: "Beep"
                        icon.name: "notifications"
                        onTriggered: showPassiveNotification("BEEP!")
                    }
                ]
            }
        }
    }
}

شريط أدوات ActionToolBar مع عناصر فرعية محاذاة إلى المنتصف