height: booksList.cellHeight * .8 fillMode: Image.PreserveAspectFit
anchors.horizontalCenter: parent.horizontalCenter } Text { text: title + ", " + author
wrapMode: Text.WordWrap width: parent.width anchors.horizontalCenter:
parent.horizontalCenter horizontalAlignment: Text.AlignHCenter } } MouseArea {
onClicked: booksList.currentIndex = index anchors.fill: parent } } focus: true
highlight: Rectangle { color: "lightsteelblue" } } }
Une grille est définie par la vue GridView. Elle dispose ses éléments dans une
grille, comme on s'y attend.
Chaque cellule de cette grille a une taille imposée.
Comme précédemment, il faudra rassembler d'un côté l'image et la description, puis
de l'autre une zone sensible aux clics. Le composant Item est prévu pour ces usages.
L'image et la description peuvent être affichées dans une colonne.
Pour des raisons esthétiques, on laisse un peu d'espace au-dessus de l'image, pour
que le rectangle de sélection soit bien visible.
Une image est affichée avec le composant Image. Le fichier à utiliser est donné dans
la propriété source.
Pour laisser place à la description, l'image ne prendra que 80 % de la hauteur
disponible dans la case.
Afin d'éviter des distorsions de l'image, la largeur n'est pas fixée : la propriété
fillMode indique qu'elle doit être calculée pour préserver l'aspect de l'image
(valeur Image.PreserveAspectFit).
Par défaut, le composant Text n'a pas de largeur imposée sur son contenu.
Cependant, ici, cela signifierait qu'il pourrait sortir de la case imposée par
GridView. Dans ce cas, il faut aussi préciser avec la propriété wrap comment les
342