[C++,QT/Qml]19.Qml프로그래밍 동적 리스트 만들기5(리스트 삭제기능,listview Delete)

[C++,QT/Qml]19.Qml프로그래밍 동적 리스트 만들기5(리스트 삭제기능,listview Delete)

 

 

 

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

 

오늘은 리스트뷰의 삭제기능에 대해서 포스팅 하겠습니다.

 

오늘은 리스트뷰의 삭제를 위한 기본 로직들과 view자체에서 실시간으로 삭제가 가능하도록 구현해서 

 

리스트 뷰의 삭제에대한 기본 내용에 대해 살펴 보도록 하겠습니다.

 

오늘은 리스트뷰의 버튼을 클릭하면 리스트가 실시간으로 삭제되는 프로그램을 구현하고 그 내용으로 

 

설명 드리겠습니다.

 

아래코드로 설명 드리겠습니다.

 

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);
    Q_INVOKABLE void deleteListItem(int index);
 
private:
 
    QQuickWindow* mMainView;
    vector<TestStruct> mTestList;
};
 
#endif // CONNECTEVENT_H
 
 
 

 

 

connectEvent.cpp

 

#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;
}
 
void ConnectEvent::deleteListItem(int index)//c++ 리스트의 데이터를 삭제
{
    int count = 0;
    std::cout << "deleteListItem index:" << index << std::endl;
    std::cout << "deleteListItem ListInfomation:" << getListInfomation(index).toStdString() << std::endl;
    for(std::vector<TestStruct>::iterator it = mTestList.begin(); it != mTestList.end(); it++){
        if(count == index){
            it = mTestList.erase(it);
            break;
        }else{
            count++;
        }
    }
}
 
 
 
 
 
 
 

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
    property int mListClickIndex : 0//클릭한 리스트의 index를 담는 전역 변수
 
    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에 원하는 값을 넣기위해서 설정하는 값
            }
 
            Rectangle//리스트의 구분선
            {
                id:line
                width:parent.width
                anchors.bottom:parent.bottom//현재 객체의 아래 기준점을 부모객체의 아래로 잡아주어서 위치가 아래로가게 설정
                height:1
                color:"black"                
            }
            MouseArea
            {
                id:listMouseArea
                anchors.fill: parent
                onClicked:
                {
                    mListClickIndex = index;//여기에서 사용하는 index는 클릭했을때의 index를 리턴해준다
                    //그래서 현재 선택한 리스트를 전역변수에 담고 다음 화면에서 그에 해당하는 정보를 보여준다.
                    stackView.push(Qt.resolvedUrl("qrc:/listInfo.qml"))
 
                }
            }
            //버튼 객체를 mouseArea아래로 옮겼다 이유는 mouseArea가 부모의 영역을 포함하고 있는데
            //버튼 영역도 부모의 영역 안에 있기 때문에 버튼클릭시 버튼클릭이 아닌 리스트의 클릭이 되어 버린다.
            Button//리스트에 버튼을 넣어주기 위해 버튼 객체를 만들어준다.
            {
                id:listView_Button
                width:120
                height:40
                anchors.rightMargin: 30
                anchors.verticalCenter: parent.verticalCenter
                anchors.right: parent.right
                text: list_button_text//모델에 매칭이될 변수 listview에 원하는 값을 넣기위해서 설정하는 값
                onClicked:
                {
                    connectEvent.deleteListItem(index);//c++ 리스트의 데이터를 삭제
                    listView.model.remove(index);//리스트의 모델에 삭제하는 함수(실시간 삭제)
 
                }
            }
 
        }
    }
    StackView{
        id:stackView
        anchors.fill: parent
 
 
        initialItem: Item  //제일 첫화면을 설정하는 것으로 설정을 안하면 되돌아오기가 안된다.
        {
            ListView {
                id:listView
                anchors.fill: parent
                model: ListModel{}//임으로 만들 모델을 넣어준다.
                delegate: contactDelegate//delegate란 리스트 한개의 틀(틀을 하나 만들어서 그것들을 여러개 붙여놓은것이 리스트 뷰이다.)
                highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
                focus: true
            }
        }
    }
 
}
 
 
 

 

실행결과 동영상

실행결과 로그

 

일단 리스트 뷰의 버튼을 클릭하면 리스트가 삭제되는 기능을 구현하기 위해서 listdelegate 안의 버튼 객체에

 

onclick이벤트를 넣어주어서 버튼을 클릭하면 리스트뷰의 삭제가 가능하도록 구현 해줍니다.

 

onclick이벤트가 발생하면 리스트의 index에 맞는 model을 삭제하고 cpp코드 안에서 추가해준 리스트들을 삭제를 해서

 

view에서 보여지는 리스트와 실제 가지고 있는 리스트의 데이터들을 똑같이 맞추어 줍니다.

 

코드는 아래와 같습니다.

 

Button//리스트에 버튼을 넣어주기 위해 버튼 객체를 만들어준다.
            {
                id:listView_Button
                width:120
                height:40
                anchors.rightMargin: 30
                anchors.verticalCenter: parent.verticalCenter
                anchors.right: parent.right
                text: list_button_text//모델에 매칭이될 변수 listview에 원하는 값을 넣기위해서 설정하는 값
                onClicked:
                {
                    connectEvent.deleteListItem(index);//c++ 리스트의 데이터를 삭제
                    listView.model.remove(index);//리스트의 모델에 삭제하는 함수(실시간 삭제)
 
                }
            }

 

 

그리고 c++코드 상에서 리스트의 실제 데이터들을 삭제하는 로직을 구현해 줍니다.

 

index를 받으면 그에 따른 리스트를 지우도록 구현해 줍니다.

 

void ConnectEvent::deleteListItem(int index)//c++ 리스트의 데이터를 삭제
{
    int count = 0;
    std::cout << "deleteListItem index:" << index << std::endl;
    std::cout << "deleteListItem ListInfomation:" << getListInfomation(index).toStdString() << std::endl;
    for(std::vector<TestStruct>::iterator it = mTestList.begin(); it != mTestList.end(); it++){
        if(count == index){
            it = mTestList.erase(it);
            break;
        }else{
            count++;
        }
    }
}

 

위처럼 vector의 반복자를 이용해서 각 원소들을 접근하고 for문을 돌려서 index와 리스트의 index가 같은 값을

 

삭제하는 로직을 구현 했습니다. vector erase가 되면 지워진 원소위치에 다음 원소의 위치로 변하기 때문에

 

다음 원소의 index가 4이고 지워진 원소의 index가 3이면 다음 원소의 index가 3으로 되어 버립니다.

 

그래서 실시간으로 리스트를 지워도 리스트는 연결 리스트 처럼 되기때문에 뒤의 index가 변하되어 잘 동작하게 

 

됩니다.

 

이처럼 리스트 삭제에 대한 기본 기능에 대해서 알아 보았습니다.

 

여기까지 구현하고 체크박스로 체크하는 부분만 추가해서 위와같이 삭제를 하면 체크박를 이용해서 리스트의 삭제가

 

가능한 프로그램이 완성이 되는데요

 

이 체크박스로 리스트를 삭제하는 내용은 다음 포스팅에 작성하도록 하겠습니다.

 

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