Clavier virtuel dans Qt Quick

L'exemple comporte deux implémentations : l'une pour les plates-formes de bureau et l'autre pour les plates-formes embarquées. La première version permet de saisir du texte dans plusieurs champs de texte à l'aide du clavier virtuel, tandis que la seconde utilise la même interface utilisateur, mais avec un clavier virtuel personnalisé InputPanel. Les extraits suivants montrent comment configurer le projet pour qu'il choisisse l'implémentation appropriée en fonction des options CONFIG :

• Dans qmake (basic.pro) :

  !qtConfig(vkb-desktop) {
      DEFINES += MAIN_QML=\\\"basic-b2qt.qml\\\"
  } else {
      DEFINES += MAIN_QML=\\\"Basic.qml\\\"
  }

• Dans CMake (CMakeLists.txt) :

  if(NOT QT_FEATURE_vkb_desktop)
      target_compile_definitions(basic PUBLIC
          MAIN_QML="basic-b2qt.qml"
      )
  endif()
      ...
  if(QT_FEATURE_vkb_desktop)
      target_compile_definitions(basic PUBLIC
          MAIN_QML="Basic.qml"
      )
  endif()

L'exemple active le clavier virtuel en définissant la variable d'environnement QT_IM_MODULE avant de charger le fichier .qml:

#include <QQuickView>
#include <QGuiApplication>
#include <QQmlEngine>

int main(int argc, char *argv[])
{
    qputenv("QT_IM_MODULE", QByteArray("qtvirtualkeyboard"));

    QGuiApplication app(argc, argv);
    QQuickView view(QString("qrc:/%2").arg(MAIN_QML));
    if (view.status() == QQuickView::Error)
        return -1;
    view.setResizeMode(QQuickView::SizeRootObjectToView);

    view.show();

    return app.exec();
}

En outre, il utilise les éléments personnalisés TextField et TextArea pour configurer le comportement de la touche [ENTER] à l'aide de la propriété attachée EnterKeyAction.

import QtQuick
import QtQuick.Controls
import QtQuick.VirtualKeyboard
import "content"

Rectangle {
    ...
                TextField {
                    width: parent.width
                    placeholderText: "One line field"
                    enterKeyAction: EnterKeyAction.Next
                    onAccepted: passwordField.focus = true
                }
    ...
                TextArea {
                    id: textArea
                    width: parent.width
                    placeholderText: "Multiple line field"
                    height: Math.max(206, implicitHeight)
                }
}

Les contrôles TextField et TextArea étendent les types Qt Quick Controls 2 respectifs avec les propriétés enterKeyEnabled et enterKeyAction. Les instances TextField et TextArea de l'extrait peuvent définir ces propriétés pour modifier le comportement par défaut.

Exécution de l'exemple

Pour exécuter l'exemple à partir de Qt Creatorouvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutoriel : Construire et exécuter.

Exemple de projet @ code.qt.io