Akcie
Aj keď stránky Kirigami umožňujú jednoducho umiestniť sadu akcií do hlavičky stránky, niekedy môžete uprednostniť niečo flexibilnejšie.
Kirigami poskytuje komponent Kirigami.ActionToolBar. Zobrazuje zoznam objektov Kirigami.Action a zobrazí ich čo najviac, pričom pre tie, ktoré sa nezmestia, poskytne rozbaľovacie menu. ActionToolBar je dynamický a bude presúvať akcie do a z rozbaľovacieho menu v závislosti od dostupného priestoru.
Poznámka
Táto stránka predpokladá, že ste oboznámení s objektmi Kirigami.Action. Ak nie, môžete sa o nich dozvedieť všetko v našom tutoriáli pre začiatočníkov alebo na príslušnej dokumentačnej stránke.Vytvorenie nášho prvého ActionToolBar
Rozloženie a umiestnenie vášho Kirigami.ActionToolBar je úplne na vás, aj keď kvôli používateľskej prívetivosti je zvyčajne dobré dodržiavať konvencie používateľského rozhrania a umiestniť panel nástrojov blízko hornej alebo dolnej časti stránky a roztiahnuť ho na celú šírku.
Ako väčšina ostatných komponentov s akciami, Kirigami.ActionToolBar má vlastnosť actions. Tejto vlastnosti môžeme priradiť pole komponentov 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 s dostatočným priestorom pre všetky potomky
ActionToolBar s pretečeným menu obsahujúcim potomkov
Zarovnanie
V predvolenom nastavení sú akcie v Kirigami.ActionToolBar zarovnané doľava. To nemusí byť žiaduce vo všetkých situáciách. Našťastie to môžeme zmeniť pomocou vlastnosti alignment. Túto vlastnosť môžeme nastaviť na rôzne hodnoty, ale tri najrelevantnejšie sú Qt.AlignLeft, Qt.AlignCenter a Qt.AlignRight (ktoré sa zaoberajú horizontálnym zarovnaním).
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!")
}
]
}
}
}
}