From 8ef0a05b73be227ecc660e84040a0ad20f879ccb Mon Sep 17 00:00:00 2001 From: impressionyang Date: Thu, 28 Nov 2024 17:02:42 +0800 Subject: [PATCH] =?UTF-8?q?file=F0=9F=93=A6:=20=E6=B7=BB=E5=8A=A0SVG?= =?UTF-8?q?=E5=9B=BE=E6=A0=87=E6=96=87=E4=BB=B6=20style=F0=9F=92=84:=20?= =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=B7=A6=E8=BE=B9=E8=8F=9C=E5=8D=95=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CMakeLists.txt | 8 +- Main.qml | 4 +- QML/components/LeftMenu.qml | 127 ++++++++++++++++++++++++++++ QML/models/GlobalProperties.qml | 12 +++ QML/models/TestModels.qml | 50 ++++------- QML/pages/HomePage.qml | 63 +++----------- assets/img/arrow-up-circle-fill.svg | 1 + assets/img/command-line.svg | 1 + assets/img/flip-vertical-2-fill.svg | 1 + assets/img/home-3-fill.svg | 1 + assets/img/line-chart-fill.svg | 1 + assets/img/terminal-box-fill.svg | 1 + resources.qrc | 10 +++ 13 files changed, 194 insertions(+), 86 deletions(-) create mode 100644 QML/components/LeftMenu.qml create mode 100644 QML/models/GlobalProperties.qml create mode 100644 assets/img/arrow-up-circle-fill.svg create mode 100644 assets/img/command-line.svg create mode 100644 assets/img/flip-vertical-2-fill.svg create mode 100644 assets/img/home-3-fill.svg create mode 100644 assets/img/line-chart-fill.svg create mode 100644 assets/img/terminal-box-fill.svg create mode 100644 resources.qrc 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 + +