한국어
Qt
 

이번엔 아이템들을 배치 시키는 컴포넌트를 소개한다.

 

Row

Row는 가로형태로 아이템을 배치시킨다.

import QtQuick 2.11
import QtQuick.Window 2.11

Window {
    id: idWindow
    visible: true
    width: 700
    height: 300
    flags: Qt.FramelessWindowHint

    Row{
        anchors.centerIn: parent
        spacing: 20

        Image{
            source: "houses-1622066_640.jpg"
        }

        Image{
            source: "houses-1622066_640.jpg"
        }
    }
}

 

Row를 이용해 Image를 가로형태로 배치시켰다.

row.png

 

Repeater를 사용하면 같은 아이템들을 일일이 나열할 필요없이 간단하게 아이템을 반복하여 배치시킬 수 있다.

Rectangle{
    anchors.fill: parent
    color: "#F0F0F0"

    Row{
        anchors.centerIn: parent
        spacing: 20

        Repeater{
            model: 2
            Image{
                source: "houses-1622066_640.jpg"
            }
        }
    }
}

 

Column

Column은 아이템들을 새로로 배치 시킨다.

import QtQuick 2.11
import QtQuick.Window 2.11

Window {
    id: idWindow
    visible: true
    width: 400
    height: 600
    flags: Qt.FramelessWindowHint


    Rectangle{
        anchors.fill: parent
        color: "#F0F0F0"

        Column{
            anchors.centerIn: parent
            spacing: 20

            Image{
                source: "houses-1622066_640.jpg"
            }

            Image{
                source: "kingfisher-2046453__180.jpg"
            }
            Rectangle{
                color: "green"
                width: 110
                height: 50
            }
        }
    }
}

 

Image와 Rectangle을 새로로 배치

Column.png

 

이 글과 연관된 다른 글
  1. [2019/02/23] Qml 기본 컴포넌트 강좌 (4) - 모델 리스팅(Listing) by 운영자 (1388)
번호 제목 글쓴이 날짜 조회 수
공지 Qt프로그래밍(QtQuick) Beginner를 위한 글 읽는 순서 운영자 2019.01.05 8886
51 Qml 기본 컴포넌트 강좌 (4) - 모델 리스팅(Listing) file 운영자 2019.02.23 1388
50 Qt Bluetooth를 이용한 시리얼(Serial) 통신 file makersweb 2019.02.17 803
» Qml 기본 컴포넌트 강좌 (3) - 배치(positioning) 컴포넌트 file 운영자 2019.02.10 953
48 QString 문자열 다루기 예제 운영자 2019.01.26 7271
47 Qt SQL을 이용한 가벼운 데이터베이스 다루기 file 운영자 2019.01.23 1194
46 구글 클라우드 Speech-To-Text API를 Qt기반(C++, Qml)테스트 [7] file makersweb 2019.01.20 1215
45 QNetworkAccessManager를 통해 HTTP POST 하는 예제 makersweb 2019.01.17 860
44 Qt응용프로그램 실행 시 콘솔창(터미널)같이 띄우기 file makersweb 2019.01.16 850
43 안드로이드 가상장치 사용 file makersweb 2019.01.13 389
42 Qml 기본 컴포넌트 강좌 (2) file makersweb 2019.01.05 2666
41 Qml 기본 컴포넌트 강좌 (1) file makersweb 2019.01.03 3492
40 QtWayland와 ivi-compositor file makersweb 2018.12.27 699
39 Qml과 C++로 구현하는 GUI어플리케이션 file makersweb 2018.12.25 3850
38 싱글터치 스크린 및 임베디드 리눅스 기반에서 Qt 터치입력 makersweb 2018.12.24 461
37 ShaderEffect QML Type 을 이용한 그래픽효과 file makersweb 2018.12.09 637
36 Qml에서 커튼효과 구현 예제 - Shader Effects file 운영자 2018.12.05 387
35 안드로이드 Qt 프로그래밍 file makersweb 2018.11.30 3463
34 리눅스에서 Qt4.8기반 어플리케이션의 한글입력 file makersweb 2018.11.29 566
33 QML에서 동적으로 텍스트 다국어 처리 file makersweb 2018.11.04 1074