Using a ListView with a simple delegate component.

This commit is contained in:
2026-03-05 10:53:52 +01:00
parent 7b6979288a
commit f1ad289411
3 changed files with 47 additions and 29 deletions

View File

@ -17,6 +17,7 @@ qt_add_qml_module(${TARGET_APP}
URI GenericQML
QML_FILES
Main.qml
QML_FILES ListPage.qml
)
# Qt for iOS sets MACOSX_BUNDLE_GUI_IDENTIFIER automatically since Qt 6.1.

37
ListPage.qml Normal file
View File

@ -0,0 +1,37 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls.Material
Page {
id: page
Component {
id: contactDelegate
Item {
id: myItem
required property string name
required property string info
width: parent.width
height: 40
Column {
Text {
text: '<b>Name:</b> ' + myItem.name
}
Text {
text: '<b>Number:</b> ' + myItem.info
}
}
}
}
ListView {
anchors.fill: parent
model: mainModel
delegate: contactDelegate
highlight: Rectangle {
color: "lightsteelblue"
radius: 5
}
focus: true
}
}

View File

@ -3,37 +3,17 @@ import QtQuick.Layouts
import QtQml.Models
Window {
width: 640
height: 480
id: window
width: 480
height: 800
visible: true
title: qsTr("Hello World")
title: `${Application.name}`
ColumnLayout {
property color textColor: "black"
property int fontSize: 16
ListPage {
id: listPage
anchors.fill: parent
Text {
text: "Model row count: " + mainModel.rowCount()
Layout.alignment: Layout.Center
}
TableView {
Layout.fillWidth: true
Layout.fillHeight: true
Layout.margins: 10
columnSpacing: 1
rowSpacing: 1
clip: true
model: mainModel
delegate: Rectangle {
implicitWidth: 100
implicitHeight: 50
Text {
text: display
}
}
}
}
}