InputPanel QML Type

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.

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.

This signal is emitted when externalLanguageSwitchEnabled is true and the 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() 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 property.

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.