한국어
Qt
 

이번 시간에는 데이터 모델들을 목록화 할 수 있는 컴포넌트를 다룬다.

 

데이터 모델을 리스트로 나열할 수 있는 컴포넌트는 지난 강좌에서 잠깐 설명했던 Repeater 와 포지셔닝 컴포넌트인 Column 및 Row를 사용 사용하는 것이다.

가장 간단한 형태로 Repeater로 지정된 수 만큼 항목을 인스턴스화 시키고 Column과 결합하여 새로로 나열시킬 수 있다. 아래의 예제는 Rectangle 아이템을 5개 객체화 하고 index를 참조하여 새로 형태로 리스팅한다.

import QtQuick 2.11
import QtQuick.Window 2.11

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

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

        Column{
            id: list
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter

            spacing: 10

            Repeater{
                model: 5

                Rectangle{
                    anchors.horizontalCenter: parent.horizontalCenter
                    width: 40
                    height: 40
                    radius: 20
                    border.width: 1
                    color: "yellow"

                    Text {
                        id: text
                        anchors.centerIn: parent
                        text: index
                    }
                }
            }
        }
    }
}

 

modelView1.png

 

이번에는 단순히 지정된 수 만큼 객체를 나열하는것이 아니라 자바 스크립트 배열을 지정하여 리스트로 만든다. 배열에는 문자열나 숫자등이 들어갈 수 있고 아래 예제에서는

Component가 별도의 qml파일 처럼 배열에 담겨 Repeater의 model로 사용되며 modelData로 접근하여 Loader에 의해 인스턴스화된다. 참고로 Component는 그 자체 만으로는 인스턴스화 되지 않으며 Loader에 의해 런타임중 동적으로 로드시킬 수 있다.   (Component 및 Loader에 대해서는 다음 강좌에서 더 자세히 다룰 것이다.)

import QtQuick 2.11
import QtQuick.Window 2.11

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

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

        Row{
            id: list

            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter

            spacing: 10

            Component{
                id: blue
                Rectangle{
                    width: 40
                    height: 30
                    color: "blue"
                    Text {
                        anchors.centerIn: parent
                        text: qsTr("Blue")
                    }
                }
            }

            Component{
                id: red
                Rectangle{
                    width: 50
                    height: 40
                    color: "red"
                    Text {
                        anchors.centerIn: parent
                        text: qsTr("Red")
                    }
                }
            }

            Component{
                id: green
                Rectangle{
                    width: 50
                    height: 40
                    color: "green"
                    Text {
                        anchors.centerIn: parent
                        text: qsTr("Green")
                    }
                }
            }

            Repeater{
                model: [red, green, blue]

                Loader{
                    sourceComponent: modelData
                }
            }
        }
    }
}

 

modelView2.png

 

ListModel컴포넌트를 사용하면 조금더 복잡한 데이터 유형들을 설정할 수 있다.ListModel컴포넌트를 사용하면 조금더 복잡한 데이터 유형들을 설정할 수 있다.

import QtQuick 2.11
import QtQuick.Window 2.11

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

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

        ListModel{
            id: users
            ListElement{ name: "Lee"; ID: "goal21"; point: 210}
            ListElement{ name: "Kim"; ID: "kim19"; point: 198}
            ListElement{ name: "Park"; ID: "allways78"; point: 200}
            ListElement{ name: "Kim"; ID: "hello32"; point: 176}
        }

        Column{
            id: list

            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter

            spacing: 10

            Repeater{
                model: users

                Rectangle{
                    width: 150
                    height: 50
                    color: "blue"
                    radius: 5

                    Row{
                        spacing: 10
                        anchors.centerIn: parent
                        Text {
                            text: name
                            font.bold: true
                            font.pixelSize: 20
                            anchors.verticalCenter: parent.verticalCenter
                        }
                        Text {
                            text: ID
                            color: "white"
                            font.bold: true
                            font.pixelSize: 15
                            anchors.verticalCenter: parent.verticalCenter
                        }
                        Text {
                            text: point
                            color: "white"
                            font.bold: true
                            font.pixelSize: 15
                            anchors.verticalCenter: parent.verticalCenter
                        }
                    }
                }
            }
        }
    }
}

 

modelView3.png

 

번호 제목 글쓴이 날짜 조회 수
공지 Qt프로그래밍(QtQuick) Beginner를 위한 글 읽는 순서 운영자 2019.01.05 24148
57 QML 전역 객체 (Global Object) file makersweb 2019.04.10 549
56 tslib의 ts_calibrate를 응용해서 Qt로 터치보정기능 구현 file makersweb 2019.04.06 720
55 GPU가 없는 장치에서 Qt Quick을 사용 makersweb 2019.04.02 1361
54 QTextCodec클래스를 사용하여 유니코드와 EUC-KR 변환 makersweb 2019.03.25 1307
53 qInstallMessageHandler를 이용한 디버그 메세지 출력 제어하기 makersweb 2019.02.25 597
52 Qt5기반 독립 프로세스(out-of-process)로 동작하는 가상키보드(virtual keyboard) file makersweb 2019.02.24 1283
» Qml 기본 컴포넌트 강좌 (4) - 모델 리스팅(Listing) file 운영자 2019.02.23 2948
50 Qt Bluetooth를 이용한 시리얼(Serial) 통신 file makersweb 2019.02.17 1540
49 Qml 기본 컴포넌트 강좌 (3) - 배치(positioning) 컴포넌트 file 운영자 2019.02.10 2332
48 QString 문자열 다루기 예제 운영자 2019.01.26 16698
47 Qt SQL을 이용한 가벼운 데이터베이스 다루기 [1] file 운영자 2019.01.23 3198
46 구글 클라우드 Speech-To-Text API를 Qt기반(C++, Qml)테스트 [7] file makersweb 2019.01.20 1774
45 QNetworkAccessManager를 통해 HTTP POST 하는 예제 makersweb 2019.01.17 2126
44 Qt응용프로그램 실행 시 콘솔창(터미널)같이 띄우기 file makersweb 2019.01.16 1968
43 안드로이드 가상장치 사용 file makersweb 2019.01.13 674
42 Qml 기본 컴포넌트 강좌 (2) [2] file makersweb 2019.01.05 4968
41 Qml 기본 컴포넌트 강좌 (1) file makersweb 2019.01.03 6750
40 QtWayland와 ivi-compositor file makersweb 2018.12.27 1407
39 Qml과 C++로 구현하는 GUI어플리케이션 file makersweb 2018.12.25 7653