file📦: 添加SVG图标文件

style💄: 更新左边菜单样式

CMakeLists.txt

@@ -3,9 +3,12 @@ cmake_minimum_required(VERSION 3.16)
 project(ESP32_upper VERSION 0.1 LANGUAGES CXX)
 
 set(CMAKE_CXX_STANDARD_REQUIRED ON)
+set(CMAKE_AUTORCC ON)
 
 find_package(Qt6 6.5 REQUIRED COMPONENTS Quick)
 
+find_package(Qt6 COMPONENTS Core Gui Svg Core5Compat  REQUIRED)
+
 qt_standard_project_setup(REQUIRES 6.5)
 
 qt_add_executable(appESP32_upper
@@ -19,6 +22,9 @@ qt_add_qml_module(appESP32_upper
         Main.qml
         QML/pages/HomePage.qml
         QML_FILES QML/models/TestModels.qml
+        QML_FILES QML/components/LeftMenu.qml
+        QML_FILES QML/models/GlobalProperties.qml
+        RESOURCES resources.qrc
 )
 
 # Qt for iOS sets MACOSX_BUNDLE_GUI_IDENTIFIER automatically since Qt 6.1.
@@ -33,7 +39,7 @@ set_target_properties(appESP32_upper PROPERTIES
 )
 
 target_link_libraries(appESP32_upper
-    PRIVATE Qt6::Quick
+    PRIVATE Qt6::Quick Qt6::Core Qt6::Gui Qt6::Svg Qt6::Core5Compat
 )
 
 include(GNUInstallDirs)

Main.qml

@@ -7,9 +7,11 @@ Window {
     height: 750
     visible: true
     title: qsTr("Hello World")
+    minimumHeight: 600
+    minimumWidth: 800
+    // color: "green"
 
     HomePage {
         id: id_home_page
-
     }
 }

QML/components/LeftMenu.qml

@@ -0,0 +1,127 @@
+import QtQuick 2.15
+import QtQuick.Controls
+import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
+import ESP32_upper 1.0
+
+Item {
+    GlobalProperties {
+        id: global_properties
+    }
+
+    Component {
+        id: contactDelegate
+        // property int my_index: index
+        Rectangle {
+            width: 60; height: 60
+            anchors.left: parent.left // 靠父组件左边
+            anchors.leftMargin: 10 // 左边距20像素
+            radius: 5
+            color: global_properties.left_menu_non_lighlight_color
+            MouseArea {
+                id: mouseArea
+                anchors.fill: parent
+                hoverEnabled: true
+                onClicked: {
+                    // id_view.view.currentIndex = index
+                    global_properties.left_menu_index_last = global_properties.left_menu_index_now
+                    global_properties.left_menu_index_now = index
+                    id_view.currentIndex = index
+                    // console.log("left_menu_index", global_properties.left_menu_index_now)
+                }
+
+                onEntered: {
+                    if (index != global_properties.left_menu_index_now) {
+                        id_view.itemAtIndex(index).color = global_properties.left_menu_focus_color
+                    }
+                    id_lm_tooltip_text.text = name;
+                    id_lm_tooltip.visible = true;
+                }
+
+                onExited: {
+                    if (index != global_properties.left_menu_index_now) {
+                        id_view.itemAtIndex(index).color = global_properties.left_menu_non_lighlight_color
+                    }
+                    id_lm_tooltip.visible = false;
+                }
+
+
+                Rectangle {
+                    color: "transparent" // 设置背景为透明
+                    width:50 ; height:50
+                    anchors.centerIn : parent
+                    Image {
+                        id:svgIMG
+                        source: qrc_path
+                        width: parent.width
+                        height: parent.height
+                        smooth: true // 使图片平滑缩放
+                        asynchronous: true // 异步加载图片
+                    }
+                    // 使用 ColorOverlay 修改 SVG 颜色
+                    ColorOverlay {
+                        anchors.fill: svgIMG
+                        source: svgIMG
+                        color: global_properties.left_menu_icon_color // 修改后的 SVG 图片颜色
+                    }
+                }
+
+                ToolTip {
+                    id: id_lm_tooltip
+                    delay: 1000
+                    timeout: 5000
+                    width: 60
+                    height: 30
+                    // text: "" // 初始文本为空
+                    opacity: 0.7
+                    background: Rectangle {
+                        color: "#e70e0e"
+                        anchors.fill: parent
+                        border.color: "#e70e0e"
+                        radius: 10
+                        Text {
+                            anchors.centerIn: parent
+                            id: id_lm_tooltip_text
+                            text: ""
+                            font.pixelSize: 20
+                            color: "#0e0606"
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onWheel: (wheel) => {
+            wheel.accepted = true; // 处理滚轮事件并阻止事件传递
+            id_view.contentY += wheel.angleDelta.y / 120 * 10; // 根据滚轮的滚动方向和量来滚动 ListView
+        }
+        ListView {
+            id: id_view
+            spacing: 10
+            topMargin: 10
+            anchors.fill: parent
+            model: TestModels {}
+            delegate: contactDelegate
+            flickDeceleration: 0 // 禁止滚动时的伸缩效果
+            clip : true
+            snapMode: ListView.SnapToItem
+            onCurrentIndexChanged: {
+                // console.log("2 left_menu_index", global_properties.left_menu_index_now)
+                itemAtIndex(global_properties.left_menu_index_now).color = global_properties.left_menu_lighlight_color
+                itemAtIndex(global_properties.left_menu_index_last).color = global_properties.left_menu_non_lighlight_color
+            }
+
+            Component.onCompleted: {
+                id_view.currentIndex = id_view.count
+                global_properties.left_menu_index_last = id_view.count
+                global_properties.left_menu_index_now = 0
+                id_view.currentIndex = 0
+                console.log("complete at ", global_properties.left_menu_index_now)
+            }
+        }
+
+    }
+}

QML/models/GlobalProperties.qml

@@ -0,0 +1,12 @@
+import QtQuick 2.15
+
+Item {
+    property string global_banner: "Hello World"
+    property int left_menu_index_now: 0
+    property int left_menu_index_last: 0
+    property string left_menu_lighlight_color: "#FF00FF"
+    property string left_menu_non_lighlight_color: "#FFFFFF"
+    property string left_menu_focus_color: "#FAFA00"
+    property string left_menu_icon_color: "#0d4e8b"
+
+}

QML/models/TestModels.qml

@@ -2,47 +2,29 @@ import QtQuick 2.15
 
 ListModel {
      ListElement {
-         name: "Bill Smith"
+         name: "主页"
-         number: "555 3264"
+         flag: "func_home"
+         qrc_path: "qrc:/assets/img/home-3-fill.svg"
      }
      ListElement {
-         name: "John Brown"
+         name: "串口"
-         number: "555 8426"
+         flag: "func_serial"
+         qrc_path: "qrc:/assets/img/terminal-box-fill.svg"
      }
      ListElement {
-         name: "Sam Wise"
+         name: "命令"
-         number: "555 0473"
+         flag: "func_cmd"
+         qrc_path: "qrc:/assets/img/command-line.svg"
      }
      ListElement {
-         name: "Sam Wise"
+         name: "图形"
-         number: "555 0473"
+         flag: "func_graph"
+         qrc_path: "qrc:/assets/img/line-chart-fill.svg"
      }
      ListElement {
-         name: "Sam Wise"
+         name: "升级"
-         number: "555 0473"
+         flag: "func_OTA"
-     }
+         qrc_path: "qrc:/assets/img/arrow-up-circle-fill.svg"
-     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

@@ -6,62 +6,25 @@ import ESP32_upper 1.0
 Item {
     id: root
 
-    Rectangle {
+    RowLayout {
-        width: 180
+        spacing: 0
-        height: Window.height
-        color: "green"
 
-        Component {
+        Rectangle {
-            id: contactDelegate
+            id: id_left_panel
-            // property int my_index: index
+            width: 80
-            Rectangle {
+            height: Window.height
-                width: 150; height: 60
+            color: "#00FF00"
-                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)
 
-                    }
+            LeftMenu {
-                    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
             }
         }
 
-
+        Rectangle {
+            width: Window.width - id_left_panel.width
+            height: Window.height
+            color: "#0000FF"
+        }
     }
 
 }

assets/img/arrow-up-circle-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="240" height="240" fill="currentColor"><path d="M12 2C17.52 2 22 6.48 22 12C22 17.52 17.52 22 12 22C6.48 22 2 17.52 2 12C2 6.48 6.48 2 12 2ZM13 12H16L12 8L8 12H11V16H13V12Z"></path></svg>

assets/img/command-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="240" height="240" fill="currentColor"><path d="M10 8H14V6.5C14 4.567 15.567 3 17.5 3C19.433 3 21 4.567 21 6.5C21 8.433 19.433 10 17.5 10H16V14H17.5C19.433 14 21 15.567 21 17.5C21 19.433 19.433 21 17.5 21C15.567 21 14 19.433 14 17.5V16H10V17.5C10 19.433 8.433 21 6.5 21C4.567 21 3 19.433 3 17.5C3 15.567 4.567 14 6.5 14H8V10H6.5C4.567 10 3 8.433 3 6.5C3 4.567 4.567 3 6.5 3C8.433 3 10 4.567 10 6.5V8ZM8 8V6.5C8 5.67157 7.32843 5 6.5 5C5.67157 5 5 5.67157 5 6.5C5 7.32843 5.67157 8 6.5 8H8ZM8 16H6.5C5.67157 16 5 16.6716 5 17.5C5 18.3284 5.67157 19 6.5 19C7.32843 19 8 18.3284 8 17.5V16ZM16 8H17.5C18.3284 8 19 7.32843 19 6.5C19 5.67157 18.3284 5 17.5 5C16.6716 5 16 5.67157 16 6.5V8ZM16 16V17.5C16 18.3284 16.6716 19 17.5 19C18.3284 19 19 18.3284 19 17.5C19 16.6716 18.3284 16 17.5 16H16ZM10 10V14H14V10H10Z"></path></svg>

assets/img/flip-vertical-2-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20V4C21 3.44772 20.5523 3 20 3H4ZM8 10L12 6L16 10H13V14H16L12 18L8 14H11L11 10H8Z"></path></svg>

assets/img/home-3-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="240" height="240" fill="currentColor"><path d="M20 20C20 20.5523 19.5523 21 19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20ZM8 15V17H16V15H8Z"></path></svg>

assets/img/line-chart-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="240" height="240" fill="currentColor"><path d="M5 3V19H21V21H3V3H5ZM19.9393 5.93934L22.0607 8.06066L16 14.1213L13 11.121L9.06066 15.0607L6.93934 12.9393L13 6.87868L16 9.879L19.9393 5.93934Z"></path></svg>

assets/img/terminal-box-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="240" height="240" fill="currentColor"><path d="M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM12 15V17H18V15H12ZM8.41421 12L5.58579 14.8284L7 16.2426L11.2426 12L7 7.75736L5.58579 9.17157L8.41421 12Z"></path></svg>

resources.qrc

@@ -0,0 +1,10 @@
+<RCC>
+    <qresource prefix="/">
+        <file>assets/img/arrow-up-circle-fill.svg</file>
+        <file>assets/img/command-line.svg</file>
+        <file>assets/img/flip-vertical-2-fill.svg</file>
+        <file>assets/img/home-3-fill.svg</file>
+        <file>assets/img/terminal-box-fill.svg</file>
+        <file>assets/img/line-chart-fill.svg</file>
+    </qresource>
+</RCC>