Автозаполнение и предложения в элементе textInput QML

У меня есть элемент textInput QML, как это:

TextBox.qml

FocusScope {
id: focusScope
property int fontSize: focusScope.height -30
property int textBoxWidth: parent.width * 0.8
property int textBoxHeight: 45
property string placeHolder: 'Type something...'
property bool isUserInTheMiddleOfEntringText: false
width: textBoxWidth
height: textBoxHeight

Rectangle {
width: parent.width
height: parent.height
border.color:'blue'
border.width: 3
radius: 0
MouseArea {
anchors.fill: parent
onClicked: {
focusScope.focus = true
textInput.openSoftwareInputPanel()
}
}
}
Text {
id: typeSomething
anchors.fill: parent; anchors.rightMargin: 8
verticalAlignment: Text.AlignVCenter
text: placeHolder
color: 'red'
font.italic: true
font.pointSize: fontSize
MouseArea {
anchors.fill: parent
onClicked: {
focusScope.focus = true
textInput.openSoftwareInputPanel()
}
}

}

MouseArea {
anchors.fill: parent
onClicked: {
focusScope.focus = true
textInput.openSoftwareInputPanel()
}
}

TextInput {
id: textInput
anchors {
right: parent.right
rightMargin: 8
left: clear.right
leftMargin: 8
verticalCenter: parent.verticalCenter
}
focus: true
selectByMouse: true
font.pointSize: fontSize
}Text {
id: clear
text: '\u2717'
color: 'yellow'
font.pointSize: 25
opacity: 0
visible: readOnlyTextBox ? false : true
anchors {
left: parent.left
leftMargin: 8
verticalCenter: parent.verticalCenter
}
MouseArea {
anchors.fill: parent
onClicked: {
textInput.text = ''
focusScope.focus = true;
textInput.openSoftwareInputPanel()
}
}
}

states: State {
name: 'hasText'; when: textInput.text != ''
PropertyChanges {
target: typeSomething
opacity: 0
}
PropertyChanges {
target: clear
opacity: 0.5
}
}

transitions: [
Transition {
from: ''; to: 'hasText'
NumberAnimation {
exclude: typeSomething
properties: 'opacity'
}
},
Transition {
from: 'hasText'; to: ''
NumberAnimation {
properties: 'opacity'
}
}
]
}

Я хочу добавить автозаполнение и предложения, такие как поиск Google, в это текстовое поле. Автозаполнение получения данных из базы данных и базы данных возвращает список словарей по слоту Pyside. (Или слот C ++)

Как я могу сделать эту работу?

5

Решение

Посмотрите на этот код: https://github.com/jturcotte/liquid/blob/master/qml/content/SuggestionBox.qml

Могу поспорить, что это сделает работу.

Редактировать:

Приведенный выше код несколько сложен и требует бэкэнда C ++, поэтому я упростил его и сделал пример приложения на чистом Qml, с которым вы можете поиграть, немного отредактировать и применить к вашим потребностям. Источники можно найти Вот. Самые важные вещи:

  1. Эта реализация OffertionBox который использует какой-то модель поскольку это источник для завершения / предложения чего-то
  2. Его сигнал itemSelected (пункт) будет выдаваться каждый раз, когда пользователь нажимает на элемент
  3. Основной компонент приложения тот связывает свой компонент LineEdit с SuggestionBox

Обратите внимание, что код довольно грубый и написан для примера.

15

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]