RibbonTabBar and RibbonTabButton: Add settings btn, highlight property and more func.

CMakeLists.txt

@@ -1,4 +1,4 @@
-cmake_minimum_required(VERSION 3.16)
+cmake_minimum_required(VERSION 3.21)
 
 project(RibbonUI_Project VERSION 1.0.4 LANGUAGES CXX)
 
@@ -13,6 +13,8 @@ option(RIBBONUI_UNIVERSAL_BUILD_MACOS "Universal build RibbonUI for macOS." ON)
 
 if(APPLE AND RIBBONUI_UNIVERSAL_BUILD_MACOS)
     set(CMAKE_OSX_ARCHITECTURES "arm64;x86_64" CACHE STRING "" FORCE)
+else()
+    set(RIBBONUI_UNIVERSAL_BUILD_MACOS OFF)
 endif()
 
 if(NOT RIBBONUI_QML_PLUGIN_DIRECTORY)

lib_source/qml/RibbonTabBar.qml

@@ -22,10 +22,15 @@ Item{
     property string bg_color: dark_mode ? "#2D2D2D" : "#F4F5F3"
     property double bg_opacity: 0.8
     property string border_color: dark_mode ? "black" : "#CCCCCC"
+    property bool showSettingsBtn: true
+    property alias count: bar.count
+
+    signal settingsBtnClicked()
 
     Component {
         id: ribbonTabButton
         RibbonTabButton{
+            height: bar.contentHeight
         }
     }
 
@@ -48,7 +53,7 @@ Item{
         id:bg
         anchors
         {
-            top: modern_style ? bar.bottom : top_border.bottom
+            top: modern_style ? bar_view.bottom : top_border.bottom
             left: parent.left
             right: parent.right
             bottom:bottom_border.top
@@ -82,18 +87,45 @@ Item{
         anchors.fill: bg
     }
 
-    TabBar {
+    ScrollView{
-        id: bar
+        id: bar_view
-        z:1
         anchors{
             top:top_border.bottom
             left: parent.left
             right:tool_bar.left
         }
+        height: bar_layout.height
+        z:1
+        ScrollBar.horizontal: RibbonScrollBar{
+            anchors.bottom: bar_view.bottom
+            anchors.horizontalCenter: bar_view.horizontalCenter
+            width: bar_view.width - 10
+            height: 5
+        }
+        RowLayout
+        {
+            id: bar_layout
+            spacing: 0
+            RibbonTabButton{
+                id: setting_btn
+                height: bar.contentHeight
+                checkable: false
+                Layout.alignment: Qt.AlignHCenter
+                Layout.leftMargin: 5
+                Layout.rightMargin: 10
+                text: qsTr("Settings")
+                onClicked: settingsBtnClicked()
+                visible: root.showSettingsBtn
+            }
+            TabBar {
+                id: bar
+                Layout.alignment: Qt.AlignHCenter
                 background: Item{}
                 position: TabBar.Header
                 currentIndex: stack.currentIndex
             }
+        }
+    }
 
     RowLayout{
         id: tool_bar
@@ -113,7 +145,7 @@ Item{
         id: stack
         z:0
         anchors{
-            top:bar.bottom
+            top: bar_view.bottom
             left: parent.left
             right:parent.right
         }
@@ -252,6 +284,54 @@ Item{
 
     //onModern_styleChanged: refresh()
 
+    function addPage(content, is_highlight)
+    {
+        var item
+        if (content instanceof Component)
+            item = content
+        else
+        {
+            item = Qt.createComponent(content, bar)
+            if (component.status === Component.Error) {
+                console.log(qsTr("RibbonTabBar: Error loading component:"), component.errorString());
+                return
+            }
+        }
+        if(item instanceof RibbonTabPage){
+            let btn = ribbonTabButton.createObject(bar,{text:qsTr(item.title),index:bar.count-1,highlight:is_highlight})
+            btn.need_fold.connect(hide_stack)
+            root.foldedChanged.connect(function(){btn.setFolded(folded)})
+        }
+    }
+
+    function deletePage(index)
+    {
+        for (var i=0, count = 0; i < bar.contentChildren.length; i++)
+        {
+            var item = bar.itemAt(i)
+            if(item instanceof RibbonTabButton){
+                if (count === index)
+                {
+                    item.destroy()
+                    break
+                }
+                count++
+            }
+        }
+        for (let i=0, count = 0; i < stack.contentChildren.length; i++)
+        {
+            let item = stack.itemAt(i)
+            if(item instanceof RibbonTabGroup){
+                if (count === index)
+                {
+                    item.destroy()
+                    break
+                }
+                count++
+            }
+        }
+    }
+
     function hide_stack(need_hide, index)
     {
         if (typeof(last_index)==='undefined'||last_index===index||last_index!==index&&!need_hide)

lib_source/qml/RibbonTabButton.qml

@@ -11,7 +11,8 @@ TabButton {
     property bool dark_mode: RibbonTheme.dark_mode
     property string underline_unchecked_color: dark_mode ? "#666666" : RibbonTheme.modern_style ? "#A2A2A2" : "#D1D1D1"
     property string underline_checked_color: dark_mode ? "#8AAAEB" : "#2E4C93"
-    property string font_color: dark_mode ? "white" : "black"
+    property string font_color: highlight ? dark_mode ? "white" : "#355795" : dark_mode ? "white" : "black"
+    property bool highlight: false
 
     background: Item{}
     contentItem: Item{
@@ -24,7 +25,7 @@ TabButton {
             font{
                 family: Qt.platform.os === "osx" ? "PingFang SC" : "Microsoft YaHei UI"
                 pixelSize: 13
-                bold: true
+                bold: checked
             }
             color: font_color
             height: contentHeight