Speed up Settings page (#2951)

* it works, but i need to check all the accordionelement * fixing layouts * Update settings.qml
cagnulein · Dec 28, 2024 · c99ef80 · c99ef80
1 parent 2adf3fe
commit c99ef80
Show file tree

Hide file tree

Showing 4 changed files with 3,174 additions and 3,087 deletions.
diff --git a/src/AccordionElement.qml b/src/AccordionElement.qml
@@ -10,7 +10,7 @@ ColumnLayout {
     property alias textFont: accordionText.font.family
     property alias textFontSize: accordionText.font.pixelSize
     property alias indicatRectColor: indicatRect.color
-    default property alias accordionContent: contentPlaceholder.data
+    default property alias accordionContent: contentLoader.sourceComponent
     spacing: 0
 
     Layout.fillWidth: true;
@@ -36,33 +36,42 @@ ColumnLayout {
             color: "#FFFFFF"
             text: rootElement.title
         }
+
         Image {
             y:13
-            anchors.right:  parent.right
+            anchors.right: parent.right
             anchors.rightMargin: 20
             width: 30; height: 30
             id: indicatImg
             source: "qrc:/icons/arrow-collapse-vertical.png"
         }
+
         MouseArea {
             anchors.fill: parent
             cursorShape: Qt.PointingHandCursor
             onClicked: {
                 rootElement.isOpen = !rootElement.isOpen
-                if(rootElement.isOpen)
-                {
+                if(rootElement.isOpen) {
                     indicatImg.source = "qrc:/icons/arrow-expand-vertical.png"
-                }else{
+                } else {
                     indicatImg.source = "qrc:/icons/arrow-collapse-vertical.png"
                 }
             }
         }
     }
 
-    // This will get filled with the content
-    ColumnLayout {
-        id: contentPlaceholder
+    // Lazy loading implementation using Loader
+    Loader {
+        id: contentLoader
+        active: rootElement.isOpen
         visible: rootElement.isOpen
-        Layout.fillWidth: true;
+        Layout.fillWidth: true
+
+        // Wrap the content in a ColumnLayout to maintain the original layout behavior
+        onLoaded: {
+            if (item) {
+                item.Layout.fillWidth = true
+            }
+        }
     }
 }
diff --git a/src/StaticAccordionElement.qml b/src/StaticAccordionElement.qml
@@ -0,0 +1,68 @@
+import QtQuick 2.7
+import QtQuick.Layouts 1.3
+
+ColumnLayout {
+    id: rootElement
+    property bool isOpen: false
+    property string title: ""
+    property alias color: accordionHeader.color
+    property alias textColor: accordionText.color
+    property alias textFont: accordionText.font.family
+    property alias textFontSize: accordionText.font.pixelSize
+    property alias indicatRectColor: indicatRect.color
+    default property alias accordionContent: contentPlaceholder.data
+    spacing: 0
+
+    Layout.fillWidth: true;
+
+    Rectangle {
+        id: accordionHeader
+        color: "red"
+        Layout.alignment: Qt.AlignTop
+        Layout.fillWidth: true;
+        height: 48
+
+        Rectangle{
+           id:indicatRect
+           x: 16; y: 20
+           width: 8; height: 8
+           radius: 8
+           color: "white"
+        }
+
+        Text {
+            id: accordionText
+            x:34;y:13
+            color: "#FFFFFF"
+            text: rootElement.title
+        }
+        Image {
+            y:13
+            anchors.right:  parent.right
+            anchors.rightMargin: 20
+            width: 30; height: 30
+            id: indicatImg
+            source: "qrc:/icons/arrow-collapse-vertical.png"
+        }
+        MouseArea {
+            anchors.fill: parent
+            cursorShape: Qt.PointingHandCursor
+            onClicked: {
+                rootElement.isOpen = !rootElement.isOpen
+                if(rootElement.isOpen)
+                {
+                    indicatImg.source = "qrc:/icons/arrow-expand-vertical.png"
+                }else{
+                    indicatImg.source = "qrc:/icons/arrow-collapse-vertical.png"
+                }
+            }
+        }
+    }
+
+    // This will get filled with the content
+    ColumnLayout {
+        id: contentPlaceholder
+        visible: rootElement.isOpen
+        Layout.fillWidth: true;
+    }
+}
diff --git a/src/qml.qrc b/src/qml.qrc
@@ -111,5 +111,6 @@
         <file>Wizard.qml</file>
         <file>gears.qml</file>
         <file>IndicatorOnlySwitch.qml</file>
+        <file>StaticAccordionElement.qml</file>
     </qresource>
 </RCC>