[C++,QT/Qml]15.Qml프로그래밍 리스트 만들기1(ListView)

[C++,QT/Qml]15.Qml프로그래밍 리스트 만들기1(ListView)

 

 

 

안녕하세요 고급 개발자가 꿈인 코린이 입니다.

 

오늘은 실무에서 가장 많이 사용되는 리스트 뷰에 대해서 다루어 보려고 합니다.

 

모든 실무 ui에서는 리스트 뷰는 가장 기본적으로 들어갑니다. 왜냐하면 데이터들을 동적으로 넣어야 할때가 많기

 

때문에죠 그래서 안드로이드 프로그래밍을 하던 qml을하던 MFC를 하던 리스트 뷰는 아주 많이 사용하는 것중에

 

하나입니다.

 

그런데 막상 qml 리스트 뷰를 만들려고 보면 예제 코드가 많이 없고 예제코드가 잘 나와있는게 많이 없다보니 

 

만들기가 많이 어렵습니다. 필자도 물론 리스트뷰를 처음 만들때 정보가 너무 없어서 만드는데 꽤 고생을 한 

 

기억기 납니다.

 

그래서 qml에서 리스트를 만드시는 분들을 위해서 앞으로 몇개들의 포스팅동안에 listview에 대해서 설명드릴려고

 

합니다.

 

제가 준비한 내용은 동적 리스트를 출력하는 것과 커스텀으로 리스트 뷰를 구성하는 방법,checkbox리스트,

 

리스트 스크롤 만드는 방법,custom리스트 스크롤 만드는 방법 등을 포스팅할 예정입니다.

 

오늘 포스팅에서는 리스트를 동적으로 만들기전에 기본적으로 리스트뷰를 그려보고 어떻게 그려야하는지 

 

기본 개념등을 포스팅 하겠습니다.

 

아래의 코드는 qt사이트의 listview예제를 가져와서 살짝 수정 후 올린 내용입니다. 

 

 

import QtQuick 2.9
import QtQuick.Controls 2.0
import QtQuick.Window 2.2
import ConnectEvent 1.0//등록한 클래스 타입을 import해준다.
import "."
 
Window {
    property bool mbImageClicked : true
    property int mCount : 0
 
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
 
    ListModel {//리스트뷰에 담은 데이터들을 선언한다.
        id:model
        ListElement {
            name: "Bill Smith"
            number: "555 3264"
        }
        ListElement {
            name: "John Brown"
            number: "555 8426"
        }
        ListElement {
            name: "Sam Wise"
            number: "555 0473"
        }
    }
    Component {//리스트 뷰의 틀을 만든다.
           id: contactDelegate
           Item {
               width: 300; height: 100
               Column {
                   Text { text: '<b>Name:</b> ' + name }
                   Text { text: '<b>Number:</b> ' + number }
               }
           }
       }
    ListView {
            anchors.fill: parent
            model: model//선언된 데이터들을 리스트뷰에 넣는다.
            delegate: contactDelegate//delegate란 리스트 한개의 틀(틀을 하나 만들어서 그것들을 여러개 붙여놓은것이 리스트 뷰이다.)
            highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
            focus: true
        }
 
}
 
 
 

 

 

리스트 뷰의 가장 중요한 내용은 리스트 뷰의 틀을 만드는 것입니다.

 

리스트 뷰는 리스트가 100개가 될수도 있고 1000개가 될수도 있는데 이 리스트가 다른 틀을 사용할수도 있지만 거의 

 

같을 경우가 많습니다. 그래서 하나의 리스트 틀 즉 리스트 한개의 틀을 만들어서 이것들을 데이터만 다르게 넣고 

 

여러개 복사 붙혀넣기 한다고 생각하면 쉽습니다.

 

위의 실행 결과 이미지를 보면 하나의 틀일 여러개가 있는것을 볼수 있습니다.

 

틀이란 아래 이미지와 같은 것입니다.

 

이런 틀을 하나 만들고 데이터만 다르게해서 총 세개를 리스트에 넣은것과 같습니다.

 

그래서 이러한 틀을 만드는 부분이 아래 코드 부분 입니다.

 

 
    Component {//리스트 뷰의 틀을 만든다.
           id: contactDelegate
           Item {
               width: 300; height: 100
               Column {
                   Text { text: '<b>Name:</b> ' + name }
                   Text { text: '<b>Number:</b> ' + number }
               }
           }
       }
 

이름과 번호라는 틀을 한개 만들어서 거기에 할당하는 데이터들을 넣는데 데이터를 구성하는 것은 listmodel 즉 아래

 

소스 코드와 같습니다.

 

ListModel {//리스트뷰에 담은 데이터들을 선언한다.
        id:model
        ListElement {
            name: "Bill Smith"
            number: "555 3264"
        }
        ListElement {
            name: "John Brown"
            number: "555 8426"
        }
        ListElement {
            name: "Sam Wise"
            number: "555 0473"
        }
    }
 

 

 

위의 listmodel을 이용해서 Component에 데이터들을 담아서 리스트에 보여주는 것입니다.

 

listview에는 delegate를 설정하는 부분과 model을 설정 하는 부분이 있습니다.

 

delegate에는 위의 Component 즉 하나의 틀을 설정하면 되고 model에는 위의 ListModel을 넣어주면

 

ListModel의 데이터 개수만큼 틀이 계속 붙혀나가서 위의 실행 결과처럼 나오는 것입니다.

 

ListView {
            anchors.fill: parent
            model: model//선언된 데이터들을 리스트뷰에 넣는다.
            delegate: contactDelegate//delegate란 리스트 한개의 틀(틀을 하나 만들어서 그것들을 여러개 붙여놓은것이 리스트 뷰이다.)
            highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
            focus: true
        }
 

그렇다면 만약에 위의 리스트에 동적으로 만든다면 어떻게 해야할까??

 

당연히 위의 리스트 모델을 동적으로 생성하면된다. 

 

그리고 커스텀 리스트 뷰를 만드는 방법은 위의 delegate라는 하나의 틀을 커스텀화 시켜서 만들어 주면 된다.

 

이렇게 기본 개념은 이렇게 잡을 수가 있습니다.

 

하지만 동적으로 생성해도 데이터를 동적으로 넣을수 없다면 리스트의 의미가 없겠죠??

 

그래서 다음 포스팅에는 c++ 소스코드를 이용해서 리스트에 동적으로 데이터를 넣는 방법을 포스팅 하겠습니다.

 

여기까지 리스트만드는 방법의 기본 개념에 대해서 설명 드렸습니다.

 

예제를 따라하면서 리스트가 어떻게 만들어지는가를 중점적으로 보시면 리스트 만드는것에 장인이 되어있을 것 입니다.

 

여기까지 읽어주셔서 감사합니다.!!