e2hang/HIS-GUI

Fork 0

Files

e2hang 0ffc4dec1e Final Version From E2hang

2026-04-07 21:30:39 +08:00

4.4 KiB

Raw Permalink Blame History

HIS-GUI 自定义UI样式系统

本目录包含HIS-GUI项目的自定义UI样式文件,提供美观的医疗系统界面风格。

文件结构

template/
├── README.md           # 本说明文件
├── his_theme.qss       # 完整QSS样式表文件(医疗蓝主题)
├── style_manager.h     # 样式管理器头文件
└── style_manager.cpp   # 样式管理器实现

快速开始

方式1: 使用代码中的主题(推荐)

在 main_gui.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文件加载

#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 中定义了几种按钮样式类:

// 主要操作按钮
button->setProperty("class", "primary");

// 次要操作按钮
button->setProperty("class", "secondary");

// 成功操作按钮
button->setProperty("class", "success");

// 警告操作按钮
button->setProperty("class", "warning");

// 危险操作按钮(删除等)
button->setProperty("class", "danger");

自定义属性

标签属性

// 标题标签
label->setProperty("heading", true);

// 副标题标签
label->setProperty("subheading", true);

QSS文件结构

his_theme.qss 包含以下样式部分:

全局样式 (Global)
菜单栏 (MenuBar)
工具栏 (ToolBar)
侧边导航栏 (Navigation)
按钮 (PushButton)
输入框 (LineEdit, TextEdit)
下拉框 (ComboBox)
表格 (TableWidget)
树形控件 (TreeWidget)
标签页 (TabWidget)
组框 (GroupBox)
滚动条 (ScrollBar)
进度条 (ProgressBar)
复选框/单选框 (Checkbox/RadioButton)

样式优先级

QSS中的样式优先级(从高到低):

!important 标记
内联样式 (通过 setStyleSheet)
对象属性选择器 [property="value"]
类选择器 .className
伪状态选择器 :hover, :pressed
子控件选择器 ::subcontrol
ID选择器 #objectName
通配符 *
继承选择器 QWidget

颜色方案

推荐的颜色搭配:

医疗蓝主题配色

/* 导航栏背景 */
background-color: #1e3a5f;

/* 导航栏选中项 */
background-color: #2980b9;

/* 按钮主色 */
background-color: #3498db;

/* 按钮悬停 */
background-color: #2980b9;

/* 内容区背景 */
background-color: #f5f7fa;

/* 边框颜色 */
border-color: #d1d8e0;

/* 表格表头 */
background-color: #1e3a5f;

扩展主题

如需创建新主题,可以:

复制 his_theme.qss 并修改颜色值
或在 style_manager.h 中添加新的 getXxxTheme() 方法

创建自定义主题示例

// 在 HisStyleManager 中添加
static QString getMyCustomTheme() {
    return R"(
        QMainWindow {
            background-color: #your-color;
        }
        /* ... 其他样式 ... */
    )";
}

注意事项

QSS使用CSS语法,但仅支持Qt特定的子控件和伪状态
某些CSS3特性(如box-shadow, transform)在Qt中不支持
颜色使用十六进制格式: #RRGGBB 或 #RGB
字体优先使用系统中文字体: Microsoft YaHei, PingFang SC

调试技巧

查看QSS是否生效:

qDebug() << qApp->styleSheet();

动态更换样式:

// 重新应用样式
HisStyleManager::applyTheme(HisStyleManager::ThemeType::ModernDark);

许可

本UI样式文件是HIS-GUI项目的一部分。

4.4 KiB Raw Permalink Blame History