أشرطة أدوات الإجراءات
بينما تسمح لك صفحات Kirigami بوضع مجموعة من الإجراءات بسهولة في رأس الصفحة، فهناك أوقات قد تفضل فيها شيئًا أكثر مرونة.
يوفر Kirigami المكون Kirigami.ActionToolBar. يعرض قائمة من كائنات Kirigami.Action وسيعرض أكبر عدد ممكن منها، مع توفير قائمة فائض لتلك التي لا تتسع. شريط الأدوات ActionToolBar ديناميكي وسينقل الإجراءات من وإلى قائمة الفائض اعتمادًا على المساحة المتاحة له.
ملاحظة
تفترض هذه الصفحة أنك على دراية بكائنات Kirigami.Action. إذا لم تكن كذلك، يمكنك التعرف عليها بالكامل في دليلنا للمبتدئين أو في صفحة التوثيق المخصصة لها.إنشاء أول شريط أدوات 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 بقائمة فائض تحتوي على عناصر فرعية
المحاذاة
افتراضيًا، ستكون الإجراءات في 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!")
}
]
}
}
}
}