QML 튜토리얼 1 - 값 유형

이 첫 번째 프로그램은 몇 가지 기본 QML 개념을 소개하는 매우 간단한 "Hello world" 예제입니다. 아래 그림은 이 프로그램의 스크린샷입니다.

다음은 애플리케이션의 QML 코드입니다:

import QtQuick

Rectangle {
    id: page
    width: 320; height: 480
    color: "lightgray"

    Text {
        id: helloText
        text: "Hello world!"
        y: 30
        anchors.horizontalCenter: page.horizontalCenter
        font.pointSize: 24; font.bold: true
    }
}

연습

가져오기

먼저 이 예제에 필요한 유형을 가져와야 합니다. 대부분의 QML 파일은 Rectangle, Image, ... 와 같이 Qt와 함께 제공되는 기본 제공 QML 유형을 사용하여 가져옵니다:

import QtQuick

직사각형 유형

Rectangle {
    id: page
    width: 320; height: 480
    color: "lightgray"

Rectangle 타입의 루트 객체를 선언합니다. 이것은 QML에서 애플리케이션을 만드는 데 사용할 수 있는 기본 빌딩 블록 중 하나입니다. 나중에 참조할 수 있도록 id 을 지정합니다. 이 경우 이를 "페이지"라고 부릅니다. width , height 및 color 속성도 설정합니다. Rectangle 유형에는 x 및 y 과 같은 다른 많은 속성이 포함되어 있지만 기본값은 그대로 유지됩니다.

텍스트 유형

    Text {
        id: helloText
        text: "Hello world!"
        y: 30
        anchors.horizontalCenter: page.horizontalCenter
        font.pointSize: 24; font.bold: true
    }

'Hello world!' 텍스트를 표시하는 Text 유형을 루트 직사각형 유형의 하위 유형으로 추가합니다.

y 속성은 텍스트를 부모 위쪽에서 30픽셀 수직으로 배치하는 데 사용됩니다.

anchors.horizontalCenter 속성은 유형의 가로 중앙을 나타냅니다. 이 경우 텍스트 유형이 페이지 요소에서 가로 중앙에 위치하도록 지정합니다( 앵커 기반 레이아웃 참조).

font.pointSize 및 font.bold 속성은 글꼴과 관련이 있으며 점 표기법을 사용합니다.

예제 보기

작성한 내용을 보려면 파일명을 첫 번째 인수로 사용하여 qml 도구 ( bin 디렉터리에 있음)를 실행합니다. 예를 들어 설치 위치에서 제공된 완료된 튜토리얼 1 예제를 실행하려면 다음과 같이 입력합니다:

qml tutorials/helloworld/tutorial1.qml