Åtgärdsverktygsrader
Även om Kirigami låter dig enkelt placera en uppsättning åtgärder i sidhuvuden, finns det tillfällen då man kan föredra att ha någonting flexiblare.
Kirigami tillhandahåller komponenten Kirigami.ActionToolBar
. Den visar en lista över Kirigami.Action
objekt och visar så många av dem som möjligt, och tillhandahåller en överflödesmeny för de som inte får plats. ActionToolBar är dynamisk och flyttar åtgärderna in och ut från överflödesmenyn beroende på tillgänglig storlek.
Anmärkning
This page assumes you are familiar withKirigami.Action
objects. If you are not, you can learn all about them in our beginner tutorial or in the dedicated documentation page for them.Skapa vår första ActionToolBar
Layout och plats för din Kirigami.ActionToolBar
är helt upp till dig, även om för att vara användarvänlig är det oftast en bra idé att hålla sig till konventioner för användargränssnittet och placera verktygsraden nära toppen och längst ner på sidan och låta den sprida sig på bredden.
Liksom de flesta andra komponenter som innehåller åtgärder, har Kirigami.ActionToolBar
egenskapen actions
. Vi kan tilldela ett fält av Kirigami.Action
komponenter till egenskapen.
import QtQuick 2.6
import QtQuick.Controls 2.0 as Controls
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.13 as Kirigami
Kirigami.Page {
Kirigami.ActionToolBar {
anchors.fill: parent
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 med tillräckligt utrymme för alla underliggande objekt

ActionToolBar med överflödesmeny som innehåller underliggande objekt
Justering
Normalt är åtgärder i en ActionToolBar vänsterjusterade. Det kanske inte är önskvärt i alla situationer. Som tur är kan vi ändra det med egenskapen alignment
. Vi kan ställa in egenskapen till ett intervall av olika värden, men de tre mest relevanta för ActionToolBar är Qt.AlignLeft
, Qt.AlignCenter
och Qt.AlignRight
(som hanterar vertikal justering).
Controls.GroupBox {
Layout.fillWidth: true
Kirigami.ActionToolBar {
anchors.fill: parent
alignment: Qt.AlignCenter
actions: [
Kirigami.Action {
text: "Beep"
icon.name: "notifications"
onTriggered: showPassiveNotification("BEEP!")
}
]
}
}
