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)