qml 튜토리얼
qml 시작하기

비고

버전

설치

QML에는 새로운 버전의 크로스 플랫폼 애플리케이션 프레임 워크 Qt 가 함께 제공됩니다. 다운로드 섹션 에서 Qt의 최신 버전을 찾을 수 있습니다.

Qt Creator IDE 에서 새로운 QML 프로젝트를 생성하려면 "File -> New ..."를 선택하고 "Applications"에서 "Qt Quick-Application"을 선택하십시오. "선택"을 클릭하면 이제이 프로젝트의 경로를 지정하고 설정할 수 있습니다. "다음"을 치면 사용할 구성 요소를 선택할 수 있습니다. 확실하지 않은 경우 기본값을 그대로두고 "다음"을 클릭하십시오. 두 가지 다음 단계를 통해 원하는 경우 키트 및 소스 제어를 설정하고 그렇지 않은 경우 기본 설정을 유지할 수 있습니다.

이제 간단하고 사용하기 쉬운 QML 애플리케이션을 만들었습니다.

안녕하세요 세계

창의 중앙에 텍스트 "Hello World"를 표시하는 간단한 응용 프로그램입니다.

import QtQuick 2.3
import QtQuick.Window 2.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World") //The method qsTr() is used for translations from one language to other.

    Text {
        text: qsTr("Hello World")
        anchors.centerIn: parent
    }
}

간단한 버튼 만들기

MouseArea 구성 요소를 사용하여 클릭 가능한 버튼의 모든 구성 요소를 쉽게 변형 할 수 있습니다. 아래 코드는 버튼과 텍스트가 가운데에있는 360x360 창을 표시합니다. 버튼을 누르면 텍스트가 바뀝니다.

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360

    Rectangle {
        id: button

        width: 100
        height: 30
        color: "red"
        radius: 5     // Let's round the rectangle's corner a bit, so it resembles more a button
        anchors.centerIn: parent

        Text {
            id: buttonText
            text: qsTr("Button")
            color: "white"
            anchors.centerIn: parent
        }

        MouseArea {
            // We make the MouseArea as big as its parent, i.e. the rectangle. So pressing anywhere on the button will trigger the event
            anchors.fill: parent

            // Exploit the built-in "clicked" signal of the MouseArea component to do something when the MouseArea is clicked.
            // Note that the code associated to the signal is plain JavaScript. We can reference any QML objects by using their IDs
            onClicked: {
                buttonText.text = qsTr("Clicked");
                buttonText.color = "black";
            }
        }
    }
}

이미지 표시

이 예제는 이미지를 표시하기위한 이미지 구성 요소의 가장 간단한 사용법을 보여줍니다.

이미지 source 속성은 절대 또는 상대 경로가있는 파일, 인터넷 URL ( http:// ) 또는 Qt 리소스 ( qrc:/ ) 중 하나 일 수있는 URL 유형 입니다 qrc:/

import QtQuick 2.3

Rectangle {
    width: 640
    height: 480

    Image {
         source: "image.png"
    }
}

마우스 이벤트

이 예제는 마우스 이벤트가 QML에서 사용되는 방법을 보여줍니다.

import QtQuick 2.7
import QtQuick.Window 2.2

Window {
    visible: true
    Rectangle {
        anchors.fill: parent
        width: 120; height: 240
        color: "#4B7A4A"

        MouseArea {
            anchors.fill: parent // set mouse area (i.e. covering the entire rectangle.)
            acceptedButtons:  Qt.AllButtons
            onClicked: {
                // print to console mouse location
                console.log("Mouse Clicked.")
                console.log("Mouse Location: <",mouseX,",",mouseY,">")

                //change Rectangle color
                if ( mouse.button === Qt.RightButton )
                    parent.color = 'blue'
                if ( mouse.button === Qt.LeftButton )
                    parent.color = 'red'
                if ( mouse.button === Qt.MiddleButton )
                    parent.color = 'yellow'
            }
            onReleased: {
                // print to console
                console.log("Mouse Released.")
            }
            onDoubleClicked: {
                // print to console
                console.log("Mouse Double Clicked.")
            }

        }
    }


}