Qt的QTreeWidget样式设置

在Qt中,可以通过样式表(QSS)对 QTreeWidget 进行详细的样式定制。以下是一些常见的样式设置方法,涵盖背景、边框、项样式、展开图标等:


1. 基本语法

通过 setStyleSheet 设置样式:

cpp 复制代码
treeWidget->setStyleSheet("QTreeWidget { 背景样式 } QTreeWidget::item { 项样式 }");

2. 整体控件样式

设置 QTreeWidget 的整体背景、边框等:

css 复制代码
QTreeWidget {
    background: #f0f0f0;    /* 背景色 */
    border: 1px solid #ccc;  /* 边框 */
    border-radius: 4px;      /* 圆角 */
    margin: 2px;            /* 外边距 */
}

3. 项的样式(QTreeWidget::item)

设置项的默认、选中、悬停状态:

css 复制代码
QTreeWidget::item {
    height: 25px;           /* 项高度 */
    padding: 2px;           /* 内边距 */
    border: 1px solid transparent; /* 透明边框占位 */
}

/* 鼠标悬停 */
QTreeWidget::item:hover {
    background: #e0e0e0;
    border: 1px solid #a0a0a0;
}

/* 选中状态 */
QTreeWidget::item:selected {
    background: #0078d4;     /* 选中背景色 */
    color: white;            /* 选中文字颜色 */
    border: 1px solid #005999;
}

4. 分支图标(展开/折叠按钮)

自定义分支图标:

css 复制代码
QTreeWidget::branch {
    background: transparent; /* 分支背景透明 */
}

QTreeWidget::branch:closed:has-children {
    image: url(:/icons/closed.png); /* 折叠时的图标 */
}

QTreeWidget::branch:open:has-children {
    image: url(:/icons/open.png);   /* 展开时的图标 */
}

5. 标题栏样式(Header)

设置表头样式:

css 复制代码
QHeaderView::section {
    background: #0078d4;    /* 表头背景色 */
    color: white;           /* 文字颜色 */
    padding: 4px;
    border: 1px solid #005999;
}

6. 自定义项的子控件

例如,为项添加图标间距:

css 复制代码
QTreeWidget::item {
    margin: 3px;            /* 项的外边距 */
}

QTreeWidget::item:has-children {
    font-weight: bold;      /* 有子项的项加粗 */
}

7. 禁用交替行颜色

默认交替行颜色可能干扰样式:

cpp 复制代码
treeWidget->setAlternatingRowColors(false); // 关闭交替颜色

8. 示例:完整样式表

css 复制代码
QTreeWidget {
    background: #ffffff;
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    margin-top: 5px;
}

QTreeWidget::item {
    height: 28px;
    padding: 2px 5px;
    border: 1px solid transparent;
}

QTreeWidget::item:hover {
    background: #e6f3ff;
    border: 1px solid #cce0ff;
}

QTreeWidget::item:selected {
    background: #0078d4;
    color: white;
}

QTreeWidget::branch:open:has-children {
    image: url(:/icons/arrow_down.png);
}

QTreeWidget::branch:closed:has-children {
    image: url(:/icons/arrow_right.png);
}

QHeaderView::section {
    background: #f8f8f8;
    padding: 4px;
    border: none;
    border-bottom: 2px solid #0078d4;
}

9. 注意事项

  • 使用 has-children 伪状态来定位有子项的项。
  • 如果样式不生效,检查父控件是否覆盖了样式(如 QMainWindow 的背景色)。
  • 复杂样式建议在 Qt Designer 的样式表编辑器中实时调试。
相关推荐
鹿野素材屋2 小时前
C#中对于List的多种排序方式
开发语言·c#
whxnchy2 小时前
C++刷题 - 7.27
开发语言·c++
白日梦想家-K2 小时前
题单【模拟与高精度】
开发语言·c++·算法
鹦鹉0072 小时前
IO流中的字节流
java·开发语言·后端
重生之我是Java开发战士3 小时前
【C语言】内存函数与数据在内存中的存储
c语言·开发语言·算法
haaaaaaarry3 小时前
Element Plus常见基础组件(二)
开发语言·前端·javascript
AI_RSER3 小时前
第一篇:【Python-geemap教程(三)上】3D地形渲染与Landsat NDVI计算
开发语言·python·3d·信息可视化·遥感·gee
WSSWWWSSW3 小时前
Python编程基础与实践:Python循环结构基础
开发语言·python
极客BIM工作室3 小时前
深入理解C++中的Lazy Evaluation:延迟计算的艺术
开发语言·c++
im_AMBER4 小时前
学习日志25 python
开发语言·python·学习