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="135"/>
+        <location filename="qml/page/T_TextBox.qml" line="128"/>
-        <location filename="qml/page/T_TextBox.qml" line="168"/>
+        <location filename="qml/page/T_TextBox.qml" line="157"/>
         <source>Disabled</source>
         <translation type="unfinished"></translation>
     </message>
@@ -2507,11 +2507,6 @@ 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="135"/>
+        <location filename="qml/page/T_TextBox.qml" line="128"/>
-        <location filename="qml/page/T_TextBox.qml" line="168"/>
+        <location filename="qml/page/T_TextBox.qml" line="157"/>
         <source>Disabled</source>
         <translation type="unfinished">禁用</translation>
     </message>
@@ -2696,11 +2696,6 @@ 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,8 +26,7 @@ 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")
             }
-            Flow{
+            Row{
-                width: parent.width
                 spacing: 20
                 Rectangle{
                     width: 40
@@ -35,7 +34,7 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
-                        position: "topRight"
+                        topRight: true
                         showZero: true
                         count:0
                     }
@@ -47,7 +46,7 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
-                        position: "topRight"
+                        topRight: true
                         showZero: true
                         count:5
                     }
@@ -58,7 +57,7 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
-                        position: "topRight"
+                        topRight: true
                         showZero: true
                         count:50
                     }
@@ -69,10 +68,9 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
-                        position: "topRight"
+                        topRight: true
                         showZero: true
-                        count:1000
+                        count:100
-                        max: 999
                     }
                 }
                 Rectangle{
@@ -81,7 +79,7 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
-                        position: "topRight"
+                        topRight: true
                         showZero: true
                         isDot:true
                     }
@@ -92,7 +90,7 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
-                        position: "topRight"
+                        topRight: true
                         showZero: true
                         count:99
                         color: Qt.rgba(250/255,173/255,20/255,1)
@@ -104,71 +102,12 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
-                        position: "topRight"
+                        topRight: true
                         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)
-                    }
-                }
             }
         }
     }
@@ -181,9 +120,7 @@ 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,36 +114,25 @@ 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
             }
         }
-        RowLayout{
+        FluToggleSwitch{
+            id:text_box_suggest_switch
             anchors{
                 verticalCenter: parent.verticalCenter
                 right: parent.right
             }
-            FluToggleSwitch{
-                id:text_box_show_suggest_switch
-                text: qsTr("Show suggest when pressed")
-            }
-            FluToggleSwitch{
-                id:text_box_suggest_switch
             text: qsTr("Disabled")
         }
     }
-    }
     CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: -6
         code:'FluAutoSuggestBox{
     placeholderText: qsTr("AutoSuggestBox")
-    itemRows: 12
-    itemHeight: 38
-    showSuggestWhenPressed: false
 }'
     }
 

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

@@ -7,12 +7,9 @@ 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[textRole].indexOf(control.text)!==-1){
+        if(item.title.indexOf(control.text)!==-1){
             return true
         }
         return false
@@ -32,11 +29,17 @@ FluTextBox{
             control.updateText(modelData[textRole])
         }
         function loadData(){
+            var result = []
             if(items==null){
-                list_view.model = []
+                list_view.model = result
                 return
             }
-            list_view.model = items.filter(item => control.filter(item))
+            items.map(function(item){
+                if(control.filter(item)){
+                    result.push(item)
+                }
+            })
+            list_view.model = result
         }
     }
     onActiveFocusChanged: {
@@ -66,7 +69,7 @@ FluTextBox{
                 ScrollBar.vertical: FluScrollBar {}
                 header: Item{
                     width: control.width
-                    height: visible ? control.itemHeight : 0
+                    height: visible ? 38 : 0
                     visible: list_view.count === 0
                     FluText{
                         text: emptyText
@@ -79,7 +82,7 @@ FluTextBox{
                 }
                 delegate:FluControl{
                     id: item_control
-                    height: control.itemHeight
+                    height: 38
                     width: control.width
                     onClicked: {
                         d.handleClick(modelData)
@@ -111,7 +114,7 @@ FluTextBox{
         background:Rectangle{
             id: rect_background
             implicitWidth: control.width
-            implicitHeight: control.itemHeight*Math.min(Math.max(list_view.count,1),control.itemRows)
+            implicitHeight: 38*Math.min(Math.max(list_view.count,1),8)
             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)
@@ -121,14 +124,6 @@ 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,15 +5,19 @@ import FluentUI 1.0
 Rectangle{
     property bool isDot: false
     property bool showZero: false
-    property var count: 0
+    property int count: 0
-    property int max: 99
+    property bool topRight: false
-    property string position: "" // topLeft, topRight, bottomLeft, bottomRight
     id:control
     color:Qt.rgba(255/255,77/255,79/255,1)
     width: {
         if(isDot)
             return 10
-        return content_text.implicitWidth + 12
+        if(count<10){
+            return 20
+        }else if(count<100){
+            return 30
+        }
+        return 40
     }
     height: {
         if(isDot)
@@ -28,73 +32,48 @@ Rectangle{
     border.width: 1
     border.color: Qt.rgba(1,1,1,1)
     anchors{
-        left: {
-            if(!parent){
-                return undefined
-            }
-            return (position === "topLeft" || position === "bottomLeft") ? parent.left : undefined
-        }
         right: {
-            if(!parent){
+            if(parent && topRight)
+                return parent.right
             return undefined
         }
-            return (position === "topRight" || position === "bottomRight") ? parent.right : undefined
-        }
         top: {
-            if(!parent){
+            if(parent && topRight)
+                return parent.top
             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){
+            if(parent && topRight){
-                return 0
+                if(isDot){
+                    return -2.5
                 }
-            return (position === "topRight" || position === "bottomRight") ? (isDot ? -2.5 : -(width / 2)) : 0
+                return -(control.width/2)
+            }
+            return 0
         }
         topMargin: {
-            if(!parent){
+            if(parent && topRight){
+                if(isDot){
+                    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(typeof(count) === "number"){
+        if(showZero)
-            return showZero ? true : count !== 0
-        }
             return true
+        return count!==0
     }
     FluText{
-        id: content_text
         anchors.centerIn: parent
         color: Qt.rgba(1,1,1,1)
         visible: !isDot
         text:{
-            if(typeof(count) === "string"){
+            if(count<100)
                 return count
-            }else if(typeof(count) === "number"){
+            return "100+"
-                return count <= max ? count.toString() : "%1+".arg(max.toString())
-            }
-            return ""
         }
     }
 }

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

@@ -6,12 +6,9 @@ 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[textRole].indexOf(control.text)!==-1){
+        if(item.title.indexOf(control.text)!==-1){
             return true
         }
         return false
@@ -31,11 +28,17 @@ FluTextBox{
             control.updateText(modelData[textRole])
         }
         function loadData(){
+            var result = []
             if(items==null){
-                list_view.model = []
+                list_view.model = result
                 return
             }
-            list_view.model = items.filter(item => control.filter(item))
+            items.map(function(item){
+                if(control.filter(item)){
+                    result.push(item)
+                }
+            })
+            list_view.model = result
         }
     }
     onActiveFocusChanged: {
@@ -65,7 +68,7 @@ FluTextBox{
                 ScrollBar.vertical: FluScrollBar {}
                 header: Item{
                     width: control.width
-                    height: visible ? control.itemHeight : 0
+                    height: visible ? 38 : 0
                     visible: list_view.count === 0
                     FluText{
                         text: emptyText
@@ -78,7 +81,7 @@ FluTextBox{
                 }
                 delegate:FluControl{
                     id: item_control
-                    height: control.itemHeight
+                    height: 38
                     width: control.width
                     onClicked: {
                         d.handleClick(modelData)
@@ -110,7 +113,7 @@ FluTextBox{
         background:Rectangle{
             id: rect_background
             implicitWidth: control.width
-            implicitHeight: control.itemHeight*Math.min(Math.max(list_view.count,1),control.itemRows)
+            implicitHeight: 38*Math.min(Math.max(list_view.count,1),8)
             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)
@@ -120,14 +123,6 @@ 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,15 +5,19 @@ import FluentUI
 Rectangle{
     property bool isDot: false
     property bool showZero: false
-    property var count: 0
+    property int count: 0
-    property int max: 99
+    property bool topRight: false
-    property string position: "" // topLeft, topRight, bottomLeft, bottomRight
     id:control
     color:Qt.rgba(255/255,77/255,79/255,1)
     width: {
         if(isDot)
             return 10
-        return content_text.implicitWidth + 12
+        if(count<10){
+            return 20
+        }else if(count<100){
+            return 30
+        }
+        return 40
     }
     height: {
         if(isDot)
@@ -28,73 +32,48 @@ Rectangle{
     border.width: 1
     border.color: Qt.rgba(1,1,1,1)
     anchors{
-        left: {
-            if(!parent){
-                return undefined
-            }
-            return (position === "topLeft" || position === "bottomLeft") ? parent.left : undefined
-        }
         right: {
-            if(!parent){
+            if(parent && topRight)
+                return parent.right
             return undefined
         }
-            return (position === "topRight" || position === "bottomRight") ? parent.right : undefined
-        }
         top: {
-            if(!parent){
+            if(parent && topRight)
+                return parent.top
             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){
+            if(parent && topRight){
-                return 0
+                if(isDot){
+                    return -2.5
                 }
-            return (position === "topRight" || position === "bottomRight") ? (isDot ? -2.5 : -(width / 2)) : 0
+                return -(control.width/2)
+            }
+            return 0
         }
         topMargin: {
-            if(!parent){
+            if(parent && topRight){
+                if(isDot){
+                    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(typeof(count) === "number"){
+        if(showZero)
-            return showZero ? true : count !== 0
-        }
             return true
+        return count!==0
     }
     FluText{
-        id: content_text
         anchors.centerIn: parent
         color: Qt.rgba(1,1,1,1)
         visible: !isDot
         text:{
-            if(typeof(count) === "string"){
+            if(count<100)
                 return count
-            }else if(typeof(count) === "number"){
+            return "100+"
-                return count <= max ? count.toString() : "%1+".arg(max.toString())
-            }
-            return ""
         }
     }
 }