213 lines
4.4 KiB
Markdown
213 lines
4.4 KiB
Markdown
# HIS-GUI 自定义UI样式系统
|
|
|
|
本目录包含HIS-GUI项目的自定义UI样式文件,提供美观的医疗系统界面风格。
|
|
|
|
## 文件结构
|
|
|
|
```
|
|
template/
|
|
├── README.md # 本说明文件
|
|
├── his_theme.qss # 完整QSS样式表文件(医疗蓝主题)
|
|
├── style_manager.h # 样式管理器头文件
|
|
└── style_manager.cpp # 样式管理器实现
|
|
```
|
|
|
|
## 快速开始
|
|
|
|
### 方式1: 使用代码中的主题(推荐)
|
|
|
|
在 `main_gui.cpp` 中:
|
|
|
|
```cpp
|
|
#include "template/style_manager.h"
|
|
|
|
int main(int argc, char* argv[]) {
|
|
QApplication app(argc, argv);
|
|
|
|
// 应用医疗蓝主题
|
|
HisStyleManager::applyTheme(HisStyleManager::ThemeType::MedicalBlue);
|
|
|
|
// 或者使用其他主题:
|
|
// HisStyleManager::ThemeType::ModernDark
|
|
// HisStyleManager::ThemeType::LightClean
|
|
// HisStyleManager::ThemeType::HealthcareGreen
|
|
|
|
// ...
|
|
}
|
|
```
|
|
|
|
### 方式2: 从QSS文件加载
|
|
|
|
```cpp
|
|
#include "template/style_manager.h"
|
|
|
|
int main(int argc, char* argv[]) {
|
|
QApplication app(argc, argv);
|
|
|
|
// 加载QSS文件
|
|
HisStyleManager::applyStyle("gui/template/his_theme.qss");
|
|
|
|
// ...
|
|
}
|
|
```
|
|
|
|
## 可用主题
|
|
|
|
### 1. MedicalBlue (医疗蓝主题) - 默认
|
|
专业医疗蓝色调,适合医院信息系统
|
|
- 主色: #1e3a5f (深海蓝)
|
|
- 强调色: #3498db (明亮蓝)
|
|
- 文字色: #333333
|
|
|
|
### 2. ModernDark (现代深色主题)
|
|
现代深色界面,减少视觉疲劳
|
|
- 主色: #1e1e1e (深灰黑)
|
|
- 强调色: #007acc (科技蓝)
|
|
|
|
### 3. LightClean (简洁浅色主题)
|
|
简洁清爽的浅色设计
|
|
- 主色: #fafafa (纯白)
|
|
- 强调色: #4a90e2 (天空蓝)
|
|
|
|
### 4. HealthcareGreen (医疗绿主题)
|
|
温和的绿色医疗主题
|
|
- 主色: #2d5a4a (深绿)
|
|
- 强调色: #4caf50 (活力绿)
|
|
|
|
## 自定义样式类
|
|
|
|
在 `his_theme.qss` 中定义了几种按钮样式类:
|
|
|
|
```cpp
|
|
// 主要操作按钮
|
|
button->setProperty("class", "primary");
|
|
|
|
// 次要操作按钮
|
|
button->setProperty("class", "secondary");
|
|
|
|
// 成功操作按钮
|
|
button->setProperty("class", "success");
|
|
|
|
// 警告操作按钮
|
|
button->setProperty("class", "warning");
|
|
|
|
// 危险操作按钮(删除等)
|
|
button->setProperty("class", "danger");
|
|
```
|
|
|
|
## 自定义属性
|
|
|
|
### 标签属性
|
|
```cpp
|
|
// 标题标签
|
|
label->setProperty("heading", true);
|
|
|
|
// 副标题标签
|
|
label->setProperty("subheading", true);
|
|
```
|
|
|
|
## QSS文件结构
|
|
|
|
`his_theme.qss` 包含以下样式部分:
|
|
|
|
1. 全局样式 (Global)
|
|
2. 菜单栏 (MenuBar)
|
|
3. 工具栏 (ToolBar)
|
|
4. 侧边导航栏 (Navigation)
|
|
5. 按钮 (PushButton)
|
|
6. 输入框 (LineEdit, TextEdit)
|
|
7. 下拉框 (ComboBox)
|
|
8. 表格 (TableWidget)
|
|
9. 树形控件 (TreeWidget)
|
|
10. 标签页 (TabWidget)
|
|
11. 组框 (GroupBox)
|
|
12. 滚动条 (ScrollBar)
|
|
13. 进度条 (ProgressBar)
|
|
14. 复选框/单选框 (Checkbox/RadioButton)
|
|
|
|
## 样式优先级
|
|
|
|
QSS中的样式优先级(从高到低):
|
|
1. `!important` 标记
|
|
2. 内联样式 (通过 `setStyleSheet`)
|
|
3. 对象属性选择器 `[property="value"]`
|
|
4. 类选择器 `.className`
|
|
5. 伪状态选择器 `:hover`, `:pressed`
|
|
6. 子控件选择器 `::subcontrol`
|
|
7. ID选择器 `#objectName`
|
|
8. 通配符 `*`
|
|
9. 继承选择器 `QWidget`
|
|
|
|
## 颜色方案
|
|
|
|
推荐的颜色搭配:
|
|
|
|
### 医疗蓝主题配色
|
|
```css
|
|
/* 导航栏背景 */
|
|
background-color: #1e3a5f;
|
|
|
|
/* 导航栏选中项 */
|
|
background-color: #2980b9;
|
|
|
|
/* 按钮主色 */
|
|
background-color: #3498db;
|
|
|
|
/* 按钮悬停 */
|
|
background-color: #2980b9;
|
|
|
|
/* 内容区背景 */
|
|
background-color: #f5f7fa;
|
|
|
|
/* 边框颜色 */
|
|
border-color: #d1d8e0;
|
|
|
|
/* 表格表头 */
|
|
background-color: #1e3a5f;
|
|
```
|
|
|
|
## 扩展主题
|
|
|
|
如需创建新主题,可以:
|
|
|
|
1. 复制 `his_theme.qss` 并修改颜色值
|
|
2. 或在 `style_manager.h` 中添加新的 `getXxxTheme()` 方法
|
|
|
|
### 创建自定义主题示例
|
|
|
|
```cpp
|
|
// 在 HisStyleManager 中添加
|
|
static QString getMyCustomTheme() {
|
|
return R"(
|
|
QMainWindow {
|
|
background-color: #your-color;
|
|
}
|
|
/* ... 其他样式 ... */
|
|
)";
|
|
}
|
|
```
|
|
|
|
## 注意事项
|
|
|
|
1. QSS使用CSS语法,但仅支持Qt特定的子控件和伪状态
|
|
2. 某些CSS3特性(如`box-shadow`, `transform`)在Qt中不支持
|
|
3. 颜色使用十六进制格式: `#RRGGBB` 或 `#RGB`
|
|
4. 字体优先使用系统中文字体: Microsoft YaHei, PingFang SC
|
|
|
|
## 调试技巧
|
|
|
|
查看QSS是否生效:
|
|
```cpp
|
|
qDebug() << qApp->styleSheet();
|
|
```
|
|
|
|
动态更换样式:
|
|
```cpp
|
|
// 重新应用样式
|
|
HisStyleManager::applyTheme(HisStyleManager::ThemeType::ModernDark);
|
|
```
|
|
|
|
## 许可
|
|
|
|
本UI样式文件是HIS-GUI项目的一部分。
|