如何创建GridModel嵌套对象?(QML Qt)

Question

我有一个单元格对象。我需要创建一个包含这些单元格的模型。

这里是单元格代码。模型必须包含至少20个单元格。

Rectangle {
width: 270
height: 277
color: "#333333"
radius: 8
Rectangle {
z: 10
height: 32
width: 77
color: "#333333"
radius: 8
y: 8
x: 8
Button {
height: 32
width: 77
background: btnColor1
}
Text {
text: "DMT 10"
color: "white"
font.pixelSize: 12
anchors.centerIn: parent
}
}
Item {
height: 154
width: 270
Image {
source: "qrc:/images/cellimage.png"
id: imageOriginal
visible: false
anchors.fill: parent
}
Rectangle {
id: rectangleMask
anchors.fill: parent
radius: 8
visible: false
}
OpacityMask {
id: opacityMask
anchors.fill: imageOriginal
source: imageOriginal
maskSource: rectangleMask
}
}
Rectangle {
y: 149
width: 270
height: 120
color: '#333333'
ColumnLayout {
x: 17
y: 15
spacing: 8
Item {
height: 17
Image {
source: "qrc:/images/person.svg"
anchors.verticalCenter: parent.verticalCenter
}
Text {
text: "Cерийный номер:"
color: "white"
font.pixelSize: 14
leftPadding: 21
}
}
Item {
height: 17
Image {
source: "qrc:/images/baterry.svg"
anchors.verticalCenter: parent.verticalCenter
}
Text {
text: "Заряд: 63%"
color: "white"
font.pixelSize: 14
leftPadding: 21
}
}
Item {
height: 17
Image {
source: "qrc:/images/file.svg"
anchors.verticalCenter: parent.verticalCenter
}
Text {
text: "Файлы: 100%"
color: "white"
font.pixelSize: 14
leftPadding: 21
}
}
}
}
}

Answer 1

在下面，我声明了一个具有objid参数的ListModel。我还声明了一个sampleData对象，其中相同的objid可以用作访问其他元数据的键。

ListModel {
id: sampleModel
ListElement { objid: "obj1" }
ListElement { objid: "obj2" }
ListElement { objid: "obj3" }
}
property var sampleData: ({
"obj1": { "bat": "63%", "fil": "100%" },
"obj2": { "bat": "60%", "fil": "90%" },
"obj3": { "bat": "59%", "fil": "80%" }
})

要访问委托中的嵌套数据，我使用:

sampleData[objid].bat
sampleData[objid].fil

下面对原始委托进行了一个小编辑，以显示嵌套的元数据访问，还包括测试GridView应用程序。

import QtQuick
import QtQuick.Controls
Page {
GridView {
anchors.fill: parent
model: sampleModel
cellWidth: 300
cellHeight: 300
delegate: MyGridCell {
}
ScrollBar.vertical: ScrollBar {
width: 20
policy: ScrollBar.AlwaysOn
}
}
ListModel {
id: sampleModel
ListElement { objid: "obj1" }
ListElement { objid: "obj2" }
ListElement { objid: "obj3" }
}
property var sampleData: ({
"obj1": { "bat": "63%", "fil": "100%" },
"obj2": { "bat": "60%", "fil": "90%" },
"obj3": { "bat": "59%", "fil": "80%" }
})
}
// MyGridCell.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
Rectangle{
width: 270
height: 277
color: "#333333"
radius: 8
Rectangle{
z: 10
height: 32
width: 77
color: "#333333"
radius: 8
y:8
x:8
Button{
height: 32
width: 77
background: btnColor1
}
Text{
text: "DMT 10"
color: "white"
font.pixelSize: 12
anchors.centerIn: parent
}
}
Item{
height: 154
width: 270
Image{
source: "qrc:/images/cellimage.png"
id: imageOriginal
visible: false
anchors.fill: parent
}
Rectangle {
id: rectangleMask
anchors.fill: parent
radius: 8
visible: false
}
OpacityMask {
id: opacityMask
anchors.fill: imageOriginal
source: imageOriginal
maskSource: rectangleMask
}
}
Rectangle{
y: 149
width: 270
height: 120
color: '#333333'
ColumnLayout{
x: 17
y: 15
spacing: 8
Item {
height: 17
Image {
source: "qrc:/images/person.svg"
anchors.verticalCenter: parent.verticalCenter
}
Text {
text: "Cерийный номер:"
color: "white"
font.pixelSize: 14
leftPadding: 21
}
}
Item {
height: 17
Image {
source: "qrc:/images/baterry.svg"
anchors.verticalCenter: parent.verticalCenter
}
Text {
text: "Заряд: %1".arg(sampleData[objid].bat)
color: "white"
font.pixelSize: 14
leftPadding: 21
}
}
Item {
height: 17
Image {
source: "qrc:/images/file.svg"
anchors.verticalCenter: parent.verticalCenter
}
Text {
text: "Файлы: %1".arg(sampleData[objid].fil)
color: "white"
font.pixelSize: 14
leftPadding: 21
}
}
}
}
}

你可以在网上试试!