Для тех кто попал на эту страницу случайно покажу то, что я собираюсь украшать:
Так как по сути это делается в несколько строк кода. Рассмотрю весь процесс создания данного приложения и его «украшательства».
Для начала подключим библиотеку 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);
Выглядит это примерно вот так:
Вот мой проект. Можете баловаться 😉