Virtuelle Tastatur in Qt Quick

Das Beispiel verfügt über zwei Implementierungen: eine für Desktop-Plattformen und eine für Embedded-Plattformen. Die erstgenannte Version ermöglicht die Texteingabe in mehrere Textfelder mithilfe der virtuellen Tastatur, während die zweitgenannte Version dieselbe Benutzeroberfläche verwendet, jedoch mit einer benutzerdefinierten virtuellen Tastatur von InputPanel. Die folgenden Codeausschnitte zeigen, wie das Projekt eingerichtet wird, um anhand der CONFIG-Optionen die passende Implementierung auszuwählen:

• In qmake (basic.pro):

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

• In 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()

Das Beispiel aktiviert die virtuelle Tastatur, indem die Umgebungsvariable ` QT_IM_MODULE ` vor dem Laden der Datei ` .qml ` gesetzt wird:

#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();
}

Darüber hinaus werden benutzerdefinierte Elemente „ TextField “ und „ TextArea “ verwendet, um das Verhalten der [ENTER] -Taste mithilfe der angehängten Eigenschaft „ EnterKeyAction “ zu konfigurieren.

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

Die Steuerelemente „ TextField “ und „ TextArea “ erweitern die jeweiligen „Qt Quick Controls 2 “-Typen um die Eigenschaften „ enterKeyEnabled “ und „ enterKeyAction “. Die Instanzen „ TextField “ und „ TextArea “ im Codeausschnitt können diese Eigenschaften festlegen, um das Standardverhalten zu ändern.

Ausführen des Beispiels

Sie können das Beispiel wie folgt ausführen:

• Qt Creator

  Öffnen Sie den Modus „ Welcome “ und wählen Sie das Beispiel unter „ Examples “ aus. Weitere Informationen finden Sie unter Qt Creator: Tutorial: Erstellen und Ausführen.

• Qt Extension for Visual Studio Code

  Führen Sie den Befehl „ Qt: Open Qt examples “ über Command Palette aus und wählen Sie das Beispiel aus der Liste aus. Weitere Informationen finden Sie unter Qt Extension for Visual Studio Code: Tutorial: Erstellen und Ausführen.

Beispielprojekt @ code.qt.io