输入面板 QML 类型

提供虚拟键盘 UI。 更多信息...

导入语句import QtQuick.VirtualKeyboard
继承

Item

属性

信号

详细描述

键盘大小自动从可用宽度计算;也就是说,键盘保持由当前样式指定的宽高比。因此,应用程序只需设置输入面板的宽度(width)和 y 坐标,而不是高度(height)。

与其他由模块提供的所有其他 QML 类型一样,在使用 InputPanel 之前必须设置环境变量 QT_IM_MODULEqtvirtualkeyboard。有关更多信息,请参阅加载插件

注意:您的应用程序中只能有一个 InputPanel 实例。面板不会被模态对话框阻塞,但它可能会被具有更高 z 值的项目遮挡。

属性说明

active : bool [since QtQuick.VirtualKeyboard 2.0]

此属性反映输入面板的激活状态。当此属性为 true 时,应将键盘显示给用户。

此属性是在 QtQuick.VirtualKeyboard 2.0 中引入的。


externalLanguageSwitchEnabled : bool [since QtQuick.VirtualKeyboard 2.4]

此属性启用外部语言切换机制。当此属性为 true 时,虚拟键盘不会显示内置语言弹出窗口,而会发送 externalLanguageSwitch 信号。应用程序可以处理此信号并显示自定义语言选择对话框。

此属性是在 QtQuick.VirtualKeyboard 2.4 中引入的。


信号说明

[自 QtQuick.VirtualKeyboard 2.4 开始] externalLanguageSwitch(var localeList, int currentIndex)

externalLanguageSwitchEnabledtrue 且用户按下 语言切换键 时,此信号会被发出。

它作为一个钩子来显示自定义语言对话框,而不是虚拟键盘中的内置语言弹出菜单。

localeList 参数包含一个选择语言的环境名称列表。要获取有关特定语言的更多信息,请使用 Qt.locale() 函数。《i translate="no">currentIndex 是在 localeList 中当前环境的索引。该项目应在 UI 中突出显示为当前项。

要选择新语言,请使用 VirtualKeyboardSettings.locale 属性。

以下是一个演示自定义语言对话框实现的示例

Dialog {
    id: languageDialog
    title: "Select Input Language"
    modality: Qt.ApplicationModal

    function show(localeList, currentIndex) {
        languageListModel.clear()
        for (var i = 0; i < localeList.length; i++) {
            languageListModel.append({localeName: localeList[i], displayName: Qt.locale(localeList[i]).nativeLanguageName})
        }
        languageListView.currentIndex = currentIndex
        languageListView.positionViewAtIndex(currentIndex, ListView.Center)
        languageDialog.visible = true
    }

    contentItem: ListView {
        id: languageListView
        model: ListModel {
            id: languageListModel
            function selectItem(index) {
                VirtualKeyboardSettings.locale = languageListModel.get(index).localeName
                languageDialog.visible = false
            }
        }
        delegate: Item {
            id: languageListItem
            width: languageNameTextMetrics.width * 17
            height: languageNameTextMetrics.height + languageListLabel.anchors.topMargin + languageListLabel.anchors.bottomMargin
            Text {
                id: languageListLabel
                anchors.left: parent.left
                anchors.top: parent.top
                anchors.leftMargin: languageNameTextMetrics.height / 2
                anchors.rightMargin: anchors.leftMargin
                anchors.topMargin: languageNameTextMetrics.height / 3
                anchors.bottomMargin: anchors.topMargin
                text: languageNameFormatter.elidedText
                color: "#5CAA15"
                font {
                    weight: Font.Normal
                    pixelSize: 28
                }
            }
            TextMetrics {
                id: languageNameTextMetrics
                font {
                    weight: Font.Normal
                    pixelSize: 28
                }
                text: "X"
            }
            TextMetrics {
                id: languageNameFormatter
                font {
                    weight: Font.Normal
                    pixelSize: 28
                }
                elide: Text.ElideRight
                elideWidth: languageListItem.width - languageListLabel.anchors.leftMargin - languageListLabel.anchors.rightMargin
                text: displayName
            }
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onClicked: {
                    if (index === -1)
                        return
                    parent.ListView.view.currentIndex = index
                    parent.ListView.view.model.selectItem(index)
                }
            }
            states: State {
                name: "current"
                when: languageListItem.ListView.isCurrentItem
                PropertyChanges {
                    target: languageListLabel
                    color: "black"
                }
            }
        }
    }
}

然后将对话框声明

LanguageDialog {
    id: languageDialog
    width: 400
    height: 400
}

在应用程序的 InputPanel 中,添加以下代码

InputPanel {
    id: inputPanel
    externalLanguageSwitchEnabled: true
    onExternalLanguageSwitch: languageDialog.show(localeList, currentIndex)
    // ...
}

当按下语言切换键时,将显示自定义对话框。

注意:相应的处理程序为 onExternalLanguageSwitch

此信号引入自 QtQuick.VirtualKeyboard 2.4。


© 2024 Qt 公司有限公司。此处包含的文档贡献是相应所有者的版权。此处提供的文档是根据自由软件基金会发布的 GNU 自由文档许可证版本 1.3 的条款许可的。Qt 和相应标志是芬兰的 Qt 公司及其在全球范围内的分公司和附属公司的 商标。所有其他商标均为其各自所有者的财产。