InputPanel QML Type

Provides the virtual keyboard UI. 更多...

import 语句: import QtQuick.VirtualKeyboard 2.15
继承:

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 .

就像 all other QML types provided by the module, the QT_IM_MODULE 环境变量必须被设为 qtvirtualkeyboard before using InputPanel. For more information, see 加载插件 .

注意: You can have only one InputPanel instance in your application.

InputPanel and modal dialogs

Qt prevents modal popups from blocking the keyboard UI, as this would make it impossible to use the keyboard to write into a text field within a modal popup. When an input field receives focus during a modal session, the InputPanel item is made a sibling of the Overlay, and given a z-value one above the Overlay's so that it stays on top of the user interface. When the modal session ends, the item is reparented back to the original parent, and the z-value is restored.

特性文档编制

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 .

该特性在 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.

The localeList parameter contains a list of locale names to choose from. To get more information about a particular language, use the Qt.locale() 函数。 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.

注意: 相应处理程序是 onExternalLanguageSwitch .

This signal was introduced in QtQuick.VirtualKeyboard 2.4.