QML 구문 기초

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

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

import 문

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 속성에 할당했던 예제와 달리, Text 객체는 Rectangle 의 속성에 할당하지 않고 선언되었다는 점에 유의하십시오. 이는 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
}

위의 예제에서, `opacity: 0.5`라는 줄이 주석으로 처리되었기 때문에 ` Text ` 객체는 일반적인 불투명도를 갖게 됩니다.