Skip to main content
Salta al contingut
Edita aquesta pàgina See source code Crea un problema de documentació Formatting guidelines Style guidelines

Controls i elements interactius

Fent que les vostres aplicacions siguin més interactives mitjançant l'ús de botons, controls de selecció, controls lliscants i camps de text.

El Kirigami fa ús d'una àmplia selecció de diferents elements interactius de les Qt que podeu utilitzar en les aplicacions. Cada tipus diferent té estils d'interacció, estils visuals i funcionalitats lleugerament diferents. Emprant el tipus de control correcte a la vostra aplicació ajudareu a fer que la interfície d'usuari sigui més sensible i intuïtiva.

Botons

En les aplicacions Kirigami, utilitzem el Button dels QtQuick Controls. Emprar-los és força senzill: establim la propietat text i qualsevol acció que volem que realitzi s'estableix a la propietat onClicked.

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Controls.Button"
    width: 400
    height: 400
    pageStack.initialPage: Kirigami.Page {
        ColumnLayout {
            anchors.fill: parent
            Controls.Button {
                Layout.alignment: Qt.AlignCenter
                text: "Beep!"
                onClicked: showPassiveNotification("Boop!")
            }
        }
    }
}

Una finestra que conté un botó «Beep» en el centre, que quan s'hi fa clic mostra una notificació passiva «Boop» a la part inferior de la finestra

Botons commutables

El comportament dels botons es pot canviar perquè es puguin commutar: en aquest mode, romandran premuts fins que s'hi faci clic una vegada més. Aquest mode es pot activar establint la propietat checkable a true. També podem establir els botons perquè es commutin de manera predeterminada establint la propietat [checked](https://doc.qt.io/qt-6 /qml-qtquick-controls2-abstractbutton.html#checked-prop) a true.

Podem aprofitar al màxim els botons commutables utilitzant el controlador de la propietat onCheckedChanged que es genera automàticament a partir del senyal checked. Funciona de manera similar a onClicked, excepte que aquí l'acció assignada s'executarà quan es canviï l'estat del botó. És una propietat booleana, el qual pot ser útil per a casos específics d'ús.

En aquest exemple, establim la visibilitat d'un calaix inclòs d'acord amb l'estat d'un botó commutable:

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Controls.Button (toggleable version)"
    width: 400
    height: 400
    pageStack.initialPage: Kirigami.Page {
        ColumnLayout {
            anchors.fill: parent
            Controls.Button {
                Layout.alignment: Qt.AlignCenter
                text: "Hide inline drawer"
                checkable: true
                checked: true
                onCheckedChanged: myDrawer.visible = checked
            }

            Kirigami.OverlayDrawer {
                id: myDrawer
                edge: Qt.BottomEdge
                modal: false

                contentItem: Controls.Label {
                    text: "Peekaboo!"
                }
            }
        }
    }
}

Una finestra que conté un botó commutable «Hide inline drawer» en el centre que quan es commuta oculta el calaix en línia «Peekaboo»

Botons de la barra d'eines

Hi ha un tipus de botó específic per al seu ús en les barres d'eines, Controls.ToolButton. La diferència més òbvia entre aquest i un botó Button convencional és l'estil, amb botons d'eina plans (encara que això es pot alterar amb la propietat booleana flat).

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Controls.ToolButton"
    width: 600
    height: 600

    header: Controls.ToolBar {
        RowLayout {
            anchors.fill: parent
            Controls.ToolButton {
                icon.name: "application-menu-symbolic"
                onClicked: showPassiveNotification("Kirigami Pages and Actions are better!")
            }
            Controls.Label {
                text: "Global ToolBar"
                horizontalAlignment: Qt.AlignHCenter
                verticalAlignment: Qt.AlignVCenter
                Layout.fillWidth: true
            }
            Controls.ToolButton {
                text: "Beep!"
                onClicked: showPassiveNotification("ToolButton boop!")
            }
        }
    }
}

Una finestra que mostra una barra d'eines personalitzada a la capçalera de la finestra que simula un Kirigami.globalToolBar, amb una icona de menú a l'esquerra que mostra una notificació passiva «Kirigami Pages and Actions are better!» i un botó d'eina dret «Beep» que és completament pla simulant una Kirigami.Acció

Controls de la selecció

Els controls de selecció permeten als usuaris escollir o triar una opció. Hi ha tipus diferents que s'adapten millor a diferents situacions.

Caselles de selecció

Un Controls.CheckBox està destinat a opcions en què les opcions no són exclusives i en què cada opció té una alternativa clara.

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Controls.CheckBox"
    width: 400
    height: 400
    pageStack.initialPage: Kirigami.Page {
        ColumnLayout {
            anchors.left: parent.left
            anchors.right: parent.right
            Controls.CheckBox {
                Layout.alignment: Qt.AlignHCenter
                text: "This checkbox is checked!"
                checked: true
            }
            Controls.CheckBox {
                Layout.alignment: Qt.AlignHCenter
                text: "This checkbox is not checked!"
                checked: false
            }
        }
    }
}

Una finestra que mostra dues caselles de selecció a on es pot marcar més d'una casella de selecció a la vegada

Com podeu veure, són fàcils d'utilitzar. La propietat checked manté un valor booleà que determina si s'ha marcat o no.

Botons d'opció

Un Controls.RadioButton està dissenyat per a situacions en què l'usuari ha de triar una opció d'entre un conjunt d'opcions diverses.

De manera predeterminada, els botons d'opció són exclusius: només en el mateix element pare només se'n pot marcar un.

Igual que les caselles de selecció, es poden establir perquè estiguin marcats o desmarcats de manera predeterminada amb la propietat checked.

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow