From f1ad289411f0e38148faaaa72742b37a67e0000f Mon Sep 17 00:00:00 2001
From: Bent Witthold <bent@working-copy.org>
Date: Thu, 5 Mar 2026 10:53:52 +0100
Subject: [PATCH] Using a ListView with a simple delegate component.

---
 CMakeLists.txt |  1 +
 ListPage.qml   | 37 +++++++++++++++++++++++++++++++++++++
 Main.qml       | 38 +++++++++-----------------------------
 3 files changed, 47 insertions(+), 29 deletions(-)
 create mode 100644 ListPage.qml

diff --git a/CMakeLists.txt b/CMakeLists.txt
index d34032e..de27f66 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -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.
diff --git a/ListPage.qml b/ListPage.qml
new file mode 100644
index 0000000..03ccefa
--- /dev/null
+++ b/ListPage.qml
@@ -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
+    }
+}
diff --git a/Main.qml b/Main.qml
index 592180a..56a0fb3 100644
--- a/Main.qml
+++ b/Main.qml
@@ -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
-                }
-            }
-        }
     }
 }