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

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

 

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

 

오늘은 c++에서 리스트를 만든후에 qml에서 동적으로 리스트를 출력하는 내용을

 

포스팅 하겠습니다.'

 

리스트를 어디에선가 받아오려면 c++코드에서 db에 접근하던 서버에서 데이터를 받아오던 해야하는데요

 

이런과정들을 모두 마치고 리스트들을 받아왔다고 가정을했을때 qml에 출력하는 내용을 다루어 보겠습니다.

 

아래 코드를 살펴 보겠습니다.

 

connectEvent.hpp

#ifndef CONNECTEVENT_H
#define CONNECTEVENT_
 
#include <QQuickView>
#include <QObject>
#include <iostream>
using namespace std;
 
struct TestStruct{
    QString title = "";
    QString ButtonText = "";
    QString Infomation = "";
};
 
class ConnectEvent : public QObject//connection을 사용하기 위해 상속 받아야 하는 클래스
{
public:
    Q_OBJECT
public:
    ConnectEvent();
    ~ConnectEvent(); 
 
    void setWindow(QQuickWindow* Window);
 
    void setTestList();
    Q_INVOKABLE int getListSize();
    Q_INVOKABLE QString getListTitle(int index);
    Q_INVOKABLE QString getListButtonText(int index);
    Q_INVOKABLE QString getListInfomation(int index);
 
private:
 
    QQuickWindow* mMainView;
    vector<TestStruct> mTestList;
};
 
#endif // CONNECTEVENT_H
 
 
 

 

 

 

#include "ConnectEvent.h"
 
ConnectEvent::ConnectEvent()
{
    cout << "ConnectEvent" << endl;
    setTestList();//생성자에서 호출해서 객체가 만들어 지자마자 데이터를 vector에 담는다.
    qmlRegisterType<ConnectEvent>("ConnectEvent", 1, 0, "ConnectEvent");//class를 qml에서 사용하기 위해서 등록해주는 부분
 
}
 
ConnectEvent::~ConnectEvent()
{
}
 
void ConnectEvent::setWindow(QQuickWindow* Window)
{
    mMainView = Window;//connection을 해주기 위해 윈도우를 등록
}
 
void ConnectEvent::setTestList()
{
    TestStruct testStruct;
    for(int i = 0; i < 10; i++){
        testStruct.title = "TestTitle" + QString::number(i);//int형 변수를 QString 형으로 형변환
        testStruct.ButtonText = "TestButton" + QString::number(i);
        testStruct.Infomation = "TestInfomation" + QString::number(i);
        mTestList.push_back(testStruct);
    }
 
}
 
int ConnectEvent::getListSize()//리스트의 크기를 가져오기 위함 함수
{
    return mTestList.size();
}
 
QString ConnectEvent::getListTitle(int index)//리스트 인덱스의 제목을 가져오기 위한 함수
{
    return mTestList.at(index).title;
}
 
QString ConnectEvent::getListButtonText(int index)//리스트 인덱스의 버튼 텍스트를 가져오기 위한 함수
{
    return mTestList.at(index).ButtonText;
}
 
QString ConnectEvent::getListInfomation(int index)//리스트 인덱스의 내부 정보를 가져오기 위한 함수
{
    return mTestList.at(index).Infomation;
}
 
 
 
 
 

 

 

main.qml

 

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")
    ConnectEvent//클래스를 qml 타입으로 지정
    {
        id:connectEvent
    }
 
    Component.onCompleted://view가 처음 실행될때 제일 처음으로 불려지는곳
    {
 
        for(var i = 0; i < connectEvent.getListSize(); i++){//리스트의 개수만큼 for문을 돌린다.
            listView.model.append({"list_text": connectEvent.getListTitle(i),//모델에 리스트의 데이터값을 넣어준다.
                                   "list_button_text": connectEvent.getListButtonText(i)})//listview에 선언한 임의의 모델 안에 데이터를 넣어준다.
        }
 
    }
 
    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:120
                   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
        }
 
 
}
 
 
 

 

 

위의 connect 헤더 파일과 같이 qml에서 함수를 직접 호출할수 있도록 Q_INVOKABLE 함수를 만들어주고 각 데이터

 

테스트로 만든 구조체에 맞게 리턴값을 지정해준다.

 

구조체는 리스트를 만들기위해서 만들었고 리스트의 제목과 리스트 버튼의 텍스트 그리고 리스트의 내부 내용을

 

넣어주기 위해서 아래와 같이 만들어 주었다. 

 

리스트를 클릭하면 리스트 네부의 내용을 볼수있는 화면으로 넘어가게 구현할 예정인데 이 부분은 다음 포스팅에서 

 

다루도록 하겠습니다.

struct TestStruct{
    QString title = "";
    QString ButtonText = "";
    QString Infomation = "";
};

void setTestList();
    Q_INVOKABLE int getListSize();
    Q_INVOKABLE QString getListTitle(int index);
    Q_INVOKABLE QString getListButtonText(int index);
    Q_INVOKABLE QString getListInfomation(int index);

 

 

그리고 리스트를 만들기위해서 데이터 타입이 TestStruct인 vector를 만들어주고 아래와 같이 테스트 데이터를 넣어

 

줍니다. 총 10개의 데이터들을 인덱스와 맞게 넣어주었습니다.

 

테스트 데이터는 앱이 실행과 동시에 설정이 되도록 생성자에서 테스트 데이터 넣는 함수를 넣어주었습니다.

 

void ConnectEvent::setTestList()
{
    TestStruct testStruct;
    for(int i = 0; i < 10; i++){
        testStruct.title = "TestTitle" + QString::number(i);//int형 변수를 QString 형으로 형변환
        testStruct.ButtonText = "TestButton" + QString::number(i);
        testStruct.Infomation = "TestInfomation" + QString::number(i);
        mTestList.push_back(testStruct);
    }
 
}

그리고 리스트의 크기를 가져오는 함수와 각 리스트 index의 값을 가져오기 위한 함수들을 만들어 줍니다.

 

각 함수에 index를 넣으면 index에 맞는 데이터들을 리턴하는 방식으로 구현을 했습니다.

 

int ConnectEvent::getListSize()//리스트의 크기를 가져오기 위함 함수
{
    return mTestList.size();
}
 
QString ConnectEvent::getListTitle(int index)//리스트 인덱스의 제목을 가져오기 위한 함수
{
    return mTestList.at(index).title;
}
 
QString ConnectEvent::getListButtonText(int index)//리스트 인덱스의 버튼 텍스트를 가져오기 위한 함수
{
    return mTestList.at(index).ButtonText;
}
 
QString ConnectEvent::getListInfomation(int index)//리스트 인덱스의 내부 정보를 가져오기 위한 함수
{
    return mTestList.at(index).Infomation;
}

그리고 지난 포스팅에서 설명 드렸던 c++클래스틑 qml타입으로 만들어 주고 그 클래스의 함수들을 

 

직접 호출해서 리스트를 동적으로 넣어서 리스트 뷰에 출력이 되도록 구현 하였습니다.

 

구현한 내용은 아래 소스와 같습니다.

 

Component.onCompleted://view가 처음 실행될때 제일 처음으로 불려지는곳
    {
 
        for(var i = 0; i < connectEvent.getListSize(); i++){//리스트의 개수만큼 for문을 돌린다.
            listView.model.append({"list_text": connectEvent.getListTitle(i),//모델에 리스트의 데이터값을 넣어준다.
                                   "list_button_text": connectEvent.getListButtonText(i)})//listview에 선언한 임의의 모델 안에 데이터를 넣어준다.
        }
 
    }

위으 소스코드처럼 c++에서 설정한 리스트 개수만큼 for문을 돌려서 그 리스의 데이터들을 리스트 모델에 넣어주고

 

이것을 리스트 뷰에서 출력을 시켜서 총리스트가 10개인 리스트를 만들었습니다. 

 

그렇다면 이렇게 리스트뷰를 동적으로 넣었지만 각 리스트를 클릭하거나 원하는 리스트 위치에서 엔터를 누르면

 

리스트의 상세내용을 보여주게는 어떻게 할까요?? 

 

이 부분은 mouseArea를 사용하고 다음 화면으로 넘어가기 위해서 stackView를 사용하면  되는데요.

 

이 내용은 다음 포스팅에서 다루도록 하겠습니다.

 

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