diff --git a/CMakeLists.txt b/CMakeLists.txt
index c0d4e1d..c82b39d 100644
--- a/CMakeLists.txt
+++ b/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)
diff --git a/Main.qml b/Main.qml
index 2e9aeab..0e34504 100644
--- a/Main.qml
+++ b/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
-
}
}
diff --git a/QML/components/LeftMenu.qml b/QML/components/LeftMenu.qml
new file mode 100644
index 0000000..cf26ef9
--- /dev/null
+++ b/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)
+ }
+ }
+
+ }
+}
diff --git a/QML/models/GlobalProperties.qml b/QML/models/GlobalProperties.qml
new file mode 100644
index 0000000..29663f8
--- /dev/null
+++ b/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"
+
+}
diff --git a/QML/models/TestModels.qml b/QML/models/TestModels.qml
index d82818e..7605d84 100644
--- a/QML/models/TestModels.qml
+++ b/QML/models/TestModels.qml
@@ -2,47 +2,29 @@ import QtQuick 2.15
ListModel {
ListElement {
- name: "Bill Smith"
- number: "555 3264"
+ name: "主页"
+ flag: "func_home"
+ qrc_path: "qrc:/assets/img/home-3-fill.svg"
}
ListElement {
- name: "John Brown"
- number: "555 8426"
+ name: "串口"
+ flag: "func_serial"
+ qrc_path: "qrc:/assets/img/terminal-box-fill.svg"
}
ListElement {
- name: "Sam Wise"
- number: "555 0473"
+ name: "命令"
+ flag: "func_cmd"
+ qrc_path: "qrc:/assets/img/command-line.svg"
}
ListElement {
- name: "Sam Wise"
- number: "555 0473"
+ name: "图形"
+ flag: "func_graph"
+ qrc_path: "qrc:/assets/img/line-chart-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"
- }
- ListElement {
- name: "Sam Wise"
- number: "555 0473"
+ name: "升级"
+ flag: "func_OTA"
+ qrc_path: "qrc:/assets/img/arrow-up-circle-fill.svg"
}
+
}
diff --git a/QML/pages/HomePage.qml b/QML/pages/HomePage.qml
index 9ea2193..5851dcc 100644
--- a/QML/pages/HomePage.qml
+++ b/QML/pages/HomePage.qml
@@ -6,62 +6,25 @@ import ESP32_upper 1.0
Item {
id: root
- Rectangle {
- width: 180
- height: Window.height
- color: "green"
+ RowLayout {
+ spacing: 0
- 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)
+ Rectangle {
+ id: id_left_panel
+ width: 80
+ height: Window.height
+ color: "#00FF00"
- }
- onEntered: {
- parent.color = "red"
- }
- onExited: {
- parent.color = "white"
- }
- }
- Column {
- Text { text: 'Name: ' + name }
- Text { text: 'Number: ' + 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
+ LeftMenu {
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"
+ }
}
}
diff --git a/assets/img/arrow-up-circle-fill.svg b/assets/img/arrow-up-circle-fill.svg
new file mode 100644
index 0000000..ca7e971
--- /dev/null
+++ b/assets/img/arrow-up-circle-fill.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/img/command-line.svg b/assets/img/command-line.svg
new file mode 100644
index 0000000..23d95bb
--- /dev/null
+++ b/assets/img/command-line.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/img/flip-vertical-2-fill.svg b/assets/img/flip-vertical-2-fill.svg
new file mode 100644
index 0000000..3582fd3
--- /dev/null
+++ b/assets/img/flip-vertical-2-fill.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/img/home-3-fill.svg b/assets/img/home-3-fill.svg
new file mode 100644
index 0000000..e913855
--- /dev/null
+++ b/assets/img/home-3-fill.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/img/line-chart-fill.svg b/assets/img/line-chart-fill.svg
new file mode 100644
index 0000000..5e20811
--- /dev/null
+++ b/assets/img/line-chart-fill.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/img/terminal-box-fill.svg b/assets/img/terminal-box-fill.svg
new file mode 100644
index 0000000..cfa5ba6
--- /dev/null
+++ b/assets/img/terminal-box-fill.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/resources.qrc b/resources.qrc
new file mode 100644
index 0000000..e5c8ec0
--- /dev/null
+++ b/resources.qrc
@@ -0,0 +1,10 @@
+
+
+ assets/img/arrow-up-circle-fill.svg
+ assets/img/command-line.svg
+ assets/img/flip-vertical-2-fill.svg
+ assets/img/home-3-fill.svg
+ assets/img/terminal-box-fill.svg
+ assets/img/line-chart-fill.svg
+
+