Barres d'eines d'acció

Si bé les pàgines de Kirigami permeten posar amb facilitat un conjunt d'accions a la capçalera de la pàgina, hi ha ocasions en què potser preferireu tenir una mica més de flexibilitat.

El Kirigami proporciona el component Kirigami.ActionToolBar. Mostra una llista d'objectes Kirigami.Action i en mostrarà tants com sigui possible, proporcionant un menú desbordat per als que no encaixin. L'ActionToolBar és dinàmica i mourà les accions dins i fora del menú desbordat depenent de l'espai disponible.

Crear la nostra primera ActionToolBar

La disposició i la ubicació de la vostra Kirigami.ActionToolBar en realitat dependrà de vosaltres, encara que en nom de la facilitat d'ús, generalment és una bona idea cenyir-se a les convencions de la interfície d'usuari i col·locar la barra d'eines a prop de la part superior o inferior de la pàgina i que s'estengui en amplada.

Com la majoria dels altres components que mantenen accions, la Kirigami.ActionToolBar té una propietat accions. Podem assignar una matriu de components Kirigami.Action a aquesta propietat.

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 { }
                }
            ]
        }
    }
}

Alineació

De manera predeterminada, les accions a l'ActionToolBar s'alinearan a l'esquerra. Això pot no ser desitjable en totes les situacions. Afortunadament, podem canviar això amb la propietat alignment. Podem establir aquesta propietat en un interval de valors, però els tres més rellevants per a una ActionToolBar són Qt.AlignLeft, Qt.AlignCenter i Qt.AlignRight (els quals s'ocupen de l'alineació horitzontal).

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!")
                    }
                ]
            }
        }
    }
}