Contrôle et éléments interactifs

Rendez vos applications plus interactives en utilisant des boutons, des contrôles de sélection, des curseurs et des champs de texte.

Kirigami offre une large sélection de différents éléments interactifs que vous pouvez utiliser dans vos applications. Chaque type a des styles d'interaction, des styles visuels et des fonctionnalités légèrement différents. L'utilisation du bon type de contrôle dans votre application peut contribuer à rendre votre interface utilisateur plus réactive et intuitive.

Boutons

Dans les applications avec Kirigami, nous utilisons les boutons de QtQuick Controls. Leur utilisation est assez simple. Nous définissons le texte avec la propriété « text » et toute action que nous voulons qu'il réalise est définie par la propriété « onClicked ».

import QtQuick 2.0
import QtQuick.Controls 2.2 as Controls
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.5

Kirigami.Page {

    Controls.Button {
        text: "Beep!"
        onClicked: showPassiveNotification("Boop!")
    }

}
Un bouton fraîchement cliqué

Boutons de basculement

Le comportement des boutons peut être modifié pour les rendre basculants. Dans ce mode, ils resteront enfoncés jusqu'à ce que vous cliquiez à nouveau dessus. Ce mode peut être activé en attribuant la valeur « True » à la propriété « checkable ». Nous pouvons aussi définir ces boutons comme basculant par défaut en donnant à la propriété « checked » la valeur « True ».

Nous pouvons tirer le meilleur parti des boutons à basculement en utilisant la propriété « onCheckedChanged ». Son fonctionnement est similaire à celui de la propriété « onClicked », sauf qu'ici, l'action assignée sera exécutée lorsque la propriété « checked » du bouton changera. Cette propriété « checked » est booléenne, ce qui peut s'avérer utile dans certains cas.

Dans cet exemple, nous définissons la visibilité d'un tiroir intégré selon l'état d'un bouton à basculement :

Controls.Button {
    text: "Toggle!!"
    checkable: true
    checked: true
    onCheckedChanged: myDrawer.visible = checked
}

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

    contentItem: Controls.Label {
        text: "Peekaboo!"
    }
}
Un bouton à bascule

Boutons pour barre d'outils

Il y a un type spécifique de bouton dédié pour leur utilisation dans les barres d'outils, « Controls.ToolButton ». La différence la plus évidente entre celui-ci et un bouton conventionnel est l'apparence, par rapport à des boutons d'outils qui sont plats (Même si cela peut être modifié avec la propriété de type booléen « flat »).

Controls.ToolButton {
    text: "Tool beep..."
    onClicked: showPassiveNotification("Tool boop!")
}
Un bouton pour les outils

Contrôles de sélection

Les contrôles de sélection permettent aux utilisateurs de faire un choix ou de sélectionner une option. Il en existe différents types s'adaptant au mieux selon différentes situations.

Boîtes à cocher

Les cases à cocher sont destinées à des options dont les choix sont non exclusifs et où chaque option a une alternative claire.

Controls.CheckBox {
    text: "Beep!"
    checked: true
}
Controls.CheckBox {
    text: "Boop!"
    checked: false
}
Un ensemble de boîtes à cocher

Comme vous pouvez le constater, ils sont simples à utiliser. La propriété « checked » contient une valeur booléenne déterminant si ils ont été cochés ou non.

Boutons radio

Les boutons radio sont conçus pour les situations dans lesquelles l'utilisateur doit choisir une option parmi un ensemble de plusieurs.

Les boutons radio sont exclusifs par défaut : un seul bouton peut être coché dans le même élément parent.

Comme les cases à cocher, ils peuvent être activés ou désactivés par défaut avec la propriété « checked ».

ColumnLayout {
    Controls.RadioButton {
        text: "Tick!"
        checked: true
    }
    Controls.RadioButton {
        text: "Tock!"
        checked: false
    }
}
Un ensemble de boutons radio

Commutateurs

Les commutateurs sont principalement conçus pour être utilisés sur des périphériques mobiles.

Sur un ordinateur de bureau, la modification des paramètres implique généralement de modifier la configuration, puis de l'appliquer en cliquant sur un bouton « Appliquer » ou « Ok ». Sur les téléphones mobiles, nous pouvons utiliser des commutateurs, de façon alternative.

Les commutateurs peuvent être basculés entre des états activé ou désactivé. Ils peuvent être cliqués ou tapotés pour changer leurs états, ou ils peuvent être glissés vers une position activée ou désactivée. Une fois de plus, ces commutateurs peuvent être définis activés ou désactivés par défaut avec la propriété « checked ».

Controls.Switch {
    text: "Switchy"
    checked: true
}
Controls.Switch {
    text: "Swootchy"
    checked: false
}
Un ensemble de commutateurs

Curseurs

Les curseurs permettent aux utilisateurs de sélectionner certaines valeurs en les faisant glisser grâce à une poignée le long d'un axe. Grâce à QtQuick Controls, il existe plusieurs types de curseurs parmi lesquels vous pouvez choisir selon selon les valeurs que vous souhaitez que vos utilisateurs choisissent dans votre application.

Curseurs standards et gradués

Un curseur standard offre à l'utilisateur un contrôle très fin de la sélection qu'il souhaite effectuer.

Par défaut, les curseurs vont de gauche à droite pour augmenter (et de bas en haut pour augmenter lorsqu'ils sont verticaux). La coloration fournit un indicateur visuel de l'importance de la valeur que vous sélectionnez.

Les curseurs ont quelques propriétés importantes auxquelles nous devons prêter attention :

  • « value » : contient la valeur à laquelle la poignée est placée. Elle peut également être définie manuellement pour fournir une valeur de départ par défaut.
  • « to » : définit la portée du curseur en spécifiant la valeur maximale à laquelle il peut aller.
  • « orientation » : permet de définir l'orientation verticale du curseur avec « Qt.Vertical ».
Controls.Slider {
    id: normalSlider
    orientation: Qt.Vertical
    value: 5.0
    to: 10.0
}
Un ensemble de curseurs

Une autre propriété utile que nous pouvons utiliser est « stepSize ». En lui attribuant une valeur numérique, nous pouvons créer un curseur paramétré grâce à des valeurs multiples du paramètre « stepSize » spécifié, ces multiples étant indiqués par des signets. Par conséquent, si nous donnons à cette propriété la valeur « 2.0 », lorsque l'utilisateur fera glisser la poignée du curseur, il ne pourra sélectionner que « 0.0 », « 2.0 », « 4.0 », etc. jusqu'à la valeur spécifiée dans la propriété « to ».

Controls.Slider {
    id: tickmarkedSlider
    value: 6.0
    to: 10.0
    stepSize: 2.0
}
Un ensemble de curseurs gradués

Curseur d'intervalle

QtQuick Controls fournit également des curseurs avec intervalles. Ceux-ci ont deux poignées, vous permettant ainsi de définir un intervalle de numéros entre les deux poignées.

Il est important de conserver à l'esprit deux nouvelles propriétés : « first.value » et « second.value », contenant les valeurs des deux poignées. Comme la propriété « value » des curseurs standard, elles peuvent être prédéfinies.

Controls.RangeSlider {
    id: rangeSlider
    to: 10.0
    first.value: 3.0
    second.value: 6.0
}
Une ensemble de curseurs d'intervalle

Nous pouvons également en faire un curseur gradué en fixant la valeur de la propriété « stepSize » à un nombre, de la même manière qu'un curseur standard.

Controls.RangeSlider {
    id: rangeTickmarkedSlider
    to: 10.0
    first.value: 4.0
    second.value: 6.0
    stepSize: 2.0
}