12

我有一个像这样的 QML textInput 元素：

文本框.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++ 插槽）返回字典列表

我怎么能做这项工作？

4

2 回答 2

20

看看这段代码：https ://github.com/jturcotte/liquid/blob/master/qml/content/SuggestionBox.qml

我敢打赌它会完成这项工作。

编辑：

上面链接的代码有些复杂，需要 C++ 后端，所以我对其进行了简化并制作了纯 Qml 示例应用程序，您可以使用它，稍微编辑一下并应用到您的需要。来源可以在这里找到。最重要的事情有：

  1. 这个 SuggestionBox的实现使用某种模型作为完成/建议某事的来源
  2. 每次用户点击 item 时都会发出它的信号itemSelected(item)
  3. 将 LineEdit 组件绑定到 SuggestionBox的应用程序的主要组件

请注意，代码非常粗糙，只是为了示例而编写的。

于 2013-04-11T22:07:01.810 回答
3

我一直在寻找非常相似的东西：一个围绕QML TextField构建的 QML 自动完成组件，而不是问题中的较低级别、更灵活但工作量更大的 TextInput 。

由于我找不到，我实现了它。如果有人想使用它：它已获得 MIT 许可，可作为我正在开发的应用程序的一部分使用。您在 中找到该组件src/qml/AutoComplete.qml，该应用程序可以作为使用示例。特征：

  • 以粗体突出显示自动完成的字符，如在 Google 搜索中
  • 键绑定（使用箭头键导航、Return / Enter、Esc 关闭完成框、Esc Esc 取消焦点）
  • 现在使用一个简单QStringList的模型，应用程序展示了如何在按下下一个键时使用实时 SQL 数据库查询更新模型
  • 有大量文档的代码，所以应该很容易适应

自动完成组件截图

让我知道这是否有用，然后我可能会将其打包为 Qt QPM 包，甚至尝试使其足够成熟以添加到 QML UI 库KDE Kirigami中。

于 2020-07-16T21:04:42.430 回答