한국어
Qt
 

QML and Qt Quick Qml 기본 컴포넌트 강좌 (1)

makersweb 2019.01.03 23:41 조회 수 : 12895

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 89751
59 Windows에서 Qt D-Bus를 사용하여 프로세스간 통신(IPC) file makersweb 2019.05.02 5042
58 QML과 QtQuick 모듈 개념과 기본 타입들 makersweb 2019.04.26 14072
57 QML 전역 객체 (Global Object) file makersweb 2019.04.10 1410
56 tslib의 ts_calibrate를 응용해서 Qt로 터치보정기능 구현 file makersweb 2019.04.06 1769
55 GPU가 없는 장치에서 Qt Quick을 사용 makersweb 2019.04.02 2216
54 QTextCodec클래스를 사용하여 유니코드와 EUC-KR 변환 makersweb 2019.03.25 3391
53 qInstallMessageHandler를 이용한 디버그 메세지 출력 제어하기 makersweb 2019.02.25 1787
52 Qt5기반 독립 프로세스(out-of-process)로 동작하는 가상키보드(virtual keyboard) file makersweb 2019.02.24 2994
51 Qml 기본 컴포넌트 강좌 (4) - 모델 리스팅(Listing) file 운영자 2019.02.23 5824
50 Qt Bluetooth를 이용한 시리얼(Serial) 통신 file makersweb 2019.02.17 4105
49 Qml 기본 컴포넌트 강좌 (3) - 배치(positioning) 컴포넌트 file 운영자 2019.02.10 5400
48 QString 문자열 다루기 예제 운영자 2019.01.26 42666
47 Qt SQL을 이용한 가벼운 데이터베이스 다루기 [1] file 운영자 2019.01.23 7641
46 구글 클라우드 Speech-To-Text API를 Qt기반(C++, Qml)테스트 [7] file makersweb 2019.01.20 3019
45 QNetworkAccessManager를 통해 HTTP POST 하는 예제 makersweb 2019.01.17 5380
44 Qt응용프로그램 실행 시 콘솔창(터미널)같이 띄우기 file makersweb 2019.01.16 5067
43 안드로이드 가상장치 사용 file makersweb 2019.01.13 1484
42 Qml 기본 컴포넌트 강좌 (2) [2] file makersweb 2019.01.05 9233
» Qml 기본 컴포넌트 강좌 (1) file makersweb 2019.01.03 12895
40 QtWayland와 ivi-compositor file makersweb 2018.12.27 2843