Teclado virtual en Qt Quick

El ejemplo tiene dos implementaciones: una para plataformas de escritorio y otra para plataformas embebidas. La primera versión permite introducir texto en varios campos de texto utilizando el teclado virtual, mientras que la segunda versión utiliza la misma interfaz de usuario pero con un teclado virtual personalizado InputPanel. Los siguientes fragmentos muestran cómo configurar el proyecto para que elija la implementación adecuada en función de las opciones de CONFIG:

• En qmake (basic.pro):

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

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

El ejemplo habilita el teclado virtual estableciendo la variable de entorno QT_IM_MODULE antes de cargar el archivo .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();
}

Además de esto, utiliza elementos personalizados TextField y TextArea para configurar el comportamiento de la tecla [ENTER] utilizando la propiedad adjunta 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)
                }
}

Los controles TextField y TextArea extienden los respectivos tipos Qt Quick Controls 2 con las propiedades enterKeyEnabled y enterKeyAction. Las instancias TextField y TextArea en el snippet pueden establecer estas propiedades para cambiar el comportamiento por defecto.

Ejecución del ejemplo

Para ejecutar el ejemplo desde Qt Creator, abra el modo Welcome y seleccione el ejemplo de Examples. Para obtener más información, consulte Qt Creator: Tutorial: Construir y ejecutar.

Proyecto de ejemplo @ code.qt.io