From 5de9588b93e80813360b04e6bd02d4ef65627306 Mon Sep 17 00:00:00 2001 From: Polaris-Night <158275221@qq.com> Date: Wed, 7 May 2025 23:15:32 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20FluAutoSuggestBox=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E5=BB=BA=E8=AE=AE=E8=A1=8C=E6=95=B0=E5=92=8C?= =?UTF-8?q?=E8=A1=8C=E9=AB=98=E4=BB=A5=E5=8F=8Apressed=E6=97=B6=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E5=BB=BA=E8=AE=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/example_en_US.ts | 9 ++++-- example/example_zh_CN.ts | 9 ++++-- example/qml/page/T_TextBox.qml | 17 +++++++++-- .../FluentUI/Controls/FluAutoSuggestBox.qml | 29 +++++++++++-------- .../FluentUI/Controls/FluAutoSuggestBox.qml | 29 +++++++++++-------- 5 files changed, 62 insertions(+), 31 deletions(-) diff --git a/example/example_en_US.ts b/example/example_en_US.ts index 390f78c6..802e0585 100644 --- a/example/example_en_US.ts +++ b/example/example_en_US.ts @@ -2487,8 +2487,8 @@ Some contents... - - + + Disabled @@ -2507,6 +2507,11 @@ Some contents... AutoSuggestBox + + + Show suggest when pressed + + T_Theme diff --git a/example/example_zh_CN.ts b/example/example_zh_CN.ts index 6796d1c0..00981b6d 100644 --- a/example/example_zh_CN.ts +++ b/example/example_zh_CN.ts @@ -2676,8 +2676,8 @@ Some contents... - - + + Disabled 禁用 @@ -2696,6 +2696,11 @@ Some contents... AutoSuggestBox 自动建议框 + + + Show suggest when pressed + 按下时显示建议 + T_Theme diff --git a/example/qml/page/T_TextBox.qml b/example/qml/page/T_TextBox.qml index 357720d2..ab722ba5 100644 --- a/example/qml/page/T_TextBox.qml +++ b/example/qml/page/T_TextBox.qml @@ -114,18 +114,26 @@ FluScrollablePage{ placeholderText: qsTr("AutoSuggestBox") items: generateRandomNames(100) disabled: text_box_suggest_switch.checked + itemRows: 12 + showSuggestWhenPressed: text_box_show_suggest_switch.checked anchors{ verticalCenter: parent.verticalCenter left: parent.left } } - FluToggleSwitch{ - id:text_box_suggest_switch + RowLayout{ anchors{ verticalCenter: parent.verticalCenter right: parent.right } - text: qsTr("Disabled") + FluToggleSwitch{ + id:text_box_show_suggest_switch + text: qsTr("Show suggest when pressed") + } + FluToggleSwitch{ + id:text_box_suggest_switch + text: qsTr("Disabled") + } } } CodeExpander{ @@ -133,6 +141,9 @@ FluScrollablePage{ Layout.topMargin: -6 code:'FluAutoSuggestBox{ placeholderText: qsTr("AutoSuggestBox") + itemRows: 12 + itemHeight: 38 + showSuggestWhenPressed: false }' } diff --git a/src/Qt5/imports/FluentUI/Controls/FluAutoSuggestBox.qml b/src/Qt5/imports/FluentUI/Controls/FluAutoSuggestBox.qml index 4cf102ed..9f28175c 100644 --- a/src/Qt5/imports/FluentUI/Controls/FluAutoSuggestBox.qml +++ b/src/Qt5/imports/FluentUI/Controls/FluAutoSuggestBox.qml @@ -7,9 +7,12 @@ FluTextBox{ property var items:[] property string emptyText: qsTr("No results found") property int autoSuggestBoxReplacement: FluentIcons.Search + property int itemHeight: 38 + property int itemRows: 8 + property bool showSuggestWhenPressed: false property string textRole: "title" property var filter: function(item){ - if(item.title.indexOf(control.text)!==-1){ + if(item[textRole].indexOf(control.text)!==-1){ return true } return false @@ -29,17 +32,11 @@ FluTextBox{ control.updateText(modelData[textRole]) } function loadData(){ - var result = [] if(items==null){ - list_view.model = result + list_view.model = [] return } - items.map(function(item){ - if(control.filter(item)){ - result.push(item) - } - }) - list_view.model = result + list_view.model = items.filter(item => control.filter(item)) } } onActiveFocusChanged: { @@ -69,7 +66,7 @@ FluTextBox{ ScrollBar.vertical: FluScrollBar {} header: Item{ width: control.width - height: visible ? 38 : 0 + height: visible ? control.itemHeight : 0 visible: list_view.count === 0 FluText{ text: emptyText @@ -82,7 +79,7 @@ FluTextBox{ } delegate:FluControl{ id: item_control - height: 38 + height: control.itemHeight width: control.width onClicked: { d.handleClick(modelData) @@ -114,7 +111,7 @@ FluTextBox{ background:Rectangle{ id: rect_background 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 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) @@ -124,6 +121,14 @@ FluTextBox{ } } onTextChanged: { + control.showSuggest() + } + onPressed: { + if(control.showSuggestWhenPressed){ + control.showSuggest() + } + } + function showSuggest(){ d.loadData() if(d.flagVisible){ var pos = control.mapToItem(null, 0, 0) diff --git a/src/Qt6/imports/FluentUI/Controls/FluAutoSuggestBox.qml b/src/Qt6/imports/FluentUI/Controls/FluAutoSuggestBox.qml index 18119013..93697196 100644 --- a/src/Qt6/imports/FluentUI/Controls/FluAutoSuggestBox.qml +++ b/src/Qt6/imports/FluentUI/Controls/FluAutoSuggestBox.qml @@ -6,9 +6,12 @@ FluTextBox{ property var items:[] property string emptyText: qsTr("No results found") property int autoSuggestBoxReplacement: FluentIcons.Search + property int itemHeight: 38 + property int itemRows: 8 + property bool showSuggestWhenPressed: false property string textRole: "title" property var filter: function(item){ - if(item.title.indexOf(control.text)!==-1){ + if(item[textRole].indexOf(control.text)!==-1){ return true } return false @@ -28,17 +31,11 @@ FluTextBox{ control.updateText(modelData[textRole]) } function loadData(){ - var result = [] if(items==null){ - list_view.model = result + list_view.model = [] return } - items.map(function(item){ - if(control.filter(item)){ - result.push(item) - } - }) - list_view.model = result + list_view.model = items.filter(item => control.filter(item)) } } onActiveFocusChanged: { @@ -68,7 +65,7 @@ FluTextBox{ ScrollBar.vertical: FluScrollBar {} header: Item{ width: control.width - height: visible ? 38 : 0 + height: visible ? control.itemHeight : 0 visible: list_view.count === 0 FluText{ text: emptyText @@ -81,7 +78,7 @@ FluTextBox{ } delegate:FluControl{ id: item_control - height: 38 + height: control.itemHeight width: control.width onClicked: { d.handleClick(modelData) @@ -113,7 +110,7 @@ FluTextBox{ background:Rectangle{ id: rect_background 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 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) @@ -123,6 +120,14 @@ FluTextBox{ } } onTextChanged: { + control.showSuggest() + } + onPressed: { + if(control.showSuggestWhenPressed){ + control.showSuggest() + } + } + function showSuggest(){ d.loadData() if(d.flagVisible){ var pos = control.mapToItem(null, 0, 0) 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 2/2] =?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 "" } } }