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

Merge pull request #598 from Polaris-Night/main

Browse Source 
feat: 优化FluAutoSuggest和FluBadge
This commit is contained in:
zhuzichu 2025-05-09 09:19:19 +08:00 committed by GitHub
commit af573b71a4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 240 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
example/example_en_US.ts
View File

@ -2487,8 +2487,8 @@ Some contents...</source>
<location filename="qml/page/T_TextBox.qml" line="33"/> <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="64"/>
<location filename="qml/page/T_TextBox.qml" line="97"/> <location filename="qml/page/T_TextBox.qml" line="97"/>
<location filename="qml/page/T_TextBox.qml" line="128"/> <location filename="qml/page/T_TextBox.qml" line="135"/>
<location filename="qml/page/T_TextBox.qml" line="157"/> <location filename="qml/page/T_TextBox.qml" line="168"/>
<source>Disabled</source> <source>Disabled</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>
@ -2507,6 +2507,11 @@ Some contents...</source>
<source>AutoSuggestBox</source> <source>AutoSuggestBox</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>
<message>
<location filename="qml/page/T_TextBox.qml" line="131"/>
<source>Show suggest when pressed</source>
<translation type="unfinished"></translation>
</message>
</context> </context>
<context> <context>
<name>T_Theme</name> <name>T_Theme</name>

9
example/example_zh_CN.ts
View File

@ -2676,8 +2676,8 @@ Some contents...</source>
<location filename="qml/page/T_TextBox.qml" line="33"/> <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="64"/>
<location filename="qml/page/T_TextBox.qml" line="97"/> <location filename="qml/page/T_TextBox.qml" line="97"/>
<location filename="qml/page/T_TextBox.qml" line="128"/> <location filename="qml/page/T_TextBox.qml" line="135"/>
<location filename="qml/page/T_TextBox.qml" line="157"/> <location filename="qml/page/T_TextBox.qml" line="168"/>
<source>Disabled</source> <source>Disabled</source>
<translation type="unfinished">禁用</translation> <translation type="unfinished">禁用</translation>
</message> </message>
@ -2696,6 +2696,11 @@ Some contents...</source>
<source>AutoSuggestBox</source> <source>AutoSuggestBox</source>
<translation type="unfinished">自动建议框</translation> <translation type="unfinished">自动建议框</translation>
</message> </message>
<message>
<location filename="qml/page/T_TextBox.qml" line="131"/>
<source>Show suggest when pressed</source>
<translation>按下时显示建议</translation>
</message>
</context> </context>
<context> <context>
<name>T_Theme</name> <name>T_Theme</name>

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

@ -26,7 +26,8 @@ FluScrollablePage{
width: parent.width 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") 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 spacing: 20
Rectangle{ Rectangle{
width: 40 width: 40
@ -34,7 +35,7 @@ FluScrollablePage{
radius: 8 radius: 8
color: Qt.rgba(191/255,191/255,191/255,1) color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{ FluBadge{
topRight: true position: "topRight"
showZero: true showZero: true
count:0 count:0
} }
@ -46,7 +47,7 @@ FluScrollablePage{
radius: 8 radius: 8
color: Qt.rgba(191/255,191/255,191/255,1) color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{ FluBadge{
topRight: true position: "topRight"
showZero: true showZero: true
count:5 count:5
} }
@ -57,7 +58,7 @@ FluScrollablePage{
radius: 8 radius: 8
color: Qt.rgba(191/255,191/255,191/255,1) color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{ FluBadge{
topRight: true position: "topRight"
showZero: true showZero: true
count:50 count:50
} }
@ -68,9 +69,10 @@ FluScrollablePage{
radius: 8 radius: 8
color: Qt.rgba(191/255,191/255,191/255,1) color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{ FluBadge{
topRight: true position: "topRight"
showZero: true showZero: true
count:100 count:1000
max: 999
} }
} }
Rectangle{ Rectangle{
@ -79,7 +81,7 @@ FluScrollablePage{
radius: 8 radius: 8
color: Qt.rgba(191/255,191/255,191/255,1) color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{ FluBadge{
topRight: true position: "topRight"
showZero: true showZero: true
isDot:true isDot:true
} }
@ -90,7 +92,7 @@ FluScrollablePage{
radius: 8 radius: 8
color: Qt.rgba(191/255,191/255,191/255,1) color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{ FluBadge{
topRight: true position: "topRight"
showZero: true showZero: true
count:99 count:99
color: Qt.rgba(250/255,173/255,20/255,1) color: Qt.rgba(250/255,173/255,20/255,1)
@ -102,12 +104,71 @@ FluScrollablePage{
radius: 8 radius: 8
color: Qt.rgba(191/255,191/255,191/255,1) color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{ FluBadge{
topRight: true position: "topRight"
showZero: true showZero: true
count:99 count:99
color: Qt.rgba(82/255,196/255,26/255,1) 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 radius: 8
color: Qt.rgba(191/255,191/255,191/255,1) color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{ FluBadge{
position: "topRight"
count: 100 count: 100
max: 99
isDot: false isDot: false
color: Qt.rgba(82/255,196/255,26/255,1) color: Qt.rgba(82/255,196/255,26/255,1)
} }

15
example/qml/page/T_TextBox.qml
View File

@ -114,25 +114,36 @@ FluScrollablePage{
placeholderText: qsTr("AutoSuggestBox") placeholderText: qsTr("AutoSuggestBox")
items: generateRandomNames(100) items: generateRandomNames(100)
disabled: text_box_suggest_switch.checked disabled: text_box_suggest_switch.checked
itemRows: 12
showSuggestWhenPressed: text_box_show_suggest_switch.checked
anchors{ anchors{
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
left: parent.left left: parent.left
} }
} }
FluToggleSwitch{ RowLayout{
id:text_box_suggest_switch
anchors{ anchors{
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
right: parent.right 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") text: qsTr("Disabled")
} }
} }
}
CodeExpander{ CodeExpander{
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: -6 Layout.topMargin: -6
code:'FluAutoSuggestBox{ code:'FluAutoSuggestBox{
placeholderText: qsTr("AutoSuggestBox") placeholderText: qsTr("AutoSuggestBox")
itemRows: 12
itemHeight: 38
showSuggestWhenPressed: false
}' }'
} }

29
src/Qt5/imports/FluentUI/Controls/FluAutoSuggestBox.qml
View File

@ -7,9 +7,12 @@ FluTextBox{
property var items:[] property var items:[]
property string emptyText: qsTr("No results found") property string emptyText: qsTr("No results found")
property int autoSuggestBoxReplacement: FluentIcons.Search property int autoSuggestBoxReplacement: FluentIcons.Search
property int itemHeight: 38
property int itemRows: 8
property bool showSuggestWhenPressed: false
property string textRole: "title" property string textRole: "title"
property var filter: function(item){ property var filter: function(item){
if(item.title.indexOf(control.text)!==-1){ if(item[textRole].indexOf(control.text)!==-1){
return true return true
} }
return false return false
@ -29,17 +32,11 @@ FluTextBox{
control.updateText(modelData[textRole]) control.updateText(modelData[textRole])
} }
function loadData(){ function loadData(){
var result = []
if(items==null){ if(items==null){
list_view.model = result list_view.model = []
return return
} }
items.map(function(item){ list_view.model = items.filter(item => control.filter(item))
if(control.filter(item)){
result.push(item)
}
})
list_view.model = result
} }
} }
onActiveFocusChanged: { onActiveFocusChanged: {
@ -69,7 +66,7 @@ FluTextBox{
ScrollBar.vertical: FluScrollBar {} ScrollBar.vertical: FluScrollBar {}
header: Item{ header: Item{
width: control.width width: control.width
height: visible ? 38 : 0 height: visible ? control.itemHeight : 0
visible: list_view.count === 0 visible: list_view.count === 0
FluText{ FluText{
text: emptyText text: emptyText
@ -82,7 +79,7 @@ FluTextBox{
} }
delegate:FluControl{ delegate:FluControl{
id: item_control id: item_control
height: 38 height: control.itemHeight
width: control.width width: control.width
onClicked: { onClicked: {
d.handleClick(modelData) d.handleClick(modelData)
@ -114,7 +111,7 @@ FluTextBox{
background:Rectangle{ background:Rectangle{
id: rect_background id: rect_background
implicitWidth: control.width implicitWidth: control.width
implicitHeight: 38*Math.min(Math.max(list_view.count,1),8) implicitHeight: control.itemHeight*Math.min(Math.max(list_view.count,1),control.itemRows)
radius: 5 radius: 5
color: FluTheme.dark ? Qt.rgba(43/255,43/255,43/255,1) : Qt.rgba(1,1,1,1) 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) border.color: FluTheme.dark ? Qt.rgba(26/255,26/255,26/255,1) : Qt.rgba(191/255,191/255,191/255,1)
@ -124,6 +121,14 @@ FluTextBox{
} }
} }
onTextChanged: { onTextChanged: {
control.showSuggest()
}
onPressed: {
if(control.showSuggestWhenPressed){
control.showSuggest()
}
}
function showSuggest(){
d.loadData() d.loadData()
if(d.flagVisible){ if(d.flagVisible){
var pos = control.mapToItem(null, 0, 0) var pos = control.mapToItem(null, 0, 0)

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

@ -5,19 +5,15 @@ import FluentUI 1.0
Rectangle{ Rectangle{
property bool isDot: false property bool isDot: false
property bool showZero: 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 id:control
color:Qt.rgba(255/255,77/255,79/255,1) color:Qt.rgba(255/255,77/255,79/255,1)
width: { width: {
if(isDot) if(isDot)
return 10 return 10
if(count<10){ return content_text.implicitWidth + 12
return 20
}else if(count<100){
return 30
}
return 40
} }
height: { height: {
if(isDot) if(isDot)
@ -31,49 +27,74 @@ Rectangle{
} }
border.width: 1 border.width: 1
border.color: Qt.rgba(1,1,1,1) border.color: Qt.rgba(1,1,1,1)
anchors{ anchors {
right: { left: {
if(parent && topRight) if(!parent){
return parent.right
return undefined return undefined
} }
return (position === "topLeft" || position === "bottomLeft") ? parent.left : undefined
}
right: {
if(!parent){
return undefined
}
return (position === "topRight" || position === "bottomRight") ? parent.right : undefined
}
top: { top: {
if(parent && topRight) if(!parent){
return parent.top
return undefined 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 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: { topMargin: {
if(parent && topRight){ if(!parent){
if(isDot){
return -2.5
}
return -10
}
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: { visible: {
if(showZero) if(typeof(count) === "number"){
return showZero ? true : count !== 0
}
return true return true
return count!==0
} }
FluText{ FluText{
id: content_text
anchors.centerIn: parent anchors.centerIn: parent
color: Qt.rgba(1,1,1,1) color: Qt.rgba(1,1,1,1)
visible: !isDot visible: !isDot
text:{ text:{
if(count<100) if(typeof(count) === "string"){
return count return count
return "100+" }else if(typeof(count) === "number"){
return count <= max ? count.toString() : "%1+".arg(max.toString())
}
return ""
} }
} }
} }

29
src/Qt6/imports/FluentUI/Controls/FluAutoSuggestBox.qml
View File

@ -6,9 +6,12 @@ FluTextBox{
property var items:[] property var items:[]
property string emptyText: qsTr("No results found") property string emptyText: qsTr("No results found")
property int autoSuggestBoxReplacement: FluentIcons.Search property int autoSuggestBoxReplacement: FluentIcons.Search
property int itemHeight: 38
property int itemRows: 8
property bool showSuggestWhenPressed: false
property string textRole: "title" property string textRole: "title"
property var filter: function(item){ property var filter: function(item){
if(item.title.indexOf(control.text)!==-1){ if(item[textRole].indexOf(control.text)!==-1){
return true return true
} }
return false return false
@ -28,17 +31,11 @@ FluTextBox{
control.updateText(modelData[textRole]) control.updateText(modelData[textRole])
} }
function loadData(){ function loadData(){
var result = []
if(items==null){ if(items==null){
list_view.model = result list_view.model = []
return return
} }
items.map(function(item){ list_view.model = items.filter(item => control.filter(item))
if(control.filter(item)){
result.push(item)
}
})
list_view.model = result
} }
} }
onActiveFocusChanged: { onActiveFocusChanged: {
@ -68,7 +65,7 @@ FluTextBox{
ScrollBar.vertical: FluScrollBar {} ScrollBar.vertical: FluScrollBar {}
header: Item{ header: Item{
width: control.width width: control.width
height: visible ? 38 : 0 height: visible ? control.itemHeight : 0
visible: list_view.count === 0 visible: list_view.count === 0
FluText{ FluText{
text: emptyText text: emptyText
@ -81,7 +78,7 @@ FluTextBox{
} }
delegate:FluControl{ delegate:FluControl{
id: item_control id: item_control
height: 38 height: control.itemHeight
width: control.width width: control.width
onClicked: { onClicked: {
d.handleClick(modelData) d.handleClick(modelData)
@ -113,7 +110,7 @@ FluTextBox{
background:Rectangle{ background:Rectangle{
id: rect_background id: rect_background
implicitWidth: control.width implicitWidth: control.width
implicitHeight: 38*Math.min(Math.max(list_view.count,1),8) implicitHeight: control.itemHeight*Math.min(Math.max(list_view.count,1),control.itemRows)
radius: 5 radius: 5
color: FluTheme.dark ? Qt.rgba(43/255,43/255,43/255,1) : Qt.rgba(1,1,1,1) 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) border.color: FluTheme.dark ? Qt.rgba(26/255,26/255,26/255,1) : Qt.rgba(191/255,191/255,191/255,1)
@ -123,6 +120,14 @@ FluTextBox{
} }
} }
onTextChanged: { onTextChanged: {
control.showSuggest()
}
onPressed: {
if(control.showSuggestWhenPressed){
control.showSuggest()
}
}
function showSuggest(){
d.loadData() d.loadData()
if(d.flagVisible){ if(d.flagVisible){
var pos = control.mapToItem(null, 0, 0) var pos = control.mapToItem(null, 0, 0)

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

@ -5,19 +5,15 @@ import FluentUI
Rectangle{ Rectangle{
property bool isDot: false property bool isDot: false
property bool showZero: 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 id:control
color:Qt.rgba(255/255,77/255,79/255,1) color:Qt.rgba(255/255,77/255,79/255,1)
width: { width: {
if(isDot) if(isDot)
return 10 return 10
if(count<10){ return content_text.implicitWidth + 12
return 20
}else if(count<100){
return 30
}
return 40
} }
height: { height: {
if(isDot) if(isDot)
@ -31,49 +27,74 @@ Rectangle{
} }
border.width: 1 border.width: 1
border.color: Qt.rgba(1,1,1,1) border.color: Qt.rgba(1,1,1,1)
anchors{ anchors {
right: { left: {
if(parent && topRight) if(!parent){
return parent.right
return undefined return undefined
} }
return (position === "topLeft" || position === "bottomLeft") ? parent.left : undefined
}
right: {
if(!parent){
return undefined
}
return (position === "topRight" || position === "bottomRight") ? parent.right : undefined
}
top: { top: {
if(parent && topRight) if(!parent){
return parent.top
return undefined 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 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: { topMargin: {
if(parent && topRight){ if(!parent){
if(isDot){
return -2.5
}
return -10
}
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: { visible: {
if(showZero) if(typeof(count) === "number"){
return showZero ? true : count !== 0
}
return true return true
return count!==0
} }
FluText{ FluText{
id: content_text
anchors.centerIn: parent anchors.centerIn: parent
color: Qt.rgba(1,1,1,1) color: Qt.rgba(1,1,1,1)
visible: !isDot visible: !isDot
text:{ text:{
if(count<100) if(typeof(count) === "string"){
return count return count
return "100+" }else if(typeof(count) === "number"){
return count <= max ? count.toString() : "%1+".arg(max.toString())
}
return ""
} }
} }
} }