인생 코딩

QTreeWidget의 기본 동작을 살펴보는 예제이다.

- QTreeWidget에 데이터를 추가/수정/삭제하고,

- 현재 선택된 데이터의 값을 보여주고,

- 선택된 데이터의 행 위치를 옮긴다.(위로 올리거나 내림)

※ 데이터를 외부 데이터 소스(파일 등)에서 읽어오거나, 저장하는 기능은 생략하였다.

부분 소스코드 살펴보기

UI는 QtDesigner로 만들고, 각 버튼 클릭 시 slot을 연결해 주었다.

헤더 설정

    QStringList headers;
    headers << tr("Col 1") << tr("Col 2");
    ui->treeWidget->setHeaderLabels(headers);

최상위 데이터 추가

col 1, col 2의 lineEdit에 입력한 값을 최상위 레벨에 추가해 준다.

    QTreeWidgetItem *parent = new QTreeWidgetItem(ui->treeWidget);
    parent->setText(0, ui->lineEditCol1->text());
    parent->setText(1, ui->lineEditCol2->text());

하위 데이터 추가

col 1, col 2의 lineEdit에 입력한 값을, 선택된 부모의 자식으로 추가해 준다.

    // QTreeWidget은 SingleSelection만 허용하도록 설정해놓았음
    QList<QTreeWidgetItem*> parent = ui->treeWidget->selectedItems();
    if (parent.size() > 0) {
        QTreeWidgetItem *child = new QTreeWidgetItem(parent[0]);
        child->setText(0, ui->lineEditCol1->text());
        child->setText(1, ui->lineEditCol2->text());
        child->setFlags(Qt::ItemIsEnabled | Qt::ItemIsEditable | Qt::ItemIsSelectable);
        parent[0]->setExpanded(true);
    }
    else {
        QMessageBox::information(this, tr("Info"), tr("Please select the parent item"), QMessageBox::Ok);
    }

데이터 삭제

선택된 아이템을 삭제한다. (선택된 아이템 하위에 자식이 있는 경우, 자식도 모두 삭제됨)

    QTreeWidgetItem *item = ui->treeWidget->currentItem();
    int index;
    if (item) {
        QTreeWidgetItem *parent = item->parent();
        if (parent) { // 하위 아이템 삭제
            index = parent->indexOfChild(item);
            delete parent->takeChild(index);
        }
        else {  // 최상위 레벨 아이템 삭제
            index = ui->treeWidget->indexOfTopLevelItem(item);
            delete ui->treeWidget->takeTopLevelItem(index);
        }
    }
    else {
        QMessageBox::information(this, tr("Info"), tr("Please select the item"), QMessageBox::Ok);
    }

데이터 수정

아이템에 Qt::ItemIsEditable 플래그를 설정해주면, 해당 아이템을 더블 클릭 시 수정 가능하게 된다.

child->setFlags(Qt::ItemIsEnabled | Qt::ItemIsEditable | Qt::ItemIsSelectable);

클릭한 데이터 정보 보기

itemClicked 시그널이 발생하면, 클릭한 아이템 정보를 보여주는 slot 함수를 호출하도록 한다.

connect(ui->treeWidget, &QTreeWidget::itemClicked, this, &TreeDialog::on_itemClicked);

on_itemClicked 함수

void TreeDialog::on_itemClicked(QTreeWidgetItem *item, int column)
{
    displayCurrentItem(item, column);
}

displayCurrentItem 함수

void TreeDialog::displayCurrentItem(QTreeWidgetItem *item, int column)
{
    if (item) {
        ui->labelCurrentItem->setText(item->data(column, Qt::DisplayRole).toString());
    }
}

클릭한 데이터 행을 위/아래로 옮기기

아이템 클릭 후, Up 또는 Down 버튼을 누르면, 해당 아이템을 위로 올리거나 아래로 내린다.

enum Direction {
    Up = -1,
    Down = 1
};

void TreeDialog::on_pushButtonUp_clicked()
{
    moveItem(Direction::Up);
}

void TreeDialog::on_pushButtonDown_clicked()
{
    moveItem(Direction::Down);
}

void TreeDialog::moveItem(Direction direction)
{
    QTreeWidgetItem *item = ui->treeWidget->currentItem();
    if (!item)
        return;

    int row = ui->treeWidget->currentIndex().row();
    if ((direction == Direction::Up) && (row <= 0)) // 더 이상 올라갈 곳이 없음
        return;

    int lastRow = 0;
    QTreeWidgetItem *parent = item->parent();
    if (parent)
        lastRow = parent->childCount() -1;
    else
        lastRow = ui->treeWidget->topLevelItemCount() - 1;
    if ((direction == Direction::Down) && (row == lastRow)) // 더 이상 내려갈 곳이 없음
        return;

    int upDownIdx = static_cast<int>(direction);
    int index;
    if (parent) { // 하위 아이템의 경우
        index = parent->indexOfChild(item);
        QTreeWidgetItem *child = parent->takeChild(index); // 선택된 아이템을 부모에서 분리하고
        parent->insertChild(index + upDownIdx, child);  // 옮긴 위치에 다시 insert 한다
        ui->treeWidget->setCurrentItem(child);
        parent->setExpanded(true);
        child->setExpanded(true);
    }
    else { // 최상위 레벨 아이템의 경우
        index = ui->treeWidget->indexOfTopLevelItem(item);
        QTreeWidgetItem *child = ui->treeWidget->takeTopLevelItem(index); // 선택된 아이템을 부모에서 분리하고
        ui->treeWidget->insertTopLevelItem(index + upDownIdx, child); // 옮긴 위치에 다시 insert 한다
        ui->treeWidget->setCurrentItem(child);
        child->setExpanded(true);
    }
}

전체 소스코드

treedialog.h

#ifndef TREEDIALOG_H
#define TREEDIALOG_H

#include <QDialog>
#include <QTreeWidgetItem>


enum Direction {
    Up = -1,
    Down = 1
};

namespace Ui {
class TreeDialog;
}

class TreeDialog : public QDialog
{
    Q_OBJECT

public:
    explicit TreeDialog(QWidget *parent = nullptr);
    ~TreeDialog();
    void moveItem(Direction direction);
    void displayCurrentItem(QTreeWidgetItem *item, int column);

private slots:
    void on_pushButtonAddParent_clicked();
    void on_pushButtonAddChild_clicked();
    void on_pushButtonDel_clicked();
    void on_pushButtonUp_clicked();
    void on_pushButtonDown_clicked();
    void on_itemClicked(QTreeWidgetItem *item, int column);

private:
    Ui::TreeDialog *ui;
};

#endif // TREEDIALOG_H

treedialog.cpp

#include "treedialog.h"
#include "ui_treedialog.h"
#include <QMessageBox>

TreeDialog::TreeDialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::TreeDialog)
{
    ui->setupUi(this);

    ui->treeWidget->setColumnCount(2);  // QTreeWidget을 열을 2개로 설정

    // 헤더 설정
    QStringList headers;
    headers << tr("Col 1") << tr("Col 2");
    ui->treeWidget->setHeaderLabels(headers);

    // 데이터(아이템) 추가
    QTreeWidgetItem *cities = new QTreeWidgetItem(ui->treeWidget);  // 첫번째 부모
    cities->setText(0, tr("Cities"));
    cities->setText(1, tr(" - "));

    QTreeWidgetItem *osloItem = new QTreeWidgetItem(cities);        // 첫번째 부모의 첫번째 자식(row 1)
    osloItem->setText(0, tr("Oslo"));
    osloItem->setText(1, tr("No"));
    QTreeWidgetItem *seoulItem = new QTreeWidgetItem(cities);       // 첫번째 부모의 두번째 자식(row 2)
    seoulItem->setText(0, tr("Seoul"));
    seoulItem->setText(1, tr("Yes"));
    cities->setExpanded(true);

    QTreeWidgetItem *colors = new QTreeWidgetItem(ui->treeWidget);  // 두번째 부모
    colors->setText(0, tr("Colors"));
    // 아이템을 수정 가능하게 함 - ItemIsEditable 플래그를 설정해주면 아이템을 더블 클릭시 수정 가능해짐
    colors->setFlags(Qt::ItemIsEnabled | Qt::ItemIsEditable | Qt::ItemIsSelectable);
    QTreeWidgetItem *redItem = new QTreeWidgetItem(colors);         // 두번째 부모의 첫번째 자식(row 1)
    redItem->setText(0, tr("Red"));
    redItem->setText(1, tr("1"));
    redItem->setFlags(Qt::ItemIsEnabled | Qt::ItemIsEditable | Qt::ItemIsSelectable);
    QTreeWidgetItem *yellowItem = new QTreeWidgetItem(colors);      // 두번째 부모의 두번째 자식(row 1)
    yellowItem->setText(0, tr("Yellow"));
    yellowItem->setText(1, tr("2"));
    yellowItem->setFlags(Qt::ItemIsEnabled | Qt::ItemIsEditable | Qt::ItemIsSelectable);
    yellowItem->setHidden(true);    // 아이템을 숨김(화면에 표시 안함)
    QTreeWidgetItem *greenItem = new QTreeWidgetItem(colors);         // 두번째 부모의 첫번째 자식(row 1)
    greenItem->setText(0, tr("Green"));
    greenItem->setText(1, tr("1"));
    greenItem->setFlags(Qt::ItemIsEnabled | Qt::ItemIsEditable | Qt::ItemIsSelectable);
    colors->setExpanded(true);

    connect(ui->treeWidget, &QTreeWidget::itemClicked, this, &TreeDialog::on_itemClicked);
//    ui->treeWidget->setSortingEnabled(true);    // 헤더 클릭 시 오름/내림차순 정렬되게 함

    displayCurrentItem(ui->treeWidget->currentItem(), 0);

}

TreeDialog::~TreeDialog()
{
    delete ui;
}

void TreeDialog::on_pushButtonAddParent_clicked()
{
    // 최상위 아이템을 추가함
    QTreeWidgetItem *parent = new QTreeWidgetItem(ui->treeWidget);
    parent->setText(0, ui->lineEditCol1->text());
    parent->setText(1, ui->lineEditCol2->text());
}

void TreeDialog::on_pushButtonAddChild_clicked()
{
    // 선택된 아이템 하위에 데이터를 추가함
    // QTreeWidget은 SingleSelection만 허용하도록 설정해놓았음
    QList<QTreeWidgetItem*> parent = ui->treeWidget->selectedItems();
    if (parent.size() > 0) {
        QTreeWidgetItem *child = new QTreeWidgetItem(parent[0]);
        child->setText(0, ui->lineEditCol1->text());
        child->setText(1, ui->lineEditCol2->text());
        child->setFlags(Qt::ItemIsEnabled | Qt::ItemIsEditable | Qt::ItemIsSelectable);
        parent[0]->setExpanded(true);
    }
    else {
        QMessageBox::information(this, tr("Info"), tr("Please select the parent item"), QMessageBox::Ok);
    }
}

void TreeDialog::on_pushButtonDel_clicked()
{
    QTreeWidgetItem *item = ui->treeWidget->currentItem();
    int index;
    if (item) {
        QTreeWidgetItem *parent = item->parent();
        if (parent) { // 하위 아이템 삭제
            index = parent->indexOfChild(item);
            delete parent->takeChild(index);
        }
        else {  // 최상위 레벨 아이템 삭제
            index = ui->treeWidget->indexOfTopLevelItem(item);
            delete ui->treeWidget->takeTopLevelItem(index);
        }
    }
    else {
        QMessageBox::information(this, tr("Info"), tr("Please select the item"), QMessageBox::Ok);
    }
}

void TreeDialog::on_pushButtonUp_clicked()
{
    moveItem(Direction::Up);
}

void TreeDialog::on_pushButtonDown_clicked()
{
    moveItem(Direction::Down);
}

void TreeDialog::on_itemClicked(QTreeWidgetItem *item, int column)
{
    displayCurrentItem(item, column);
}

void TreeDialog::moveItem(Direction direction)
{
    QTreeWidgetItem *item = ui->treeWidget->currentItem();
    if (!item)
        return;

    int row = ui->treeWidget->currentIndex().row();
    if ((direction == Direction::Up) && (row <= 0)) // 더 이상 올라갈 곳이 없음
        return;

    int lastRow = 0;
    QTreeWidgetItem *parent = item->parent();
    if (parent)
        lastRow = parent->childCount() -1;
    else
        lastRow = ui->treeWidget->topLevelItemCount() - 1;
    if ((direction == Direction::Down) && (row == lastRow)) // 더 이상 내려갈 곳이 없음
        return;

    int upDownIdx = static_cast<int>(direction);
    int index;
    if (parent) { // 하위 아이템의 경우
        index = parent->indexOfChild(item);
        QTreeWidgetItem *child = parent->takeChild(index); // 선택된 아이템을 부모에서 분리하고
        parent->insertChild(index + upDownIdx, child);  // 옮긴 위치에 다시 insert 한다
        ui->treeWidget->setCurrentItem(child);
        parent->setExpanded(true);
        child->setExpanded(true);
    }
    else { // 최상위 레벨 아이템의 경우
        index = ui->treeWidget->indexOfTopLevelItem(item);
        QTreeWidgetItem *child = ui->treeWidget->takeTopLevelItem(index); // 선택된 아이템을 부모에서 분리하고
        ui->treeWidget->insertTopLevelItem(index + upDownIdx, child); // 옮긴 위치에 다시 insert 한다
        ui->treeWidget->setCurrentItem(child);
        child->setExpanded(true);
    }
}

void TreeDialog::displayCurrentItem(QTreeWidgetItem *item, int column)
{
    if (item) {
        ui->labelCurrentItem->setText(item->data(column, Qt::DisplayRole).toString());
    }
}

main.cpp

#include "treedialog.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    TreeDialog w;
    w.show();
    return a.exec();
}

소스 코드 첨부

어플리케이션을 개발하다 보면 Tree 구조 형태의 데이터를 보여주어야 하는 일들이 있다. (예 : 파일 탐색기 등)

Qt에서는 이러한 Tree 구조 데이터를 보여줄 수 있는 수단으로 QTreeWidget과 QTreeView라는 클래스를 제공한다.

그럼 이 둘의 차이점은 무엇이고, 언제 어떤 클래스를 사용해야 할까?

QTreeWidget과 QTreeView의 차이점

가장 큰 차이는, 데이터가 어디에 저장되는가와 데이터와 뷰의 분리가 가능한가 이다.

QTreeWidget은,

Qt 초기 버전에서 사용되던 클래스로, 데이터가 위젯 내에 존재한다. 사용자는 위젯 내에 존재하는 데이터에 대해 검색과 편집을 수행하고, 어느 시점엔가 변경된 내용을 원본 데이터에 기록하곤 했다.

• 장점: 이 방식은 이해와 사용이 간단하다.
• 단점: 크기가 큰 데이터 집합은 위젯 내에 데이터를 모두 보유하기 부담스러워지기 시작했고, 동일한 데이터를 둘 이상의 서로 다른 위젯에 출력하고자 하는 상황에는 적합하지 않았다. (같은 데이터를 동시에 두 화면 - 트리 형태로 보여주는 화면과, 테이블 형태로 보여주는 화면 - 에 보여주려고 하면 힘들었다. 데이터가 위젯에 각각 저장되어 있기 때문에 어느 한쪽에서 변경 시 두 화면 사이의 싱크를 맞춰주기가 힘들었음)

QTreeView는,

이러한 QTreeWidget의 단점을 보완하기 위해 만들어진 클래스로, MVC 패턴에서 영감을 받은 모델/뷰 아키텍처의 '뷰' 부분이다. 쉽게 말하면 데이터를 다루는 모델 부분과, 데이터를 화면에 출력하는 뷰 부분을 분리하여 운영하는 것이다.

데이터는 '모델 클래스' 한 곳에서 관리하고, 이 모델에 연결된 여러개의 '뷰 클래스'를 만듦으로써 동일한 데이터를 여러 화면에서 보여주는 것을 가능하게 했다. 따라서 '모델'에서만 데이터를 변경 하면, 여러개의 '뷰'에 동시에 반영이 될 수 있게 된 것이다.

또한, 모델에 아무리 큰 집합의 데이터가 있어도, 각 뷰에서는 자신이 보여줄 부분의 데이터만 가져와서 보여주면 되어 뷰의 성능이 획기적으로 향상되게 된다.

이러한 개념은 QListWidget과 QListView, QTableWidget과 QTableView에도 동일하게 적용된다. (각각 보여지는 형태가 리스트 형태인지, 테이블 형태인지만 달라질 뿐이다.)

QListWidget과 QTableWidget은 데이터를 위젯 내에 저장하고 / QListView와 QTableView는 데이터가 저장된 모델에 연동되어 화면을 보여줄 수 있는 뷰 클래스이다.

언제 어떤 클래스를 사용해야 할까?

QTreeWidget (또는 QListWidget, QTableWidget) 을 사용하는 경우

데이터 집합이 작고, 동시에 여러군데서 보여질 필요 없이, 간단히 구현이 필요할 때 사용한다.

데이터 저장/변경/화면에 표시가 하나의 위젯에서 이루어지므로 QTreeView에 비해 상대적으로 구현이 간단하다.

QTreeView (또는 QListView, QTableView) 를 사용하는 경우

QTreeWidget과 반대로, 데이터 집합이 큰 경우, 같은 데이터를 동시에 여러 뷰에서 보여주어야 하는 경우에 적합하다.

(개발 시 데이터를 다루는 '모델' 클래스를 만들고, 뷰와 연동시켜야 한다.)

델리게이트라는 개념을 통해 데이터가 View에서 보여지는 형태를 조금 더 세밀히 조정할 수도 있다.

어느 쪽이든 본인이 개발하는 소프트웨어에 가장 적합한 것을 선택하는 것이 현명한 방법이다.

다음번 포스팅에서는 QTreeWidget을 사용하는 방법에 대해 알아보도록 하겠다.

참고 : Qt4를 이용한 C++GUI 프로그래밍 제2판