5. Squelette de BiblioApp
Ces quelques concepts de base sont d'ores et déjà suffisants pour ébaucher l'interface
de BiblioApp, l'application d'exemple. Cette interface se divise en deux parties : la
première affiche la liste des livres, la seconde permet d'en éditer un en particulier. Ce
genre de division peut s'obtenir à l'aide du composant SplitView, qui fonctionne
exactement comme un positionneur ; son apport majeur est de laisser l'utilisateur
déplacer lui-même la barre qui sépare les deux zones. Notez la propriété
orientation, qui indique comment effectuer la séparation en deux parties : dans le cas
de BiblioApp, comme on veut que les deux blocs s'alignent verticalement, sa valeur
sera donc Qt.Vertical.
Note > Le code source de cet exemple est disponible dans le projet biblioappsquelette .
ApplicationWindow {
id: window; width: 280; visible: true
menuBar: MenuBar {
Menu {
title: "&Fichier"
MenuItem { text: "Quitter" }
}
}
SplitView {
anchors.fill: parent
orientation: Qt.Vertical
Rectangle {
width: window.width
Layout.fillHeight: true
Layout.minimumHeight: 120
Layout.maximumHeight: 240
Text {
anchors.centerIn: parent
text: "Liste des livres"
}
}
Rectangle {
width: window.width
Layout.fillHeight: true
Layout.minimumHeight: 340
325
Ces quelques concepts de base sont d'ores et déjà suffisants pour ébaucher l'interface
de BiblioApp, l'application d'exemple. Cette interface se divise en deux parties : la
première affiche la liste des livres, la seconde permet d'en éditer un en particulier. Ce
genre de division peut s'obtenir à l'aide du composant SplitView, qui fonctionne
exactement comme un positionneur ; son apport majeur est de laisser l'utilisateur
déplacer lui-même la barre qui sépare les deux zones. Notez la propriété
orientation, qui indique comment effectuer la séparation en deux parties : dans le cas
de BiblioApp, comme on veut que les deux blocs s'alignent verticalement, sa valeur
sera donc Qt.Vertical.
Note > Le code source de cet exemple est disponible dans le projet biblioappsquelette .
ApplicationWindow {
id: window; width: 280; visible: true
menuBar: MenuBar {
Menu {
title: "&Fichier"
MenuItem { text: "Quitter" }
}
}
SplitView {
anchors.fill: parent
orientation: Qt.Vertical
Rectangle {
width: window.width
Layout.fillHeight: true
Layout.minimumHeight: 120
Layout.maximumHeight: 240
Text {
anchors.centerIn: parent
text: "Liste des livres"
}
}
Rectangle {
width: window.width
Layout.fillHeight: true
Layout.minimumHeight: 340
325
