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_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/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/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/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)
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 ""
}
}
}