Je fais un effort pour écrire une application QML simple, qui consistera en de nombreux éléments répétés, organisés en lignes. Le résultat sera similaire à celui présenté ci-dessous :
Actuellement, j'ai un morceau de code répétitif qui atteint cet objectif :
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Controls.Material 2.3
import QtQuick.Layouts 1.12
ApplicationWindow {
Material.theme: Material.Dark
visible: true
width: 480
height: 640
title: qsTr("Bonjour le monde !")
id: root
GridLayout {
anchors.horizontalCenter: parent.horizontalCenter
columns: 3
Text {
color: "white"
text: "aaa"
font.family: "Ubuntu"
font.pixelSize: 20
}
SpinBox {
from: 0
to: 1000
stepSize: 1
editable: true
}
Rectangle {
width: 40
height: 20
color: "#F48FB1"
Text {
font.family: "Ubuntu"
font.pixelSize: 16
text: "ml"
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
}
}
Text {
color: "white"
text: "bbb"
font.family: "Ubuntu"
font.pixelSize: 20
}
SpinBox {
from: 0
to: 100
stepSize: 1
editable: true
}
Rectangle {
width: 40
height: 20
color: "#F48FB1"
Text {
font.family: "Ubuntu"
font.pixelSize: 16
text: "%"
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
}
}
Text {
color: "white"
text: "ccc"
font.family: "Ubuntu"
font.pixelSize: 20
}
SpinBox {
from: 0
to: 100
stepSize: 1
editable: true
}
Rectangle {
width: 40
height: 20
color: "#F48FB1"
Text {
font.family: "Ubuntu"
font.pixelSize: 16
text: "%"
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
}
Cependant, chaque ligne a exactement la même structure, donc j'ai essayé d'extraire le composant du code :
Item {
id: ingredient
property alias ingredientText: qualifier.text
property alias ingredientMaxValue: amount.to
property alias ingredientUnit: unit.text
RowLayout {
Text {
id: qualifier
color: "white"
text: "asdf"
font.family: "Ubuntu"
font.pixelSize: 20
}
SpinBox {
id: amount
from: 0
to: 1000
stepSize: 1
editable: true
}
Rectangle {
width: 40
height: 20
color: "#F48FB1"
Text {
id: unit
font.family: "Ubuntu"
font.pixelSize: 16
text: "unit"
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
}
Malheureusement, lorsque j'essaie d'utiliser mon composant dans la fenêtre principale, il est mal aligné et sort de la partie visible (je peux le voir à nouveau après avoir maximisé la fenêtre) :
ApplicationWindow {
Material.theme: Material.Dark
visible: true
width: 480
height: 640
title: qsTr("Bonjour le monde!")
id: root
GridLayout { // Je sais maintenant que cela ne fonctionnera pas correctement,
// mais j'ai essayé d'utiliser d'autres mises en page et méthodes d'alignement
// et cela ne m'a pas du tout aidé
anchors.horizontalCenter: parent.horizontalCenter
columns: 3
Ingredient {
ingredientMaxValue: 100; ingredientText: "qwerty"; ingredientUnit: "kg"
}
}
}
La question est : comment puis-je obtenir un alignement des éléments comme dans la première image, en utilisant des composants "Ingrédient" ?