QML 구문 기초

QML은 객체의 속성과 객체가 다른 객체의 변화에 어떻게 연관되고 반응하는지를 정의할 수 있는 다중 패러다임 언어입니다. 속성 및 동작의 변경이 단계별로 처리되는 일련의 문을 통해 표현되는 순수 명령형 코드와 달리, QML의 선언적 구문은 속성 및 동작 변경을 개별 개체의 정의에 직접 통합합니다. 이러한 속성 정의에는 복잡한 사용자 지정 애플리케이션 동작이 필요한 경우 명령형 코드가 포함될 수 있습니다.

QML 소스 코드는 일반적으로 QML 코드의 독립형 문서인 QML 문서를 통해 엔진에서 로드됩니다. 이러한 문서를 사용하여 애플리케이션 전체에서 재사용할 수 있는 QML 객체 유형을 정의할 수 있습니다. QML 파일에서 QML 객체 유형으로 선언하려면 유형 이름이 대문자로 시작해야 한다는 점에 유의하세요.

임포트 문

QML 문서에는 파일 맨 위에 임포트가 하나 이상 있을 수 있습니다. 임포트는 다음 중 하나가 될 수 있습니다:

• QML 모듈
• QML 문서로 유형 정의가 포함된 상대 디렉터리
• JavaScript 파일

JavaScript 파일을 가져올 때는 해당 파일이 제공하는 프로퍼티와 메서드에 액세스할 수 있도록 파일에 자격을 부여해야 합니다.

다양한 임포트의 일반적인 형식은 다음과 같습니다:

• import <ModuleIdentifier> [<Version.Number>] [as <Qualifier>]
• import "<Directory>"
• import "<JavaScriptFile>" [as <ScriptIdentifier>]

예시:

• import QtQuick 2.0
• import QtQuick.LocalStorage 2.0 as Database
• import "../privateComponents"
• import "somefile.js" as Script

QML 가져오기에 대한 자세한 내용은 QML 구문 - 가져오기 문 문서를 참조하세요.

객체 선언

구문론적으로 QML 코드 블록은 생성할 QML 객체의 트리를 정의합니다. 객체는 생성할 객체의 유형과 객체에 부여할 속성을 설명하는 객체 선언을 사용하여 정의됩니다. 각 객체는 중첩된 객체 선언을 사용하여 하위 객체를 선언할 수도 있습니다.

객체 선언은 해당 객체 유형의 이름과 중괄호 집합으로 구성됩니다. 그런 다음 모든 어트리뷰트와 자식 객체가 이 중괄호 안에 선언됩니다.

다음은 간단한 객체 선언입니다:

Rectangle {
    width: 100
    height: 100
    color: "red"
}

Rectangle 유형의 객체를 선언하고 그 뒤에 해당 객체에 대해 정의된 속성을 포함하는 중괄호 집합을 선언합니다. Rectangle 유형은 QtQuick 모듈에서 사용할 수 있는 유형이며 이 경우 정의된 속성은 사각형의 width, height 및 color 속성 값입니다. (이러한 속성은 Rectangle 문서에 설명된 대로 Rectangle 유형에서 사용할 수 있는 속성입니다.)

위의 오브젝트는 QML 문서의 일부인 경우 엔진에서 로드할 수 있습니다. 즉, 아래와 같이 소스 코드에 QtQuick 모듈을 임포트하는 import 문( Rectangle 유형을 사용할 수 있게 하기 위해)이 추가되어 있는 경우입니다:

import QtQuick 2.0

Rectangle {
    width: 100
    height: 100
    color: "red"
}

위의 코드를 .qml 파일에 넣고 QML 엔진이 로드하면 QtQuick 모듈에서 제공하는 Rectangle 유형을 사용하여 Rectangle 객체가 생성됩니다:

Rectangle { width: 100; height: 100; color: "red" }

이 예제에서 선언된 Rectangle 객체는 몇 가지 속성 값만 정의하기 때문에 매우 간단합니다. 보다 유용한 객체를 생성하기 위해 객체 선언은 다른 많은 유형의 속성을 정의할 수 있으며, 이러한 속성은 QML 객체 속성 문서에서 설명합니다. 또한 아래에서 설명하는 것처럼 객체 선언은 자식 객체를 정의할 수도 있습니다.

자식 객체

모든 객체 선언은 중첩된 객체 선언을 통해 자식 객체를 정의할 수 있습니다. 이러한 방식으로 모든 객체 선언은 여러 개의 자식 객체를 포함할 수 있는 객체 트리를 암시적으로 선언합니다.

예를 들어, 아래의 Rectangle 객체 선언에는 Gradient 객체 선언이 포함되어 있으며, 이 선언은 다시 두 개의 GradientStop 선언을 포함합니다:

import QtQuick 2.0

Rectangle {
    width: 100
    height: 100

    gradient: Gradient {
        GradientStop { position: 0.0; color: "yellow" }
        GradientStop { position: 1.0; color: "green" }
    }
}

이 코드가 엔진에서 로드되면 Rectangle 객체가 루트에 있는 객체 트리가 생성되고, 이 객체에는 Gradient 자식 객체가 있으며, 이 객체에는 다시 두 개의 GradientStop 자식이 있습니다.

그러나 이는 시각적 장면의 컨텍스트가 아닌 QML 오브젝트 트리의 컨텍스트에서 부모-자식 관계라는 점에 유의하세요. 시각적 장면에서 부모-자식 관계의 개념은 QtQuick 모듈의 Item 유형에 의해 제공되는데, 이는 대부분의 QML 객체가 시각적으로 렌더링되도록 의도되었기 때문에 대부분의 QML 유형의 기본 유형입니다. 예를 들어 Rectangle 및 Text 은 모두 Item 기반 유형이며, 아래에서는 Text 객체가 Rectangle 객체의 시각적 자식으로 선언되어 있습니다:

import QtQuick 2.0

Rectangle {
    width: 200
    height: 200
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, QML!"
    }
}

위 코드에서 Text 객체가 parent 값을 참조하는 경우, 이는 객체 트리의 부모가 아니라 시각적 부모를 참조하는 것입니다. 이 경우 Rectangle 객체는 QML 객체 트리의 컨텍스트와 시각적 장면의 컨텍스트 모두에서 Text 객체의 부모입니다. 그러나 parent 속성을 수정하여 시각적 부모를 변경할 수는 있지만, 객체 트리의 컨텍스트에 있는 객체의 부모는 QML에서 변경할 수 없습니다.

(또한 사각형의 gradient 프로퍼티에 Gradient 객체를 할당했던 이전 예제와 달리 Rectangle 프로퍼티에 할당하지 않고 Text 객체를 선언한 것을 확인할 수 있습니다. 이는 Item 의 children 프로퍼티가 유형의 기본 프로퍼티로 설정되어 보다 편리한 구문을 사용할 수 있기 때문입니다.)

Item 유형을 사용한 시각적 부모 개념에 대한 자세한 내용은 시각적 부모 문서를 참조하세요.

댓글

QML의 주석 구문은 JavaScript의 구문과 유사합니다:

• 한 줄 주석은 //로 시작하여 줄 끝에서 끝납니다.
• 여러 줄 주석은 /*로 시작하여 */로 끝납니다.

Text {
    text: "Hello world!"    //a basic greeting
    /*
        We want this text to stand out from the rest so
        we give it a large size and different font.
     */
    font.family: "Helvetica"
    font.pointSize: 24
}

엔진은 QML 코드를 처리할 때 주석을 무시합니다. 주석은 나중에 참조하거나 다른 사람에게 구현을 설명할 때 코드 섹션이 무엇을 하고 있는지 설명하는 데 유용합니다.

코멘트는 코드 실행을 방지하는 데에도 사용할 수 있으며, 문제를 추적하는 데 유용할 때도 있습니다.

Text {
    text: "Hello world!"
    //opacity: 0.5
}

위의 예에서 Text 객체는 줄 불투명도: 0.5가 주석으로 바뀌었으므로 일반 불투명도를 갖습니다.