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")
}
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" // 가장자리 선의 컬러
}
}
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 // 수직에 대한 중앙 정렬
}
}
}
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"
}
}
}
질문등 자유롭게 댓글 남겨주세요..
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
공지 | Qt프로그래밍(QtQuick) Beginner를 위한 글 읽는 순서 | 운영자 | 2019.01.05 | 86881 |
8 | QML에서 D-Bus 통신 | makersweb | 2023.03.15 | 909 |
7 | QML에서 Websocket 서버와 통신 | makersweb | 2021.09.18 | 893 |
6 | OpacityMask 예제 | makersweb | 2023.01.26 | 757 |
5 | QML과 코루틴(Coroutines) | makersweb | 2020.11.03 | 625 |
4 | QtQuick 애플리케이션에 Rive 애니메이션 통합 | makersweb | 2024.03.31 | 596 |
3 | 앱을 종료할 때 QML 바인딩 오류를 피하는 방법 | makersweb | 2021.08.08 | 546 |
2 | Binding 타입으로 객체 속성 간 묶기 | makersweb | 2022.03.04 | 470 |
1 | 그래픽 소프트웨어에서 디자인 내보내기 (Exporting Designs from Graphics Software) | j2doll | 2020.12.25 | 438 |