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 的样式表编辑器中实时调试。
相关推荐
lqj_本人3 小时前
WinPcap 鸿蒙 PC 适配全记录:从 NPF 原始抓包到 VPN_TUN 与 libpcap 双通路
qt·华为·harmonyos
言乐64 小时前
Python加速器4跨境网络加速器
运维·服务器·开发语言·网络·python
金金计较.5 小时前
Go语言-3
java·开发语言·golang
张小凡vip6 小时前
python--爬虫--经验积累的遇到的坑
开发语言·爬虫·python
Quz6 小时前
QML StackView:三种入栈方式(Item、Component 与 URL)
qt
Wang's Blog6 小时前
Java框架快速入门: Spring Security+OAuth2之云服务集成与多因子认证设计
java·开发语言·spring
Quz6 小时前
QML StackView:入栈、出栈、替换与批量操作
qt
门思科技6 小时前
LoRaWAN 网络容量估算:一个 SX1302 网关到底能带多少设备
开发语言·网络·php
大草原的小灰灰7 小时前
Python基础语法
开发语言·python
泡泡鱼(敲代码中)8 小时前
MySQL基础学习笔记:从数据模型到DDL全掌握
开发语言·数据库·笔记·学习·mysql