From 4793747c83237d0585a568eb81bcf47db905167d Mon Sep 17 00:00:00 2001
From: Mentalflow <312902918@qq.com>
Date: Sat, 24 May 2025 00:56:34 +0800
Subject: [PATCH] RibbonTabPage: Use asynchronous load to improve
 RibbonTabBar's performance.

---
 lib_source/qml/Qt5/RibbonTabPage.qml  | 68 +++++++++++++++++++++------
 lib_source/qml/Qt6/RibbonTabGroup.qml |  1 +
 lib_source/qml/Qt6/RibbonTabPage.qml  | 68 +++++++++++++++++++++------
 3 files changed, 107 insertions(+), 30 deletions(-)

diff --git a/lib_source/qml/Qt5/RibbonTabPage.qml b/lib_source/qml/Qt5/RibbonTabPage.qml
index 8ac242e..f2503bc 100644
--- a/lib_source/qml/Qt5/RibbonTabPage.qml
+++ b/lib_source/qml/Qt5/RibbonTabPage.qml
@@ -4,22 +4,60 @@ import QtQuick.Layouts 1.11
 import RibbonUI 1.1
 
 Item {
+    id: control
+    property int delegateCount: 0
     property string title
-    default property alias content: container.data
+    required default property Component content
+    property bool needActive: SwipeView.isCurrentItem || SwipeView.isNextItem || SwipeView.isPreviousItem
+    property var delegateList: []
+
+    readonly property var contentItem: main_loader.item.containerItem
+
+    signal containerItemUpdated()
     clip: true
-    Flickable{
-        id: view
-        anchors.fill: parent
-        ScrollIndicator.horizontal: RibbonScrollIndicator{
-            anchors.bottom: view.bottom
-            anchors.horizontalCenter: view.horizontalCenter
-            width: view.width - 10
-        }
-        contentWidth: container.width
-        RowLayout{
-            id: container
-            spacing: 0
-            height: parent.height
-        }
+
+    onContentChanged: {
+        delegateList.push({
+                               "content": content,
+                               "index": control.delegateCount++
+                           })
     }
+
+    Loader{
+        id: main_loader
+        active: control.needActive
+        anchors.fill: parent
+        asynchronous: true
+        sourceComponent: Flickable{
+            id: view
+            property alias containerItem: container
+            ScrollIndicator.horizontal: RibbonScrollIndicator{
+                anchors.bottom: view.bottom
+                anchors.horizontalCenter: view.horizontalCenter
+                width: view.width - 10
+            }
+            contentWidth: container.width
+            RowLayout{
+                id: container
+                spacing: 0
+                height: parent.height
+                Repeater{
+                    model: control.delegateList
+                    Loader{
+                        required property var modelData
+                        width: item.width
+                        Layout.fillHeight: true
+                        active: control.needActive
+                        sourceComponent: control.delegateList[modelData.index].content
+                    }
+                }
+            }
+        }
+        onLoaded: containerItemUpdated()
+    }
+
+    function getItem( index : int ){
+        return contentItem.children[index].item
+    }
+
 }
diff --git a/lib_source/qml/Qt6/RibbonTabGroup.qml b/lib_source/qml/Qt6/RibbonTabGroup.qml
index dc9dd5a..2ff1b48 100644
--- a/lib_source/qml/Qt6/RibbonTabGroup.qml
+++ b/lib_source/qml/Qt6/RibbonTabGroup.qml
@@ -1,4 +1,5 @@
 import QtQuick
+import QtQuick.Controls
 import QtQuick.Layouts
 import RibbonUI
 
diff --git a/lib_source/qml/Qt6/RibbonTabPage.qml b/lib_source/qml/Qt6/RibbonTabPage.qml
index e03e466..b1ea490 100644
--- a/lib_source/qml/Qt6/RibbonTabPage.qml
+++ b/lib_source/qml/Qt6/RibbonTabPage.qml
@@ -4,22 +4,60 @@ import QtQuick.Layouts
 import RibbonUI
 
 Item {
+    id: control
+    property int delegateCount: 0
     property string title
-    default property alias content: container.data
+    required default property Component content
+    property bool needActive: SwipeView.isCurrentItem || SwipeView.isNextItem || SwipeView.isPreviousItem
+    property var delegateList: []
+
+    readonly property var contentItem: main_loader.item.containerItem
+
+    signal containerItemUpdated()
     clip: true
-    Flickable{
-        id: view
-        anchors.fill: parent
-        ScrollIndicator.horizontal: RibbonScrollIndicator{
-            anchors.bottom: view.bottom
-            anchors.horizontalCenter: view.horizontalCenter
-            width: view.width - 10
-        }
-        contentWidth: container.width
-        RowLayout{
-            id: container
-            spacing: 0
-            height: parent.height
-        }
+
+    onContentChanged: {
+        delegateList.push({
+                               "content": content,
+                               "index": control.delegateCount++
+                           })
     }
+
+    Loader{
+        id: main_loader
+        active: control.needActive
+        anchors.fill: parent
+        asynchronous: true
+        sourceComponent: Flickable{
+            id: view
+            property alias containerItem: container
+            ScrollIndicator.horizontal: RibbonScrollIndicator{
+                anchors.bottom: view.bottom
+                anchors.horizontalCenter: view.horizontalCenter
+                width: view.width - 10
+            }
+            contentWidth: container.width
+            RowLayout{
+                id: container
+                spacing: 0
+                height: parent.height
+                Repeater{
+                    model: control.delegateList
+                    Loader{
+                        required property var modelData
+                        width: item.width
+                        Layout.fillHeight: true
+                        active: control.needActive
+                        sourceComponent: control.delegateList[modelData.index].content
+                    }
+                }
+            }
+        }
+        onLoaded: containerItemUpdated()
+    }
+
+    function getItem( index : int ){
+        return contentItem.children[index].item
+    }
+
 }