From 99c77d2786629f632d8160ce5e0e10e6adcd1317 Mon Sep 17 00:00:00 2001 From: Polaris-Night <158275221@qq.com> Date: Fri, 9 May 2025 08:22:09 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20FluBadge=E6=94=AF=E6=8C=81=E8=AE=BE?= =?UTF-8?q?=E7=BD=AEmax=E5=92=8Cposition?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/qml/page/T_Badge.qml | 81 ++++++++++++++++-- .../imports/FluentUI/Controls/FluBadge.qml | 85 ++++++++++++------- .../imports/FluentUI/Controls/FluBadge.qml | 85 ++++++++++++------- 3 files changed, 178 insertions(+), 73 deletions(-) diff --git a/example/qml/page/T_Badge.qml b/example/qml/page/T_Badge.qml index 6a2db9c5..941fc241 100644 --- a/example/qml/page/T_Badge.qml +++ b/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) } diff --git a/src/Qt5/imports/FluentUI/Controls/FluBadge.qml b/src/Qt5/imports/FluentUI/Controls/FluBadge.qml index 32fe084c..22086a7d 100644 --- a/src/Qt5/imports/FluentUI/Controls/FluBadge.qml +++ b/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 bool topRight: false + property var count: 0 + 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 20 - }else if(count<100){ - return 30 - } - return 40 + return content_text.implicitWidth + 12 } 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) - return parent.right - return undefined + if(!parent){ + return undefined + } + return (position === "topRight" || position === "bottomRight") ? parent.right : undefined } top: { - if(parent && topRight) - return parent.top - return undefined + if(!parent){ + 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(isDot){ - return -2.5 - } - return -(control.width/2) + if(!parent){ + return 0 } - return 0 + return (position === "topRight" || position === "bottomRight") ? (isDot ? -2.5 : -(width / 2)) : 0 } topMargin: { - if(parent && topRight){ - if(isDot){ - return -2.5 - } - return -10 + if(!parent){ + return 0 } - 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) - return true - return count!==0 + if(typeof(count) === "number"){ + return showZero ? true : 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 "" } } } diff --git a/src/Qt6/imports/FluentUI/Controls/FluBadge.qml b/src/Qt6/imports/FluentUI/Controls/FluBadge.qml index 2e88c728..2c390c48 100644 --- a/src/Qt6/imports/FluentUI/Controls/FluBadge.qml +++ b/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 bool topRight: false + property var count: 0 + 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 20 - }else if(count<100){ - return 30 - } - return 40 + return content_text.implicitWidth + 12 } 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) - return parent.right - return undefined + if(!parent){ + return undefined + } + return (position === "topRight" || position === "bottomRight") ? parent.right : undefined } top: { - if(parent && topRight) - return parent.top - return undefined + if(!parent){ + 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(isDot){ - return -2.5 - } - return -(control.width/2) + if(!parent){ + return 0 } - return 0 + return (position === "topRight" || position === "bottomRight") ? (isDot ? -2.5 : -(width / 2)) : 0 } topMargin: { - if(parent && topRight){ - if(isDot){ - return -2.5 - } - return -10 + if(!parent){ + return 0 } - 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) - return true - return count!==0 + if(typeof(count) === "number"){ + return showZero ? true : 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 "" } } }