Slider {
id: slider
minimumValue: 0
maximumValue: 25
stepSize: 1
}
Label { text: slider.value }
Une autre manière de sélectionner un nombre, plus classique, passe par un bouton
fléché SpinBox, qui indique directement la valeur. Celui-ci peut imposer, en plus,
un nombre de décimales affichées decimals et un préfixe prefix ou un suffixe
suffix, notamment pour afficher une unité (ici, un symbole monétaire).
SpinBox {
id: spin
minimumValue: 0
maximumValue: 25
stepSize: .50
decimals: 2
suffix: " €"
}
Label { text: spin.value }
Champ de texte
Pour entrer du texte court, le choix le plus logique est un simple champ de texte
TextField, qui se limite à une ligne de texte. [20]
TextField { id: field; placeholderText: "Nom" }
Label { text: field.text }
Au contraire, pour de plus grandes étendues de texte, il est préférable d'y réserver
une zone plus imposante, avec TextArea.
TextArea { id: area }
Label { text: area.text }
Groupe
Un dernier composant bien pratique permet de grouper une série d'autres éléments
de l'interface : GroupBox. Cette zone se présente avec un titre et une bordure tout
autour de la zone délimitée. La difficulté avec cet élément est que, par défaut, sa
taille est déterminée par son contenu — ce qui peut nuire à l'affichage de la
bordure.
GroupBox {
title: "Groupe de composants"
320
id: slider
minimumValue: 0
maximumValue: 25
stepSize: 1
}
Label { text: slider.value }
Une autre manière de sélectionner un nombre, plus classique, passe par un bouton
fléché SpinBox, qui indique directement la valeur. Celui-ci peut imposer, en plus,
un nombre de décimales affichées decimals et un préfixe prefix ou un suffixe
suffix, notamment pour afficher une unité (ici, un symbole monétaire).
SpinBox {
id: spin
minimumValue: 0
maximumValue: 25
stepSize: .50
decimals: 2
suffix: " €"
}
Label { text: spin.value }
Champ de texte
Pour entrer du texte court, le choix le plus logique est un simple champ de texte
TextField, qui se limite à une ligne de texte. [20]
TextField { id: field; placeholderText: "Nom" }
Label { text: field.text }
Au contraire, pour de plus grandes étendues de texte, il est préférable d'y réserver
une zone plus imposante, avec TextArea.
TextArea { id: area }
Label { text: area.text }
Groupe
Un dernier composant bien pratique permet de grouper une série d'autres éléments
de l'interface : GroupBox. Cette zone se présente avec un titre et une bordure tout
autour de la zone délimitée. La difficulté avec cet élément est que, par défaut, sa
taille est déterminée par son contenu — ce qui peut nuire à l'affichage de la
bordure.
GroupBox {
title: "Groupe de composants"
320
