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 的样式表编辑器中实时调试。
相关推荐
Felix_One21 小时前
Qt 串口通信避坑指南:QSerialPort 的 5 个常见问题
qt
blasit4 天前
笔记:Qt C++建立子线程做一个socket TCP常连接通信
c++·qt·tcp/ip
郑州光合科技余经理9 天前
代码展示:PHP搭建海外版外卖系统源码解析
java·开发语言·前端·后端·系统架构·uni-app·php
feifeigo1239 天前
matlab画图工具
开发语言·matlab
dustcell.9 天前
haproxy七层代理
java·开发语言·前端
norlan_jame9 天前
C-PHY与D-PHY差异
c语言·开发语言
多恩Stone9 天前
【C++入门扫盲1】C++ 与 Python:类型、编译器/解释器与 CPU 的关系
开发语言·c++·人工智能·python·算法·3d·aigc
QQ4022054969 天前
Python+django+vue3预制菜半成品配菜平台
开发语言·python·django
遥遥江上月9 天前
Node.js + Stagehand + Python 部署
开发语言·python·node.js
m0_531237179 天前
C语言-数组练习进阶
c语言·开发语言·算法