Orodne vrstice dejanj

Medtem ko vam strani Kirigami omogočajo enostavno namestitev nabora dejanj v glavo strani, so primeri, ko potrebujete nekaj bolj prilagodljivega.

Kirigami zagotavlja komponento Kirigami.ActionToolBar . Prikazala bo seznam predmetov Kirigami.Action in jih bo prikazala čim več, pri tem pa bo na voljo meni prelivanja za tiste, ki se ne ujemajo. Vrstica ActionToolBar je dinamična in bo premaknila dejanja v in iz menija prelivanja, odvisno od velikosti, ki ji je na voljo.

Ustvarjanje prve vrstice ActionToolBar

Postavitev in mesto vaše Kirigami.ActionToolBar sta resnično odvisna od vas, čeprav je zaradi prijaznosti do uporabnika običajno dobra ideja, da se držite konvencij uporabniškega vmesnika in postavite svojo orodno vrstico blizu vrha ali dna strani ter da se razširi po širini.

Kot večina drugih komponent, ki držijo dejanja, ima tudi Kirigami.ActionToolBar lastnost actions . Tej lastnosti lahko dodelimo polje komponent Kirigami.Action .

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

}

Poravnava

Privzeto bodo dejanja v vrstici ActionToolBar levo poravnana. To morda ni zaželeno v vseh situacijah. K sreči lahko to spremenimo z lastnostjo alignment . To lastnost lahko nastavite na vrsto vrednosti, vendar so tri najpomembnejše za vrstico ActionToolBar Qt.AlignLeft, Qt.AlignCenterinQt.AlignRight` (ki obravnavajo horizontalno poravnavo 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!") 
            }
        ]
    }
    
}