Merge pull request #598 from Polaris-Night/main

feat: 优化FluAutoSuggest和FluBadge

example/example_en_US.ts

@@ -2487,8 +2487,8 @@ Some contents...</source>
         <location filename="qml/page/T_TextBox.qml" line="33"/>
         <location filename="qml/page/T_TextBox.qml" line="64"/>
         <location filename="qml/page/T_TextBox.qml" line="97"/>
-        <location filename="qml/page/T_TextBox.qml" line="128"/>
+        <location filename="qml/page/T_TextBox.qml" line="135"/>
-        <location filename="qml/page/T_TextBox.qml" line="157"/>
+        <location filename="qml/page/T_TextBox.qml" line="168"/>
         <source>Disabled</source>
         <translation type="unfinished"></translation>
     </message>
@@ -2507,6 +2507,11 @@ Some contents...</source>
         <source>AutoSuggestBox</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <location filename="qml/page/T_TextBox.qml" line="131"/>
+        <source>Show suggest when pressed</source>
+        <translation type="unfinished"></translation>
+    </message>
 </context>
 <context>
     <name>T_Theme</name>

example/example_zh_CN.ts

@@ -2676,8 +2676,8 @@ Some contents...</source>
         <location filename="qml/page/T_TextBox.qml" line="33"/>
         <location filename="qml/page/T_TextBox.qml" line="64"/>
         <location filename="qml/page/T_TextBox.qml" line="97"/>
-        <location filename="qml/page/T_TextBox.qml" line="128"/>
+        <location filename="qml/page/T_TextBox.qml" line="135"/>
-        <location filename="qml/page/T_TextBox.qml" line="157"/>
+        <location filename="qml/page/T_TextBox.qml" line="168"/>
         <source>Disabled</source>
         <translation type="unfinished">禁用</translation>
     </message>
@@ -2696,6 +2696,11 @@ Some contents...</source>
         <source>AutoSuggestBox</source>
         <translation type="unfinished">自动建议框</translation>
     </message>
+    <message>
+        <location filename="qml/page/T_TextBox.qml" line="131"/>
+        <source>Show suggest when pressed</source>
+        <translation>按下时显示建议</translation>
+    </message>
 </context>
 <context>
     <name>T_Theme</name>

example/qml/page/T_Badge.qml

@@ -26,7 +26,8 @@ FluScrollablePage{
                 width: parent.width
                 text: qsTr("It usually appears in the upper right corner of the notification icon or avatar to display the number of messages that need to be processed")
             }
-            Row{
+            Flow{
+                width: parent.width
                 spacing: 20
                 Rectangle{
                     width: 40
@@ -34,7 +35,7 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
-                        topRight: true
+                        position: "topRight"
                         showZero: true
                         count:0
                     }
@@ -46,7 +47,7 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
-                        topRight: true
+                        position: "topRight"
                         showZero: true
                         count:5
                     }
@@ -57,7 +58,7 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
-                        topRight: true
+                        position: "topRight"
                         showZero: true
                         count:50
                     }
@@ -68,9 +69,10 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
-                        topRight: true
+                        position: "topRight"
                         showZero: true
-                        count:100
+                        count:1000
+                        max: 999
                     }
                 }
                 Rectangle{
@@ -79,7 +81,7 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
-                        topRight: true
+                        position: "topRight"
                         showZero: true
                         isDot:true
                     }
@@ -90,7 +92,7 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
-                        topRight: true
+                        position: "topRight"
                         showZero: true
                         count:99
                         color: Qt.rgba(250/255,173/255,20/255,1)
@@ -102,12 +104,71 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
-                        topRight: true
+                        position: "topRight"
                         showZero: true
                         count:99
                         color: Qt.rgba(82/255,196/255,26/255,1)
                     }
                 }
+                Rectangle{
+                    width: 40
+                    height: 40
+                    radius:  8
+                    color: Qt.rgba(191/255,191/255,191/255,1)
+                    FluBadge{
+                        position: "topRight"
+                        showZero: true
+                        count:100
+                        color: Qt.rgba(84/255,169/255,1,1)
+                    }
+                }
+                Rectangle{
+                    width: 40
+                    height: 40
+                    radius:  8
+                    color: Qt.rgba(191/255,191/255,191/255,1)
+                    FluBadge{
+                        position: "bottomLeft"
+                        showZero: true
+                        count:100
+                        color: Qt.rgba(84/255,169/255,1,1)
+                    }
+                }
+                Rectangle{
+                    width: 40
+                    height: 40
+                    radius:  8
+                    color: Qt.rgba(191/255,191/255,191/255,1)
+                    FluBadge{
+                        position: "topLeft"
+                        showZero: true
+                        count:100
+                        color: Qt.rgba(84/255,169/255,1,1)
+                    }
+                }
+                Rectangle{
+                    width: 40
+                    height: 40
+                    radius:  8
+                    color: Qt.rgba(191/255,191/255,191/255,1)
+                    FluBadge{
+                        position: "bottomRight"
+                        showZero: true
+                        count:100
+                        color: Qt.rgba(84/255,169/255,1,1)
+                    }
+                }
+                Rectangle{
+                    width: 40
+                    height: 40
+                    radius:  8
+                    color: Qt.rgba(191/255,191/255,191/255,1)
+                    FluBadge{
+                        position: "topRight"
+                        count: "NEW"
+                        color: Qt.rgba(84/255,169/255,1,1)
+                    }
+                }
             }
         }
     }
@@ -120,7 +181,9 @@ FluScrollablePage{
     radius: 8
     color: Qt.rgba(191/255,191/255,191/255,1)
     FluBadge{
+        position: "topRight"
         count: 100
+        max: 99
         isDot: false
         color: Qt.rgba(82/255,196/255,26/255,1)
     }

example/qml/page/T_TextBox.qml

@@ -114,18 +114,26 @@ FluScrollablePage{
             placeholderText: qsTr("AutoSuggestBox")
             items: generateRandomNames(100)
             disabled: text_box_suggest_switch.checked
+            itemRows: 12
+            showSuggestWhenPressed: text_box_show_suggest_switch.checked
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
         }
-        FluToggleSwitch{
+        RowLayout{
-            id:text_box_suggest_switch
             anchors{
                 verticalCenter: parent.verticalCenter
                 right: parent.right
             }
-            text: qsTr("Disabled")
+            FluToggleSwitch{
+                id:text_box_show_suggest_switch
+                text: qsTr("Show suggest when pressed")
+            }
+            FluToggleSwitch{
+                id:text_box_suggest_switch
+                text: qsTr("Disabled")
+            }
         }
     }
     CodeExpander{
@@ -133,6 +141,9 @@ FluScrollablePage{
         Layout.topMargin: -6
         code:'FluAutoSuggestBox{
     placeholderText: qsTr("AutoSuggestBox")
+    itemRows: 12
+    itemHeight: 38
+    showSuggestWhenPressed: false
 }'
     }
 

src/Qt5/imports/FluentUI/Controls/FluAutoSuggestBox.qml

@@ -7,9 +7,12 @@ FluTextBox{
     property var items:[]
     property string emptyText: qsTr("No results found")
     property int autoSuggestBoxReplacement: FluentIcons.Search
+    property int itemHeight: 38
+    property int itemRows: 8
+    property bool showSuggestWhenPressed: false
     property string textRole: "title"
     property var filter: function(item){
-        if(item.title.indexOf(control.text)!==-1){
+        if(item[textRole].indexOf(control.text)!==-1){
             return true
         }
         return false
@@ -29,17 +32,11 @@ FluTextBox{
             control.updateText(modelData[textRole])
         }
         function loadData(){
-            var result = []
             if(items==null){
-                list_view.model = result
+                list_view.model = []
                 return
             }
-            items.map(function(item){
+            list_view.model = items.filter(item => control.filter(item))
-                if(control.filter(item)){
-                    result.push(item)
-                }
-            })
-            list_view.model = result
         }
     }
     onActiveFocusChanged: {
@@ -69,7 +66,7 @@ FluTextBox{
                 ScrollBar.vertical: FluScrollBar {}
                 header: Item{
                     width: control.width
-                    height: visible ? 38 : 0
+                    height: visible ? control.itemHeight : 0
                     visible: list_view.count === 0
                     FluText{
                         text: emptyText
@@ -82,7 +79,7 @@ FluTextBox{
                 }
                 delegate:FluControl{
                     id: item_control
-                    height: 38
+                    height: control.itemHeight
                     width: control.width
                     onClicked: {
                         d.handleClick(modelData)
@@ -114,7 +111,7 @@ FluTextBox{
         background:Rectangle{
             id: rect_background
             implicitWidth: control.width
-            implicitHeight: 38*Math.min(Math.max(list_view.count,1),8)
+            implicitHeight: control.itemHeight*Math.min(Math.max(list_view.count,1),control.itemRows)
             radius: 5
             color: FluTheme.dark ? Qt.rgba(43/255,43/255,43/255,1) : Qt.rgba(1,1,1,1)
             border.color: FluTheme.dark ? Qt.rgba(26/255,26/255,26/255,1) : Qt.rgba(191/255,191/255,191/255,1)
@@ -124,6 +121,14 @@ FluTextBox{
         }
     }
     onTextChanged: {
+        control.showSuggest()
+    }
+    onPressed: {
+        if(control.showSuggestWhenPressed){
+            control.showSuggest()
+        }
+    }
+    function showSuggest(){
         d.loadData()
         if(d.flagVisible){
             var pos = control.mapToItem(null, 0, 0)

src/Qt5/imports/FluentUI/Controls/FluBadge.qml

@@ -5,19 +5,15 @@ import FluentUI 1.0
 Rectangle{
     property bool isDot: false
     property bool showZero: false
-    property int count: 0
+    property var count: 0
-    property bool topRight: false
+    property int max: 99
+    property string position: "" // topLeft, topRight, bottomLeft, bottomRight
     id:control
     color:Qt.rgba(255/255,77/255,79/255,1)
     width: {
         if(isDot)
             return 10
-        if(count<10){
+        return content_text.implicitWidth + 12
-            return 20
-        }else if(count<100){
-            return 30
-        }
-        return 40
     }
     height: {
         if(isDot)
@@ -31,49 +27,74 @@ Rectangle{
     }
     border.width: 1
     border.color: Qt.rgba(1,1,1,1)
-    anchors{
+    anchors {
+        left: {
+            if(!parent){
+                return undefined
+            }
+            return (position === "topLeft" || position === "bottomLeft") ? parent.left : undefined
+        }
         right: {
-            if(parent && topRight)
+            if(!parent){
-                return parent.right
+                return undefined
-            return undefined
+            }
+            return (position === "topRight" || position === "bottomRight") ? parent.right : undefined
         }
         top: {
-            if(parent && topRight)
+            if(!parent){
-                return parent.top
+                return undefined
-            return undefined
+            }
+            return (position === "topLeft" || position === "topRight") ? parent.top : undefined
+        }
+        bottom: {
+            if(!parent){
+                return undefined
+            }
+            return (position === "bottomLeft" || position === "bottomRight") ? parent.bottom : undefined
+        }
+        leftMargin: {
+            if(!parent){
+                return 0
+            }
+            return (position === "topLeft" || position === "bottomLeft") ? (isDot ? -2.5 : -(width / 2)) : 0
         }
         rightMargin: {
-            if(parent && topRight){
+            if(!parent){
-                if(isDot){
+                return 0
-                    return -2.5
-                }
-                return -(control.width/2)
             }
-            return 0
+            return (position === "topRight" || position === "bottomRight") ? (isDot ? -2.5 : -(width / 2)) : 0
         }
         topMargin: {
-            if(parent && topRight){
+            if(!parent){
-                if(isDot){
+                return 0
-                    return -2.5
-                }
-                return  -10
             }
-            return 0
+            return (position === "topLeft" || position === "topRight") ? (isDot ? -2.5 : -10) : 0
+        }
+        bottomMargin: {
+            if(!parent){
+                return 0
+            }
+            return (position === "bottomLeft" || position === "bottomRight") ? (isDot ? -2.5 : -10) : 0
         }
     }
     visible: {
-        if(showZero)
+        if(typeof(count) === "number"){
-            return true
+            return showZero ? true : count !== 0
-        return count!==0
+        }
+        return true
     }
     FluText{
+        id: content_text
         anchors.centerIn: parent
         color: Qt.rgba(1,1,1,1)
         visible: !isDot
         text:{
-            if(count<100)
+            if(typeof(count) === "string"){
                 return count
-            return "100+"
+            }else if(typeof(count) === "number"){
+                return count <= max ? count.toString() : "%1+".arg(max.toString())
+            }
+            return ""
         }
     }
 }

src/Qt6/imports/FluentUI/Controls/FluAutoSuggestBox.qml

@@ -6,9 +6,12 @@ FluTextBox{
     property var items:[]
     property string emptyText: qsTr("No results found")
     property int autoSuggestBoxReplacement: FluentIcons.Search
+    property int itemHeight: 38
+    property int itemRows: 8
+    property bool showSuggestWhenPressed: false
     property string textRole: "title"
     property var filter: function(item){
-        if(item.title.indexOf(control.text)!==-1){
+        if(item[textRole].indexOf(control.text)!==-1){
             return true
         }
         return false
@@ -28,17 +31,11 @@ FluTextBox{
             control.updateText(modelData[textRole])
         }
         function loadData(){
-            var result = []
             if(items==null){
-                list_view.model = result
+                list_view.model = []
                 return
             }
-            items.map(function(item){
+            list_view.model = items.filter(item => control.filter(item))
-                if(control.filter(item)){
-                    result.push(item)
-                }
-            })
-            list_view.model = result
         }
     }
     onActiveFocusChanged: {
@@ -68,7 +65,7 @@ FluTextBox{
                 ScrollBar.vertical: FluScrollBar {}
                 header: Item{
                     width: control.width
-                    height: visible ? 38 : 0
+                    height: visible ? control.itemHeight : 0
                     visible: list_view.count === 0
                     FluText{
                         text: emptyText
@@ -81,7 +78,7 @@ FluTextBox{
                 }
                 delegate:FluControl{
                     id: item_control
-                    height: 38
+                    height: control.itemHeight
                     width: control.width
                     onClicked: {
                         d.handleClick(modelData)
@@ -113,7 +110,7 @@ FluTextBox{
         background:Rectangle{
             id: rect_background
             implicitWidth: control.width
-            implicitHeight: 38*Math.min(Math.max(list_view.count,1),8)
+            implicitHeight: control.itemHeight*Math.min(Math.max(list_view.count,1),control.itemRows)
             radius: 5
             color: FluTheme.dark ? Qt.rgba(43/255,43/255,43/255,1) : Qt.rgba(1,1,1,1)
             border.color: FluTheme.dark ? Qt.rgba(26/255,26/255,26/255,1) : Qt.rgba(191/255,191/255,191/255,1)
@@ -123,6 +120,14 @@ FluTextBox{
         }
     }
     onTextChanged: {
+        control.showSuggest()
+    }
+    onPressed: {
+        if(control.showSuggestWhenPressed){
+            control.showSuggest()
+        }
+    }
+    function showSuggest(){
         d.loadData()
         if(d.flagVisible){
             var pos = control.mapToItem(null, 0, 0)

src/Qt6/imports/FluentUI/Controls/FluBadge.qml

@@ -5,19 +5,15 @@ import FluentUI
 Rectangle{
     property bool isDot: false
     property bool showZero: false
-    property int count: 0
+    property var count: 0
-    property bool topRight: false
+    property int max: 99
+    property string position: "" // topLeft, topRight, bottomLeft, bottomRight
     id:control
     color:Qt.rgba(255/255,77/255,79/255,1)
     width: {
         if(isDot)
             return 10
-        if(count<10){
+        return content_text.implicitWidth + 12
-            return 20
-        }else if(count<100){
-            return 30
-        }
-        return 40
     }
     height: {
         if(isDot)
@@ -31,49 +27,74 @@ Rectangle{
     }
     border.width: 1
     border.color: Qt.rgba(1,1,1,1)
-    anchors{
+    anchors {
+        left: {
+            if(!parent){
+                return undefined
+            }
+            return (position === "topLeft" || position === "bottomLeft") ? parent.left : undefined
+        }
         right: {
-            if(parent && topRight)
+            if(!parent){
-                return parent.right
+                return undefined
-            return undefined
+            }
+            return (position === "topRight" || position === "bottomRight") ? parent.right : undefined
         }
         top: {
-            if(parent && topRight)
+            if(!parent){
-                return parent.top
+                return undefined
-            return undefined
+            }
+            return (position === "topLeft" || position === "topRight") ? parent.top : undefined
+        }
+        bottom: {
+            if(!parent){
+                return undefined
+            }
+            return (position === "bottomLeft" || position === "bottomRight") ? parent.bottom : undefined
+        }
+        leftMargin: {
+            if(!parent){
+                return 0
+            }
+            return (position === "topLeft" || position === "bottomLeft") ? (isDot ? -2.5 : -(width / 2)) : 0
         }
         rightMargin: {
-            if(parent && topRight){
+            if(!parent){
-                if(isDot){
+                return 0
-                    return -2.5
-                }
-                return -(control.width/2)
             }
-            return 0
+            return (position === "topRight" || position === "bottomRight") ? (isDot ? -2.5 : -(width / 2)) : 0
         }
         topMargin: {
-            if(parent && topRight){
+            if(!parent){
-                if(isDot){
+                return 0
-                    return -2.5
-                }
-                return  -10
             }
-            return 0
+            return (position === "topLeft" || position === "topRight") ? (isDot ? -2.5 : -10) : 0
+        }
+        bottomMargin: {
+            if(!parent){
+                return 0
+            }
+            return (position === "bottomLeft" || position === "bottomRight") ? (isDot ? -2.5 : -10) : 0
         }
     }
     visible: {
-        if(showZero)
+        if(typeof(count) === "number"){
-            return true
+            return showZero ? true : count !== 0
-        return count!==0
+        }
+        return true
     }
     FluText{
+        id: content_text
         anchors.centerIn: parent
         color: Qt.rgba(1,1,1,1)
         visible: !isDot
         text:{
-            if(count<100)
+            if(typeof(count) === "string"){
                 return count
-            return "100+"
+            }else if(typeof(count) === "number"){
+                return count <= max ? count.toString() : "%1+".arg(max.toString())
+            }
+            return ""
         }
     }
 }