한국어
Qt
 

Qml응용프로그램을 작성하기 위해서는 QtQuick 모듈 및 Qml언어를 사용 방법을 알아야한다. QtQuick 모듈은 Qml응용프로그램을 작성하기위한 표준 라이브러리이다.

 

QtQuick 모듈은 Qml을 사용하여 UI를 만드는 데 필요한 모든 기본 타입들을 제공한다.

 

QtQuick 모듈 Import

QtQuick 모듈을 사용하려면 Qml문서에서 import문을 사용하면된다. 가져오기 구문은 다음과 같다.

import QtQuick 2.11  // 설치된 Qt버전에 따라 알맞는 버전을 명시한다.

 

이제 QtQuick이 제공하는 기본 유형과 기능을 Qml문서에서 사용할 수 있다.

 

Window

사용자와 GUI응용프로그램간 상호작용을 하기위해 화면을 통해 뭔가를 제공하고 입력을 받아 처리하는 적절한 작업이 필요한데, Qml로 어떤 UI요소를 작성하고 화면에 보여주기 위해선 가장 먼저 window를 생성해야한다.

 

Qml의 기본검포넌트에 Window가 있는데 이 윈도우객체에 화면요소를 배치하고 입력을 받아 처리하는 부분을 구현해주면되는 것이다.

 

아래 예제 소스코드는 Window컴포넌트로 기본적인 윈도우 객체를 생성한다.

main.qml

import QtQuick 2.11
import QtQuick.Window 2.11

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

 

Window.png

 

Item

이 컴포넌트 자체만으로는 화면에 아무것도 표시하지 않지만 모든 시각적 컴포넌트들은 이컴포넌트를 상속받는다. 그러므로 이 요소가 가지는 속성(프로퍼티)들은 모든 시각적 컴포넌트들이 기본으로 사용할 수 있다.

기본적 지오메트리(geometry) 속성인 x, y, z와 width, height 이있다. 투명도, 스케일, 회전등을 설정 할 수 있다.

Item{
    id: basicItem
    x: 0
    y: 0
    z: 0
    width: 100
    height: 100
    visible: true         // 시각적으로 표시할지를 설정
    opacity: 0.4          // 불투명도를 설정 1이면 완전한 불투명, 0이면 완전한 투명이다.
    scale: 1
}

 

아래의 예제 처럼 사용될 수 있다.

import QtQuick 2.11
import QtQuick.Window 2.11

Window {
    id: idWindow
    visible: true
    width: 320
    height: 240
    title: qsTr("Hello World")

    Item{
        id: basicItem
        x: 0
        y: 0
        z: 0

        width: parent.width   // 부모(Window)의 폭을 사용
        height: parent.height // 부모(Window)의 높이를 사용

        visible: true
        opacity: 0.3
        scale: 0.7

        Rectangle{
            width: 200
            height: 100
            anchors.centerIn: parent
            color: "black"
            border.width: 1
            border.color: "black"
        }
    }
}

 

Rectangle

시각적 속성들을 포함한 사각형 아이템이다. Item의 기본요소와 color 및 radius등을 설정할 수 있다.

Rectangle{
    width: 200
    height: 100
    color: "yellow"
    border.width: 1
    border.color: "black"
}

 

Window객체안에 Rectangle을 배치하였다.

import QtQuick 2.11
import QtQuick.Window 2.11

Window {
    id: idWindow
    visible: true
    width: 320
    height: 240
    title: qsTr("Hello World")

    Rectangle{
        width: 200
        height: 100
        anchors.centerIn: parent  // 상위 컴포넌트(window)의 중앙에 배치
        color: "yellow"
        border.width: 1           // 가장자리 선의 굵기
        border.color: "black"     // 가장자리 선의 컬러
    }
}

 

Rectangle.png

 

Text

문자열을 출력할 수 있는 컴포넌트이다. 출력할 문자열을 text프로퍼티에 설정한다. font 프로퍼티를 통해서는 글꼴의 모양, 사이즈, 굵기 등의 상세 설정을 할 수 있다. qsTr("") 함수는 문자열 번역을위해 사용한다.

Text {
    text: qsTr("텍스트 컴포넌트")
    font.pixelSize: 20
    font.bold: true
    font.family: "나눔고딕"
    color: "green"
    horizontalAlignment: Text.AlignHCenter
    verticalAlignment: Text.AlignVCenter
}

 

Text컴포넌트를 Rectangle 안에 배치한 모습니다.

import QtQuick 2.11
import QtQuick.Window 2.11

Window {
    id: idWindow
    visible: true
    width: 320
    height: 240
    title: qsTr("Hello World")

    Rectangle{
        width: 200
        height: 100
        anchors.centerIn: parent  // 상위 컴포넌트(Window)의 중앙에 배치
        color: "yellow"
        border.width: 1           // 가장자리 선의 굵기
        border.color: "black"     // 가장자리 선의 컬러

        Text {
            id: title             // 이 객체에 id를 부여 (중복되면 안됨)
            anchors.fill: parent  // 상위 컴포넌트(Rectangle)의 영역을 채운다.
            text: qsTr("텍스트 컴포넌트")
            font.pixelSize: 20
            font.bold: true
            font.family: "나눔고딕"
            color: "green"
            horizontalAlignment: Text.AlignHCenter  // 수평에 대한 중앙 정렬
            verticalAlignment: Text.AlignVCenter    // 수직에 대한 중앙 정렬
        }
    }
}

 

text.png

 

Image

이미지 아이템을 표시할 수 있다. source 프로퍼티에 이미지 경로를 설정한다.

Image{
    width: 153
    height: 69
    source: "makersweb.png"
}

 

이번에는 Image를 Rectangle안에 배치한 모습

import QtQuick 2.11
import QtQuick.Window 2.11

Window {
    id: idWindow
    visible: true
    width: 320
    height: 240
    title: qsTr("Hello World")

    Rectangle{
        width: 200
        height: 100
        anchors.centerIn: parent 
        color: "yellow"
        border.width: 1
        border.color: "black"

        // width, height를 설정하지 않으면 이미지의 원본 사이즈로 표시된다.
        Image{
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            source: "qrc:/makersweb.png"
        }
    }
}

 

image.png

 

질문등 자유롭게 댓글 남겨주세요..

번호 제목 글쓴이 날짜 조회 수
공지 Qt프로그래밍(QtQuick) Beginner를 위한 글 읽는 순서 운영자 2019.01.05 1415
43 안드로이드 가상장치 사용 file makersweb 2019.01.13 50
42 Qml 기본 컴포넌트 강좌 (2) file makersweb 2019.01.05 309
» Qml 기본 컴포넌트 강좌 (1) file makersweb 2019.01.03 451
40 QtWayland와 ivi-compositor file makersweb 2018.12.27 107
39 Qml과 C++로 구현하는 GUI어플리케이션 file makersweb 2018.12.25 791
38 싱글터치 스크린 및 임베디드 리눅스 기반에서 Qt 터치입력 makersweb 2018.12.24 106
37 ShaderEffect QML Type 을 이용한 그래픽효과 file makersweb 2018.12.09 145
36 Qml에서 커튼효과 구현 예제 - Shader Effects file 운영자 2018.12.05 119
35 안드로이드 Qt 프로그래밍 file makersweb 2018.11.30 595
34 리눅스에서 Qt4.8기반 어플리케이션의 한글입력 file makersweb 2018.11.29 152
33 QML에서 동적으로 텍스트 다국어 처리 file makersweb 2018.11.04 258
32 Qt Installer Framework - 패키징, 설치프로그램 제작 file makersweb 2018.10.14 342
31 Qt 응용프로그램 배포(windows) file makersweb 2018.10.10 446
30 소스코드에서 환경변수 가져오기와 설정하기 makersweb 2018.10.08 170
29 표를 만들고 PDF문서로 출력하기 file makersweb 2018.09.30 145
28 Qml에서 키보드 입력 이벤트 핸들링 file makersweb 2018.08.09 292
27 Qml 어플리케이션 정적 빌드 file makersweb 2018.07.27 215
26 Qt Bluetooth 관련 기능 확인 사항 makersweb 2018.07.10 178
25 Qml 및 C++개발시 유용한 팁 makersweb 2018.04.06 1137