amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2025-05-11 23:51:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: FluBadge支持设置max和position

Browse Source
This commit is contained in:
Polaris-Night 2025-05-09 08:22:09 +08:00
parent 5de9588b93
commit 99c77d2786
3 changed files with 178 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
example/qml/page/T_Badge.qml
View File

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

85
src/Qt5/imports/FluentUI/Controls/FluBadge.qml
View File

@ -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 ""
}
}
}

85
src/Qt6/imports/FluentUI/Controls/FluBadge.qml
View File

@ -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 ""
}
}
}