Clavier virtuel dans Qt Quick

L'exemple propose deux implémentations : l'une pour les plateformes de bureau et l'autre pour les plateformes embarquées. La première version permet la saisie de texte dans plusieurs champs à l'aide du clavier virtuel, tandis que la seconde utilise la même interface utilisateur, mais avec un clavier virtuel personnalisé InputPanel. Les extraits de code suivants montrent comment configurer le projet pour choisir 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();
}

De plus, il utilise des éléments personnalisés TextField et TextArea pour configurer le comportement de la touche [ENTER] à l’aide de la propriété associé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 dans l'extrait de code peuvent définir ces propriétés pour modifier le comportement par défaut.

Exécution de l'exemple

Vous pouvez exécuter l’exemple à partir de :

• Qt Creator

  Ouvrez le mode « Welcome » et sélectionnez l’exemple à l’adresse Examples. Pour plus d’informations, consultez Qt Creator: Tutoriel : Compiler et exécuter.

• Qt Extension for Visual Studio Code

  Exécutez la commande « Qt: Open Qt examples » à partir de Command Palette, puis sélectionnez l’exemple dans la liste. Pour plus d’informations, consultez Qt Extension for Visual Studio Code: Tutoriel : Compiler et exécuter.

Exemple de projet sur code.qt.io