InputPanel QML Type

Provides the virtual keyboard UI. 更多...

导入语句: import QtQuick.VirtualKeyboard 2.4
继承:

Item

特性

信号

详细描述

The keyboard size is automatically calculated from the available width; that is, the keyboard maintains the aspect ratio specified by the current style. Therefore the application should only set the width and y coordinates of the InputPanel , and not the height .

As with all other QML types provided by the module, the QT_IM_MODULE 环境变量必须被设为 qtvirtualkeyboard before using InputPanel 。更多信息,见 加载插件 .

特性文档编制

active : bool

This property reflects the active status of the input panel. The keyboard should be made visible to the user when this property is true .

This property was introduced in QtQuick.VirtualKeyboard 2.0.


externalLanguageSwitchEnabled : bool

This property enables the external language switch mechanism. When this property is true , the virtual keyboard will not show the built-in language popup, but will emit the externalLanguageSwitch signal instead. The application can handle this signal and show a custom language selection dialog instead.

This property was introduced in QtQuick.VirtualKeyboard 2.4.


信号文档编制

externalLanguageSwitch ( var = localeList, int = currentIndex)

此信号被发射当 externalLanguageSwitchEnabled is true language switch key is pressed by the user.

It serves as a hook to display a custom language dialog instead of the built-in language popup in the virtual keyboard.

localeList parameter contains a list of locale names to choose from. To get more information about a particular language, use the Qt.locale() function. The currentIndex is the index of current locale in the localeList . This item should be highlighted as the current item in the UI.

To select a new language, use the VirtualKeyboardSettings.locale 特性。

Below is an example that demonstrates a custom language dialog implementation:

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"
                }
            }
        }
    }
}
					

The dialog would then be declared:

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

In the application's InputPanel , add the following code:

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

The custom dialog will now be shown when the language switch key is pressed.

This signal was introduced in QtQuick.VirtualKeyboard 2.4.