Paski narzędzi działań

Podczas gdy strony Kirigami umożliwiają ci w łatwy sposób umieszczenie zestawu działań w nagłówku strony, to są przypadki, w których możesz chcieć czegoś bardziej elastycznego.

Kirigami dostarcza składnik Kirigami.ActionToolBar. Wyświetli on listę obiektów Kirigami.Action i wyświetli ich tyle ile to możliwe, zapewniając menu przelewowe dla tych, które się nie zmieszczą. ActionToolBar jest dynamiczne i będzie przenosić swoje działania do i na zewnątrz menu przelewowego w zależności od dostępnego rozmiaru.

Tworzenie naszego pierwszego ActionToolBar

Układ i położenie naszego Kirigami.ActionToolBar są do twojego wyboru, lecz aby były przyjazne użytkownikowi, to lepiej trzymać się zasad tworzenia interfejsów użytkownika i umieścić pasek narzędzi blisko góry lub dołu twojej strony i rozciągnąć go na szerokość.

Tak ja większość innych składników przechowujących działanie, Kirigami.ActionToolBar ma właściwość actions. Do właściwości tej, możemy przypisać macierz składników Kirigami.Action.

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

}

Wyrównanie

Domyślnie, działania w ActionToolBar będą wyrównane do lewej. Może to być niepożądane we wszystkich przypadkach. Na szczęście możemy to zmienić przy użyciu właściwości alignment. Możemy ustawić tę właściwość na kila wartości, lecz najbardziej odpowiednie dla ActionToolBar to Qt.AlignLeft, Qt.AlignCenter oraz Qt.AlignRight (które dotyczą wyrównania w poziomie).

Controls.GroupBox {
    Layout.fillWidth: true
        
    Kirigami.ActionToolBar {
        anchors.fill: parent

        alignment: Qt.AlignCenter

        actions: [
            Kirigami.Action { 
                text: "Beep" 
                icon.name: "notifications" 
                onTriggered: showPassiveNotification("BEEP!") 
            }
        ]
    }
    
}