Оформляем дерево элементов в Qt

Для тех кто попал на эту страницу случайно покажу то, что я собираюсь украшать:

Так как по сути это делается в несколько строк кода. Рассмотрю весь процесс создания данного приложения и его «украшательства».
Для начала подключим библиотеку QtGui:

#include <QtGui>

И в функции main приступим к созданию приложения.
Создадим главный объект приложения:

QApplication app(argc,argv);
Объявим QTreeWidget и QStringList для хранения названия колонок:
QTreeWidget twg;
QStringList lst;

Поместим в объявленную переменную названия колонок:

lst << "Folders" << "Used Space";

Теперь «установим» названия в колонки:

twg.setHeaderLabels(lst);

Для включения возможности сортировки в какой либо колонке:

twg.setSortingEnabled(true);

Теперь создадим элемент дерева:

QTreeWidgetItem *ptwgItem = new QTreeWidgetItem(&twg);

И установим его текст:

ptwgItem->setText(0,"Local Disk(C)");

Первый параметр setText() — номер колонки (самая левая — нулевая). Теперь к этому элементу добавим 10 дочерних:

    QTreeWidgetItem *ptwgItemDir = 0;
for (int i=0;i<10;++i) {
      ptwgItemDir = new QTreeWidgetItem(ptwgItem);
      ptwgItemDir->setText(0, "Directory" + QString::number(i));
      ptwgItemDir->setText(1,QString::number(i) + "MB");
}

Установим размер виджета:

twg.resize(250,300);

Выведем его на экран:

twg.show();

Ну и последняя строка:

return app.exec();

Скомпилируйте и запустите ваше приложение и вы увидите что-то вроде скрина выше.
Теперь приступим к украшательству.
Прежде всего можно установить иконки для элементов:

ptwgItem->setIcon(0, QPixmap("drive.bmp"));
ptwgItemDir->setIcon(0,QPixmap("folder.bmp"));

При это мы используем изображения drive.bmp и folder.bmp из корневой папки проекта.
Кроме этого можно изменить иконки скрытия/открытия дочерних элементов (Expand/Collapse). Сделать это проще всего при помощи CSS стилей.

twg.setStyleSheet("QTreeWidget::branch:has-children {image: url(rightarrow.png)}QTreeWidget::branch:open {image: url(downarrow.png)}");

Параметром является стиль:

QTreeWidget::branch:has-children {
     image: url(rightarrow.png)
}
QTreeWidget::branch:open {
     image: url(downarrow.png)
}

Мы используем иконку rightarrow.png для свёрнутых элементов которые имеют дочерние и downarrow.png для развёрнутых.
Ну и напоследок добавим анимационный эффект разворачивания списка:

twg.setAnimated(true);

Выглядит это примерно вот так:

Вот мой проект. Можете баловаться 😉