feat✨: 添加初步的页面功能

CMakeLists.txt

@@ -17,6 +17,8 @@ qt_add_qml_module(appESP32_upper
     VERSION 1.0
     QML_FILES
         Main.qml
+        QML/pages/HomePage.qml
+        QML_FILES QML/models/TestModels.qml
 )
 
 # Qt for iOS sets MACOSX_BUNDLE_GUI_IDENTIFIER automatically since Qt 6.1.

Main.qml

@@ -1,8 +1,15 @@
 import QtQuick
+import QtQuick.Window
+import ESP32_upper 1.0
 
 Window {
-    width: 640
+    width: 1300
-    height: 480
+    height: 750
     visible: true
     title: qsTr("Hello World")
+
+    HomePage {
+        id: id_home_page
+
+    }
 }

QML/models/TestModels.qml

@@ -0,0 +1,48 @@
+import QtQuick 2.15
+
+ListModel {
+     ListElement {
+         name: "Bill Smith"
+         number: "555 3264"
+     }
+     ListElement {
+         name: "John Brown"
+         number: "555 8426"
+     }
+     ListElement {
+         name: "Sam Wise"
+         number: "555 0473"
+     }
+     ListElement {
+         name: "Sam Wise"
+         number: "555 0473"
+     }
+     ListElement {
+         name: "Sam Wise"
+         number: "555 0473"
+     }
+     ListElement {
+         name: "Sam Wise"
+         number: "555 0473"
+     }
+     ListElement {
+         name: "Sam Wise"
+         number: "555 0473"
+     }
+     ListElement {
+         name: "Sam Wise"
+         number: "555 0473"
+     }
+     ListElement {
+         name: "Sam Wise"
+         number: "555 0473"
+     }
+     ListElement {
+         name: "Sam Wise"
+         number: "555 0473"
+     }
+     ListElement {
+         name: "Sam Wise"
+         number: "555 0473"
+     }
+ }

QML/pages/HomePage.qml

@@ -0,0 +1,67 @@
+import QtQuick 2.15
+import QtQuick.Controls
+import QtQuick.Layouts
+import ESP32_upper 1.0
+
+Item {
+    id: root
+
+    Rectangle {
+        width: 180
+        height: Window.height
+        color: "green"
+
+        Component {
+            id: contactDelegate
+            // property int my_index: index
+            Rectangle {
+                width: 150; height: 60
+                anchors.left: parent.left // 靠父组件左边
+                anchors.leftMargin: 15 // 左边距20像素
+                radius: 5
+                MouseArea {
+                    id: mouseArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    onClicked: {
+                        // id_view.view.currentIndex = id_view.view.
+                        console.log("Clicked on", name)
+
+                    }
+                    onEntered: {
+                        parent.color = "red"
+                    }
+                    onExited: {
+                        parent.color = "white"
+                    }
+                }
+                Column {
+                    Text { text: '<b>Name:</b> ' + name }
+                    Text { text: '<b>Number:</b> ' + number }
+
+                }
+
+            }
+
+        }
+        MouseArea {
+            anchors.fill: parent
+            onWheel: (wheel) => {
+                wheel.accepted = true; // 处理滚轮事件并阻止事件传递
+                id_view.contentY += wheel.angleDelta.y / 120 * 10; // 根据滚轮的滚动方向和量来滚动 ListView
+            }
+            ListView {
+                id: id_view
+                spacing: 10
+                anchors.fill: parent
+                model: TestModels {}
+                delegate: contactDelegate
+                // highlight: Rectangle { color: "lightsteelblue"; radius: 2 }
+                // focus: true
+            }
+        }
+
+
+    }
+
+}