상세 컨텐츠

본문 제목

[C++ QT QML] QML 가상 키보드 사용하기 virtual keyboard 리눅스 키보드

QT|QML

by donggyu1998 2021. 6. 29. 11:58

본문

반응형

💡 실행 사진

 

 

Qt5에서 제공하는 가상키보드(Qt Virtual Keyboard)를 사용하는 방법에 대해서 설명한다.

다만 Qt Wayland환경에서 사용하는 방법은 설명하지 않으므로 자세한 내용은 다음글을 참고하면 된다.  https://doc.qt.io/qt-5/qtvirtualkeyboard-deployment-guide.html

 

가상키보드가 화면에 보여지기 위한 벙법에는 두가지가 있다.

 

데스크탑(Windows 또는 Linux/X11 환경) : 이 경우 응용프로그램을 수정 할 필요가 없이 키보드는 자체적인 최상위 창으로 보여지게된다.

임베디드 장치(특히 eglfs 같은 환경) : 이 경우 응용프로그램의 QML에 InputPanel 을 배치함으로써 화면에 보여진다. 멀티 윈도우를 지원하지 않는 (윈도우 시스템이 없는)환경에서는 필수이고 데스크탑 환경에서는 선택적으로 사용할 수 있다.

 

사용 방법은 플러그인 프로젝트 파일에서 자동으로 선택된다. (컴파일 시점)

 

두 가지 방법 모두에서 응용 프로그램은 QT_IM_MODULE 환경 변수를 설정하여 플러그인을로드해야한다.

응용프로그램의 main함수에서 설정하거나 셸에서 환경변수를 설정한다.

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

    ...
}
$ QT_IM_MODULE=qtvirtualkeyboard myapp

 

데스크탑의 경우 더 이상 할게 없지만 아닌 경우는 응용프로그램의 QML에서 InputPanel을 사용하여 인스턴스화해야 한다.

 

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.VirtualKeyboard 2.1

Window {
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    TextField{
        width: 250
        height: 70
        anchors.top: parent.top
        anchors.topMargin: 30
        anchors.horizontalCenter: parent.horizontalCenter
    }

    InputPanel {
        id: inputPanel
        z: 99
        x: 0
        y: window.height
        width: window.width

        states: State {
            name: "visible"
            when: inputPanel.active
            PropertyChanges {
                target: inputPanel
                y: window.height - inputPanel.height
            }
        }
        transitions: Transition {
            from: ""
            to: "visible"
            reversible: true
            ParallelAnimation {
                NumberAnimation {
                    properties: "y"
                    duration: 250
                    easing.type: Easing.InOutQuad
                }
            }
        }
    }
}

 

반응형

관련글 더보기