Moving the list item delegate into its own QML file.

CMakeLists.txt

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

ListItemDelegate.qml

@@ -0,0 +1,19 @@
+import QtQuick
+
+Item {
+    id: myItem
+    required property string name
+    required property string info
+    property int fontSize: 16
+
+    width: parent.width
+    height: 40
+    Column {
+        Text {
+            text: '<b>Name:</b> ' + myItem.name
+        }
+        Text {
+            text: '<b>Info:</b> ' + myItem.info
+        }
+    }
+}

ListPage.qml

@@ -5,33 +5,15 @@ 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
+        delegate: ListItemDelegate {}
         highlight: Rectangle {
             color: "lightsteelblue"
             radius: 5
         }
         focus: true
+        clip: true
     }
 }