[Qt Guide][2] 자주 사용하는 Qt UI 컴포넌트 설명 (Description of various UI components provided by Qt)

[Qt Guide][2] Qt에서 제공하는 각종 UI 컴포넌트 설명

(Description of various UI components provided by Qt)

 

(추천) Qt QML과 C++로 시작하는 크로스플랫폼 앱 개발 강의 - 입문편

https://inf.run/3XmSH

Qt QML과 C++로 시작하는 크로스플랫폼 앱 개발 - 입문편 강의 - 인프런

 

---

2. 빠른 GUI 개발을 위한 QML 프로그래밍 (QML programming for fast GUI development)

1. Qt에서 제공하는 각종 UI 컴포넌트 설명 (Description of various UI components provided by Qt)

---

1. Item

Qt에서 UI를 그리기 위해 사용하는 언어 QML.

QML에서는 기본 UI 컴포넌트들을 제공하는데,

가장 기본이 되는 컴포넌트가 바로 Item입니다.

import QtQuick 2.0

Item {
    Image {
        source: "tile.png"
    }
    Image {
        x: 80
        width: 100
        height: 100
        source: "tile.png"
    }
    Image {
        x: 190
        width: 100
        height: 100
        fillMode: Image.Tile
        source: "tile.png"
    }
}

대부분의 컴포넌트들은 Item 컴포넌트를 상속 받아 만들어집니다.

Item도 기본적으로 다양한 프로퍼티를 가지고 있으며,

이 프로퍼티에 값을 적절히 주어 위치 좌표, 앵커, 활성 상태, 높이, 너비, 투명도, 포커스 등을 설정할 수 있습니다.

Item이 가진 프로퍼티 종류. 이것을 기점으로 QML 컴포넌트의 프로퍼티도 확장됩니다.

1-1. Rectangle

Item이 가진 프로퍼티(속성 옵션들)로 부족하다면 Rectangle 컴포넌트를 주로 사용합니다.

Rectangle이 Item과 대표적으로 다른 것은

바로 color와 border, radius입니다.

import QtQuick 2.0

Rectangle {
    width: 100
    height: 100
    color: "red"
    border.color: "black"
    border.width: 5
    radius: 10
}

color를 설정하면 Rectangle 컴포넌트의 배경 색상을 변경할 수 있으며
border은 테두리 두께와 색상을,

radius는 테두리(꼭지점)의 곡률을 설정하여 심미적인 변화를 줄 수 있어요.

반응형

1-2. Flickable

Flickable은 ListView, GridView, TableView의 부모 컴포넌트로써

기본적으로 어떤 컴포넌트를 감싸서 스크롤이 가능한 상태로 만들어주는 역할을 합니다.

import QtQuick 2.0

Flickable {
    width: 200; height: 200
    contentWidth: image.width; contentHeight: image.height

    Image { id: image; source: "bigImage.png" }
}

예를 들어, 위 코드는 bigImage.png 의 크기를 Flickable에 제공함으로써

만약 윈도우의 크기가 작아지더라도

좌우, 상하 스크롤하여 이미지를 볼 수 있도록 만들어줍니다.

 

1-3. Repeater

Repeater은 무언가를 반복하는 역할을 합니다.

말로는 직관적이지 않으므로 코드를 보는 것이 이해하기 좋습니다.

Row {
    Rectangle { width: 10; height: 20; color: "red" }
    Repeater {
        model: 10
        Rectangle { width: 20; height: 20; radius: 10; color: "green" }
    }
    Rectangle { width: 10; height: 20; color: "blue" }
}

위 코드는 좌우 끝에 각각 빨간색, 파란색 Rectangle을 두고

가운데에는 10개의 초록색 Rectangle을 두는 UI를 그립니다.

아래 결과처럼요.

만약 앞서 배운 Flickable로 Repeater를 감싼다면?

한정된 크기 내에서 Repeater의 내용이 아무리 많더라도 Flickable이 스크롤하여 볼 수 있도록 만들어줍니다.

즉, 리스트 UI가 만들어지는 것이죠.

 

이번에는 Item으로부터 파생되어 확장되는 컴포넌트 중에 Repeater까지만 살펴보겠습니다.

종류가 워낙 다양하고, 몇 가지 컴포넌트를 가지고 연습하다보면 사용 방법이 비슷하기 때문이에요.

 

이제는 지금까지와는 다른, 사용자의 마우스, 키보드 상호작용을 다루는 컴포넌트를 살펴보죠!

 

2. MouseArea

MouseArea는 앞선 UI 컴포넌트 내의 영역에

마우스를 인식하는 공간을 만들어주는 컴포넌트입니다.

예를 들어 위 사진의 초록색 사각형을 클릭했을 때

사각형의 색상을 빨간색으로 만들고 싶다면 어떻게 해야할까요?

import QtQuick 2.0

Rectangle {
    width: 100; height: 100
    color: "green"

    MouseArea {
        anchors.fill: parent
        onClicked: { parent.color = 'red' }
    }
}

위 코드처럼 Rectangle을 선언하고,

MouseArea의 anchors를 결정해주면 됩니다.

 

이 때, MouseArea가 코드 상에서 반드시 Rectangle 안에 들어가있을 필요는 없습니다.

아래처럼 같은 레벨에 있더라도 동일한 기능으로 구현할 수 있어요.

import QtQuick 2.0

Rectangle {
	id: rect
    width: 100; height: 100
    color: "green"
}

MouseArea {
     anchors.fill: rect
     onClicked: { parent.color = 'red' }
}

 

이처럼 MouseArea를 이용하면

Click과 Hover, Drag 등의 처리를 간편하게 할 수 있습니다.

 

MouseArea의 대체제로서, TapHandler와 HoverHandler가 있습니다.

개발 중에 참고해보시면 도움이 될 것입니다!

 

 

결론!

오늘은 Qt에서 제공하는 주요 UI 컴포넌트를 알아봤는데요.

대부분 위에서 소개한 컴포넌트만으로 웬만한 UI를 구성할 수 있습니다!

 

또한, 각 컴포넌트 간의 배치 anchors나 column, row를 사용하여 구현할 수 있어요.

이러한 컴포넌트 배치는 별도의 글로 작성해보도록 하겠습니다~

 

(추천) Qt QML과 C++로 시작하는 크로스플랫폼 앱 개발 강의 - 입문편

https://inf.run/3XmSH

Qt QML과 C++로 시작하는 크로스플랫폼 앱 개발 - 입문편 강의 - 인프런

 

 

> 다음 글 : 커스텀 UI 컴포넌트 만들기

2023.08.24 - [Book & Lecture/Easy to learn Qt framework] - [Qt Guide][3] 커스텀 UI 컴포넌트 만들기 (Creating custom UI components)

[Qt Guide][3] 커스텀 UI 컴포넌트 만들기 (Creating custom UI components)