我有一个像这样的QML textInput元素:
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'
}
}
]
}
我想将自动填充功能和谷歌搜索等建议添加到此文本框中。自动填充从数据库和数据库获取数据通过pyside SLOT返回一个字典列表。(或c ++插槽)
我如何做这项工作?
答案 0 :(得分:15)
看一下这段代码:https://github.com/jturcotte/liquid/blob/master/qml/content/SuggestionBox.qml
我打赌它会完成这项工作。
修改强>
上面链接的代码有点复杂,需要C ++后端,所以我简化了它并制作了纯Qml示例应用程序,您可以使用,编辑一点并应用于您的需求。可以找到来源here。最重要的是:
请注意,代码非常粗糙并且为了示例而编写。
答案 1 :(得分:1)
我一直在寻找类似的东西:一个围绕QML TextField构建的QML自动完成组件,而不是像问题中那样的低级,更灵活但又需要更多工作的TextInput。
由于找不到,我实现了它。如果有人想使用它:它是由MIT许可的,可以作为我正在开发的an application的一部分使用。您可以在src/qml/AutoComplete.qml
中找到该组件,该应用程序可以用作用法示例。功能:
QStringList
作为模型,该应用程序显示了如何在按下下一个键时使用实时SQL数据库查询更新模型
让我知道它是否有用,然后我可以将其打包为Qt QPM package,甚至尝试使其成熟到足以添加到QML UI库KDE Kirigami中。