feat: FluBadge支持设置max和position

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)
     }

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 {
-        right: {
+        left: {
-            if(parent && topRight)
+            if(!parent){
-                return parent.right
                 return undefined
             }
+            return (position === "topLeft" || position === "bottomLeft") ? parent.left : undefined
+        }
+        right: {
+            if(!parent){
+                return undefined
+            }
+            return (position === "topRight" || position === "bottomRight") ? parent.right : undefined
+        }
         top: {
-            if(parent && topRight)
+            if(!parent){
-                return parent.top
                 return undefined
             }
-        rightMargin: {
+            return (position === "topLeft" || position === "topRight") ? parent.top : undefined
-            if(parent && topRight){
-                if(isDot){
-                    return -2.5
         }
-                return -(control.width/2)
+        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){
+                return 0
+            }
+            return (position === "topRight" || position === "bottomRight") ? (isDot ? -2.5 : -(width / 2)) : 0
+        }
         topMargin: {
-            if(parent && topRight){
+            if(!parent){
-                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(showZero)
+        if(typeof(count) === "number"){
+            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(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/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 {
-        right: {
+        left: {
-            if(parent && topRight)
+            if(!parent){
-                return parent.right
                 return undefined
             }
+            return (position === "topLeft" || position === "bottomLeft") ? parent.left : undefined
+        }
+        right: {
+            if(!parent){
+                return undefined
+            }
+            return (position === "topRight" || position === "bottomRight") ? parent.right : undefined
+        }
         top: {
-            if(parent && topRight)
+            if(!parent){
-                return parent.top
                 return undefined
             }
-        rightMargin: {
+            return (position === "topLeft" || position === "topRight") ? parent.top : undefined
-            if(parent && topRight){
-                if(isDot){
-                    return -2.5
         }
-                return -(control.width/2)
+        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){
+                return 0
+            }
+            return (position === "topRight" || position === "bottomRight") ? (isDot ? -2.5 : -(width / 2)) : 0
+        }
         topMargin: {
-            if(parent && topRight){
+            if(!parent){
-                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(showZero)
+        if(typeof(count) === "number"){
+            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(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 ""
         }
     }
 }