update

example/T_Badge.qml

@@ -0,0 +1,101 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import QtGraphicalEffects 1.15
+import FluentUI 1.0
+
+FluScrollablePage{
+
+    title:"Badge"
+
+
+    FluArea{
+        width: parent.width
+        Layout.topMargin: 20
+        height: 106
+        paddings: 10
+
+        Column{
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluText{
+                text:"一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数"
+            }
+
+            Row{
+                spacing: 20
+                Rectangle{
+                    width: 40
+                    height: 40
+                    radius:  8
+                    color: Qt.rgba(191/255,191/255,191/255,1)
+                    FluBadge{
+                        count:0
+                    }
+                }
+
+                Rectangle{
+                    width: 40
+                    height: 40
+                    radius:  8
+                    color: Qt.rgba(191/255,191/255,191/255,1)
+                    FluBadge{
+                        count:5
+                    }
+                }
+                Rectangle{
+                    width: 40
+                    height: 40
+                    radius:  8
+                    color: Qt.rgba(191/255,191/255,191/255,1)
+                    FluBadge{
+                        count:50
+                    }
+                }
+                Rectangle{
+                    width: 40
+                    height: 40
+                    radius:  8
+                    color: Qt.rgba(191/255,191/255,191/255,1)
+                    FluBadge{
+                        count:100
+                    }
+                }
+                Rectangle{
+                    width: 40
+                    height: 40
+                    radius:  8
+                    color: Qt.rgba(191/255,191/255,191/255,1)
+                    FluBadge{
+                        isDot:true
+                    }
+                }
+                Rectangle{
+                    width: 40
+                    height: 40
+                    radius:  8
+                    color: Qt.rgba(191/255,191/255,191/255,1)
+                    FluBadge{
+                        count:99
+                        color: Qt.rgba(250/255,173/255,20/255,1)
+                    }
+                }
+                Rectangle{
+                    width: 40
+                    height: 40
+                    radius:  8
+                    color: Qt.rgba(191/255,191/255,191/255,1)
+                    FluBadge{
+                        count:99
+                        color: Qt.rgba(82/255,196/255,26/255,1)
+                    }
+                }
+            }
+        }
+    }
+
+}

example/T_Rectangle.qml

@@ -21,8 +21,6 @@ FluScrollablePage{
             height: 50
             color:"#744da9"
             radius:[15,15,15,15]
-            FluBadge{
-            }
         }
         FluRectangle{
             width: 50

example/T_Tooltip.qml

@@ -7,7 +7,7 @@ import FluentUI 1.0
 
 FluScrollablePage{
 
-    title:"TextBox"
+    title:"Tooltip"
 
     FluText{
         Layout.topMargin: 20

example/page/ChatPage.qml

@@ -14,6 +14,11 @@ FluWindow {
 
     title:"ChatGPT"
 
+    onInitArgument:
+        (argument)=>{
+            scrollview.focus = true
+        }
+
     ChatController{
         id:controller
 
@@ -167,6 +172,7 @@ FluWindow {
 
 
         ScrollView{
+            id:scrollview
             anchors{
                 bottom: parent.bottom
                 left: parent.left
@@ -178,6 +184,8 @@ FluWindow {
             height: Math.min(textbox.implicitHeight,64)
             FluMultiLineTextBox{
                 id:textbox
+                focus:true
+                placeholderText: "请输入消息"
             }
         }
 

example/page/MainPage.qml

@@ -90,6 +90,13 @@ FluWindow {
             }
         }
 
+        FluPaneItem{
+            title:"Badge"
+            onTap:{
+                nav_view.push("qrc:/T_Badge.qml")
+            }
+        }
+
         FluPaneItem{
             title:"Rectangle"
             onTap:{
@@ -97,7 +104,6 @@ FluWindow {
             }
         }
 
-
         FluPaneItem{
             title:"Carousel"
             onTap:{

example/qml.qrc

@@ -41,5 +41,6 @@
         <file>res/image/logo_openai.png</file>
         <file>page/ChatPage.qml</file>
         <file>T_Tooltip.qml</file>
+        <file>T_Badge.qml</file>
     </qresource>
 </RCC>

src/controls/FluBadge.qml

@@ -1,11 +1,77 @@
 import QtQuick 2.15
 
-Item {
-
-    property bool isDot: false
-
 Rectangle{
 
+    property bool isDot: false
+    property bool showZero: true
+    property int count: 0
+
+
+    id:control
+    color:Qt.rgba(255/255,77/255,79/255,1)
+    width: {
+        if(isDot)
+            return 10
+        if(count<10){
+            return 20
+        }else if(count<100){
+           return 30
+        }
+        return 40
+    }
+    height: {
+        if(isDot)
+            return 10
+        return 20
+    }
+    radius: {
+        if(isDot)
+            return 5
+        return 10
+    }
+    border.width: 1
+    border.color: Qt.rgba(1,1,1,1)
+    visible: {
+        if(showZero)
+            return true
+        return count!==0
+    }
+    anchors{
+        right: {
+            if(parent)
+                return parent.right
+            return undefined
+        }
+        top: {
+            if(parent)
+                return parent.top
+            return undefined
+        }
+        rightMargin: {
+            if(isDot){
+                return -2.5
+            }
+            return -(control.width/2)
+        }
+        topMargin: {
+            if(isDot){
+                return -2.5
+            }
+            return  -10
+        }
     }
 
+    Text{
+        anchors.centerIn: parent
+        color: Qt.rgba(1,1,1,1)
+        visible: !isDot
+        text:{
+            if(count<100)
+                return count
+            return count+"+"
+        }
+    }
+
+
+
 }