[C++,QT/Qml]16.Qml프로그래밍 동적 리스트 만들기2(dynamic ListView)

[C++,QT/Qml]16.Qml프로그래밍 동적 리스트 만들기2(dynamic ListView)

 

 

 

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

 

오늘은 동적 리스트를 만드는 방법에 대해서 포스팅을 하겠습니다.

 

동적 리스트를 만들려면 데이터를 어디에선가 arraylist같은 형식으로 가져와야하고 이것들을 qml에

 

가져와서 동적으로 리스트뷰에 넣어주어야 합니다.

 

그래서 c++코드에서는 리스트를 가져오고 이 리스트 데이터들을 qml에서 가져와서

 

데이터들을 동적으로 출력을 시켜주어야 합니다. 

 

그래서 어디선가 리스트를 가져왔다고 가정을 하고 리스트는 c++코드에서 담고 그 리스트들을

 

qml에서 가져와서 출력하는 식으로 만들려고 합니다.

 

그런데 리스트뷰에 동적으로 출력을 하더라도 데이터들을 리스트 뷰에 동적으로 넣어주고 동적으로 보여 주어야 겠죠??

 

그래서 오늘은 리스트 뷰에 동적으로 사용자에게 보여주는 방법에 대해 설명 드리고 다음 포스팅에서

 

c++코드상에서 데이터들을 만들어 그 리스트들을 동적으로 출력하는 것을 진행 하겠습니다.

 

먼저 전체 코드먼저 보겠습니다.

 

 

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: 800
    height: 600
    title: qsTr("Hello World")
    Component.onCompleted://view가 처음 실행될때 제일 처음으로 불려지는곳
    {
        listView.model.append({"list_text": "test text",
                                "list_button_text": "test button"})//listview에 선언한 임의의 모델 안에 데이터를 넣어준다.
        listView.model.append({"list_text": "test text",
                                "list_button_text": "test button"})
        listView.model.append({"list_text": "test text",
                                "list_button_text": "test button"})
        listView.model.append({"list_text": "test text",
                                "list_button_text": "test button"})
 
    }
 
    Component {//리스트 뷰의 틀을 만든다.
           id: contactDelegate
           Item {
               width: 800
               height: 100
               Text//리스트에 텍스트를 넣어주기 위해 텍스트 객체를 만들어준다.
               {
                   id:listView_Text
                   anchors.left: parent.left
                   anchors.leftMargin: 50
                   anchors.verticalCenter:  parent.verticalCenter
                   text:list_text//모델에 매칭이될 변수 listview에 원하는 값을 넣기위해서 설정하는 값
               }
               Button//리스트에 버튼을 넣어주기 위해 버튼 객체를 만들어준다.
               {
                   id:listView_Button
                   width:100
                   height:40
                   anchors.rightMargin: 30
                   anchors.verticalCenter: parent.verticalCenter
                   anchors.right: parent.right
                   text: list_button_text//모델에 매칭이될 변수 listview에 원하는 값을 넣기위해서 설정하는 값
               }
               Rectangle//리스트의 구분선
               {
                   id:line
                   width:parent.width
                   anchors.bottom:parent.bottom//현재 객체의 아래 기준점을 부모객체의 아래로 잡아주어서 위치가 아래로가게 설정
                   height:1
                   color:"black"
               }
 
           }
       }
    ListView {
        id:listView
            anchors.fill: parent
            model: ListModel{}//임으로 만들 모델을 넣어준다.
            delegate: contactDelegate//delegate란 리스트 한개의 틀(틀을 하나 만들어서 그것들을 여러개 붙여놓은것이 리스트 뷰이다.)
            highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
            focus: true
        }
 
 
}
 
 
 

실행 이미지1

실행 이미지2

 

먼저 리스트뷰의 틀을 먼저 설명 드리겠습니다.

 

Component {//리스트 뷰의 틀을 만든다.
           id: contactDelegate
           Item {
               width: 800
               height: 100
               Text//리스트에 텍스트를 넣어주기 위해 텍스트 객체를 만들어준다.
               {
                   id:listView_Text
                   anchors.left: parent.left
                   anchors.leftMargin: 50
                   anchors.verticalCenter:  parent.verticalCenter
                   text:list_text//모델에 매칭이될 변수 listview에 원하는 값을 넣기위해서 설정하는 값
               }
               Button//리스트에 버튼을 넣어주기 위해 버튼 객체를 만들어준다.
               {
                   id:listView_Button
                   width:100
                   height:40
                   anchors.rightMargin: 30
                   anchors.verticalCenter: parent.verticalCenter
                   anchors.right: parent.right
                   text: list_button_text//모델에 매칭이될 변수 listview에 원하는 값을 넣기위해서 설정하는 값
               }
               Rectangle//리스트의 구분선
               {
                   id:line
                   width:parent.width
                   anchors.bottom:parent.bottom//현재 객체의 아래 기준점을 부모객체의 아래로 잡아주어서 위치가 아래로가게 설정
                   height:1
                   color:"black"
               }
 
           }
       }

 

Componenet 안에 item객체를 넣어주고 이 객체를 리스트 뷰의 전체 넓이 즉 800으로 해주고 높이를 임의로 넣어 

 

줍니다. 리스트 뷰의 넓이가 800인이유는 listvView라는 아이디를 가지고 있는 리스트 뷰의 넓이가 부모의 넓이

 

즉 전체 윈도우의 넓이 이기 때문에 800으로 설정 하였습니다.

 

그래서 이 하나의 리스트의 틀은 넓이가 800이고 높이가 100인 틀이 만들어 집니다. 

 

그 다음에 이 item의 내부에 데이터들을 넣기위해서 텍스트 객체와 버튼 객체 그리고 리스트를 구분하기위한 

 

사각형 객체를 만들어주고 텍스트와 버튼 객체를 리스트의 중앙에 오게 하고 구분선을 아래로 가게 설정을

 

해줍니다. 중앙에 오게 하는 코드는 anchors.verticalCenter:  parent.verticalCenter 입니다.

 

그리고 위의 틀에 코드를 보시면 쌩뚱맞은 변수들이 있습니다. list_text,list_button_text 이러한 변수들 입니다.

 

이 변수들은 리스트에 데이터를 넣기위해서 설정한 변수로 리스트뷰에 데이터 모델을 넣어 줄때 한개의

 

모델에 리스트의 틀 한개씩 매칭이 되어서 원하는 데이터 값을 넣어줄수 있습니다.

 

그 다음에 리스트 뷰 코드를 보겠습니다.

 

ListView {
        id:listView
            anchors.fill: parent
            model: ListModel{}//임으로 만들 모델을 넣어준다.
            delegate: contactDelegate//delegate란 리스트 한개의 틀(틀을 하나 만들어서 그것들을 여러개 붙여놓은것이 리스트 뷰이다.)
            highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
            focus: true
        }

 

 

위의 리스트 뷰 코드를 보시면 model에 ListModel이라고 임의의 비어있는 모델을 넣어줍니다. 

 

데이터들을 마음대로 넣기위해서 임의의 비어있는 모델을 넣어준 것입니다.

 

그리고 delegate를 위에서 만든 component 즉 틀을 넣어주시고 hihglight즉 위의 실행 이미지를 보시면 하늘색 사각형

 

을 설정해 줍니다. 하늘색 사각형은 키보드를 아래위로누를때마다 이동하면서 현재 item을 가리켜 줍니다.

 

엔터를 눌렀을때 어떠한 리스트를 눌렀는지를 알기위한 하나의 포커스 같은 것 입니다.

 

그 다음은 가장 중요한 데이터 값을 넣는 방법 입니다.

 

Component.onCompleted://view가 처음 실행될때 제일 처음으로 불려지는곳
    {
        listView.model.append({"list_text": "test text",
                                       "list_button_text": "test button"})//listview에 선언한 임의의 모델 안에 데이터를 넣어준다.
        listView.model.append({"list_text": "test text",
                                       "list_button_text": "test button"})
        listView.model.append({"list_text": "test text",
                                       "list_button_text": "test button"})
        listView.model.append({"list_text": "test text",
                                       "list_button_text": "test button"})
 
    }

 

Component.onCompleted 안에 넣은 코드로 뷰가 처음 시작될때 처음 실행되는 코드입니다.

 

위의 코드를 보시면 리스트의 component 즉 리스트의 틀을 만들때 쌩뚱맞게 선언한 변수들이 들어있습니다.

 

그변수들에 test text 및 test button이라는 값을 넣어주는 것을 알수 있습니다.

 

그리고 아까전에 선언했던 listView의 임의 모델안에 append를 시켜주어서 텍스트가 test text이고 버튼 텍스트가 

 

test button인 리스트를 append시켜 줍니다. 

 

그래서 코드를 실행을 시키면 위의 실행 이미지와 같이 텍스트와 버튼의 텍스트를 넣은 리스트가 생성이 됩니다.

 

만약 여기서 동적으로 리스트를 만들려면 어떻게 해야할까요?? 현재는 임의로 데이터들을 넣고싶은 만큼 넣었지만 

 

동적으로 만들기 위해서는 반복문이 필요합니다.

 

즉 for문을 돌려서 위의 append를 원하는 개수만큼 돌리면 동적으로 들어가게 됩니다.

 

이러한 for문을 만들기 위해서는 데이터의 개수를 알아야하고 또한 위의 리스트 뷰에 넣을 데이터들을 가져와야 합니다.

 

이러한 데이터들을 가져오는 방법은 앞서서 포스팅한 qml에서 c++에 함수를 호출하는 것을 사용하면 되는데

 

이부분은 다음 포스팅에서 다시 설명 드리면서 리스트를 동적으로 출력하는 것을 포스팅 하겠습니다.

 

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