mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2025-05-11 23:51:09 +08:00
feat: FluAutoSuggestBox支持设置建议行数和行高以及pressed时显示建议
This commit is contained in:
Polaris-Night
parent
6b9f7a1c99
commit
5de9588b93
@ -2487,8 +2487,8 @@ Some contents...</source>
|
||||
<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="97"/>
|
||||
<location filename="qml/page/T_TextBox.qml" line="128"/>
|
||||
<location filename="qml/page/T_TextBox.qml" line="157"/>
|
||||
<location filename="qml/page/T_TextBox.qml" line="135"/>
|
||||
<location filename="qml/page/T_TextBox.qml" line="168"/>
|
||||
<source>Disabled</source>
|
||||
<translation type="unfinished"></translation>
|
||||
</message>
|
||||
@ -2507,6 +2507,11 @@ Some contents...</source>
|
||||
<source>AutoSuggestBox</source>
|
||||
<translation type="unfinished"></translation>
|
||||
</message>
|
||||
<message>
|
||||
<location filename="qml/page/T_TextBox.qml" line="131"/>
|
||||
<source>Show suggest when pressed</source>
|
||||
<translation type="unfinished"></translation>
|
||||
</message>
|
||||
</context>
|
||||
<context>
|
||||
<name>T_Theme</name>
|
||||
|
||||
@ -2676,8 +2676,8 @@ Some contents...</source>
|
||||
<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="97"/>
|
||||
<location filename="qml/page/T_TextBox.qml" line="128"/>
|
||||
<location filename="qml/page/T_TextBox.qml" line="157"/>
|
||||
<location filename="qml/page/T_TextBox.qml" line="135"/>
|
||||
<location filename="qml/page/T_TextBox.qml" line="168"/>
|
||||
<source>Disabled</source>
|
||||
<translation type="unfinished">禁用</translation>
|
||||
</message>
|
||||
@ -2696,6 +2696,11 @@ Some contents...</source>
|
||||
<source>AutoSuggestBox</source>
|
||||
<translation type="unfinished">自动建议框</translation>
|
||||
</message>
|
||||
<message>
|
||||
<location filename="qml/page/T_TextBox.qml" line="131"/>
|
||||
<source>Show suggest when pressed</source>
|
||||
<translation>按下时显示建议</translation>
|
||||
</message>
|
||||
</context>
|
||||
<context>
|
||||
<name>T_Theme</name>
|
||||
|
||||
@ -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
|
||||
}'
|
||||
}
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user