效果图
总结
使用了qtreewidget,之所以没有用qtreeview,是感觉控件数量不会多的太离谱,所以用qtreewidget来实现,比较方便。
树状结构要从column为1开始,则需要调用以下接口实现
// https://doc.qt.io/qt-6/qtreeview.html#setTreePosition
ui.treeWidget->setTreePosition(1);
节点前的复选框用的是自定义的控件,因为需要居中显示
// checkItem
const auto cb = new QCheckBox;
const auto layout = new QHBoxLayout;
layout->addWidget(cb);
layout->setAlignment(cb, Qt::AlignCenter);
setLayout(layout);
// set
ui.treeWidget->setItemWidget(treeItem, 0, checkItem);
树状结构的数据展示部分,将对应层级的节点放到一个map中,每次添加新节点的时候,先去集合中找是否有相同的,如果有相同的,则不添加,反之取出父节点,添加子节点
QMap<int, QList<QTreeWidgetItem*>> maps;
foreach(const auto & item, items_) {
// 分割路径
const auto result = item.split("/");
QTreeWidgetItem* lastTreeItem = nullptr;
for (int i = 0; i < result.size(); i++) {
const auto treeItem = new QTreeWidgetItem;
treeItem->setText(1, result[i]);
treeItem->setSizeHint(1, { 240, 30 });
// 从集合中找有没有相同层级的节点
const auto listIt = maps.find(i);
if (listIt == maps.end()) {
maps.insert(i, { treeItem });
if (i == 0) {
ui.treeWidget->addTopLevelItem(treeItem);
}
else {
lastTreeItem->addChild(treeItem);
}
// 记录当前节点,为下个节点的父节点,方便下一个节点添加
lastTreeItem = treeItem;
}
else {
bool exist = false;
// 最后一个元素为文件名,不需要合并
if (i != result.size() - 1) {
foreach(const auto & item, listIt.value()) {
if (item->text(1) == result[i]) {
lastTreeItem = item;
exist = true;
break;
}
}
}
if (!exist) {
listIt.value() << treeItem;
if (i == 0) {
ui.treeWidget->addTopLevelItem(treeItem);
}
else {
lastTreeItem->addChild(treeItem);
}
// 记录当前节点,为下个节点的父节点,方便下一个节点添加
lastTreeItem = treeItem;
}
}
}
}
一些qtreewidget的样式修改,例如branch和item
QTreeWidget{border:none;outline:none;padding-right:5px;padding-top:20px;}
QTreeWidget::branch{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#edeff2;}
QTreeWidget::item{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#edeff2;}
QTreeWidget::item:selected{color:#5b87ff;}
QTreeWidget::branch:closed:has-children:!has-siblings,QTreeWidget::branch:closed:has-children:has-siblings {border-image: none;image:url(xxx);}
QTreeWidget::branch:open:has-children:!has-siblings,QTreeWidget::branch:open:has-children:has-siblings {border-image: none;image: url(xxx);}
QHeaderView::section{background-color:#f2f3f7;border:none;border-right:1px solid #D5D6D9;font-size:12px;color:#657992;padding-left:5px;}
QHeaderView {padding-top:6px;padding-bottom:6px;border-radius:0px;}