Å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 provides the component Kirigami.ActionToolBar . It displays a list of Kirigami.Action objects and will display as many of them as possible, providing an overflow menu for the ones that don't fit. The ActionToolBar is dynamic and will move actions in and out of the overflow menu depending on the size available to it.
Anmärkning
This page assumes you are familiar with Kirigami.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
The layout and location of your Kirigami.ActionToolBar are really up to you, though for the sake of user-friendliness it is usually a good idea to stick to UI conventions and put your toolbar near the top or bottom of your page and to have it spread width wise.
Like most other action-holding components, Kirigami.ActionToolBar has an actions property. We can assign an array of Kirigami.Action components to this property.
import QtQuick 2.15
import QtQuick.Controls 2.15 as Controls
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.20 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
By default, actions in the ActionToolBar will be left aligned. This might not be desirable in all situations. Thankfully we can change this with the
alignment
property. We can set this property to a range of values, but the three most relevant ones are Qt.AlignLeft
, Qt.AlignCenter
, and Qt.AlignRight
(which deal with
horizontal alignment
).
Controls.GroupBox {
Layout.fillWidth: true
Kirigami.ActionToolBar {
anchors.fill: parent
alignment: Qt.AlignCenter
actions: [
Kirigami.Action {
text: "Beep"
icon.name: "notifications"
onTriggered: showPassiveNotification("BEEP!")
}
]
}
}
