feat: 设备信息ui优化

mhduiy · Dec 22, 2024 · 156fe56 · 156fe56
1 parent ea60616
commit 156fe56
Show file tree

Hide file tree

Showing 6 changed files with 379 additions and 305 deletions.
diff --git a/src/MFloat/Controls/MLoadIndicator.qml b/src/MFloat/Controls/MLoadIndicator.qml
@@ -49,8 +49,7 @@ Item {
         property: "rotation"
         from: 0
         to: 360
-        duration: 1500
+        duration: 1000
         loops: Animation.Infinite
-        easing.type: Easing.OutBack
     }
 }
diff --git a/src/main.qrc b/src/main.qrc
@@ -7,6 +7,7 @@
         <file>qml/components/BatteryRect.qml</file>
         <file>qml/components/SettingItem.qml</file>
         <file>qml/components/TitleBar.qml</file>
+        <file>qml/components/MonitorItem.qml</file>
         <file>qml/pages/DeviceInfoPage.qml</file>
         <file>qml/pages/DeviceControlPage.qml</file>
         <file>qml/pages/DeviceAppPage.qml</file>

diff --git a/src/qml/components/BatteryRect.qml b/src/qml/components/BatteryRect.qml
@@ -1,12 +1,13 @@
 import QtQuick
 
 Item {
+    id: root
     property bool charging: false
     property int level: 80
-    id: root
 
     // 背景
     Rectangle {
+        clip: true
         id: backRect
         anchors.fill: parent
         radius: 10
@@ -19,22 +20,23 @@ Item {
 
         Rectangle {
             id: indi
-            height: parent.height
+            anchors.bottom: parent.bottom
+            width: parent.width
             radius: parent.radius
-            width: parent.width * root.level / 100.0
+            height: parent.height * root.level / 100.0
             color: {
                 if (root.level < 10) {
-                    return backRect.warningColor
+                    return backRect.warningColor;
                 } else if (root.level < 30) {
-                    return backRect.lowColor
+                    return backRect.lowColor;
                 } else if (root.level < 50) {
-                    return backRect.midColor
+                    return backRect.midColor;
                 } else {
-                    return backRect.goodColor
+                    return backRect.goodColor;
                 }
             }
 
-            Behavior on width {
+            Behavior on height {
                 PropertyAnimation {
                     duration: 300
                     easing.type: Easing.OutExpo
@@ -46,18 +48,49 @@ Item {
                     duration: 300
                 }
             }
+
+            Rectangle {
+                x: 0
+                y: root.height
+                width: root.width
+                height: 100
+
+                // 使用一个线性渐变
+                gradient: Gradient {
+                    GradientStop {
+                        position: 0.0
+                        color: Qt.rgba(255, 255, 255, 0.4)
+                    }
+                    GradientStop {
+                        position: 1.0
+                        color: "transparent"
+                    }
+                }
+
+                NumberAnimation on y {
+                    from: root.height
+                    to: 0
+                    duration: 5000
+                    loops: Animation.Infinite
+                    easing.type: Easing.OutQuad
+                }
+
+                NumberAnimation on opacity {
+                    from: 1
+                    to: 0
+                    duration: 5000
+                    loops: Animation.Infinite
+                }
+            }
         }
 
         Text {
-            anchors.bottom: parent.bottom
-            anchors.left: parent.left
-            anchors.bottomMargin: 10
-            anchors.leftMargin: 10
+            anchors.centerIn: parent
             color: "white"
             font.family: "黑体"
             font.pixelSize: 16
             font.bold: true
-            text: (charging ? "充电中 " : "剩余电量 ") + root.level + "%"
+            text: root.level + "%"
         }
     }
 }
diff --git a/src/qml/components/MonitorItem.qml b/src/qml/components/MonitorItem.qml
@@ -0,0 +1,18 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import MFloat
+
+MWrapper {
+    Layout.preferredHeight: 200
+    Layout.fillWidth: true
+    title: "电池电量"
+    titleRightContent: MSwitchButton {
+    }
+    Rectangle {
+        radius: 12
+        border.width: 1
+        border.color: "gray"
+        color: "transparent"
+    }
+}