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 的样式表编辑器中实时调试。
相关推荐
serve the people14 分钟前
解决osx-arm64平台上conda默认源没有提供 python=3.7 的官方编译版本的问题
开发语言·python·conda
柒七爱吃麻辣烫41 分钟前
在Linux中安装JDK并且搭建Java环境
java·linux·开发语言
极小狐1 小时前
如何构建容器镜像并将其推送到极狐GitLab容器镜像库?
开发语言·数据库·机器学习·gitlab·ruby
多多*1 小时前
Java反射 八股版
java·开发语言·hive·python·sql·log4j·mybatis
正在走向自律1 小时前
从0到1:Python机器学习实战全攻略(8/10)
开发语言·python·机器学习
FY_20182 小时前
键盘输出希腊字符方法
开发语言
西西弗Sisyphus2 小时前
Python 处理图像并生成 JSONL 元数据文件 - 灵活text版本
开发语言·python
q567315233 小时前
Go语言多线程爬虫与代理IP反爬
开发语言·爬虫·tcp/ip·golang
Chandler243 小时前
Go语言即时通讯系统 开发日志day1
开发语言·后端·golang
强化学习与机器人控制仿真3 小时前
openpi 入门教程
开发语言·人工智能·python·深度学习·神经网络·机器人·自动驾驶