# qt_ui_prototype

**Repository Path**: slamdd/qt_ui_prototype

## Basic Information

- **Project Name**: qt_ui_prototype
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-04
- **Last Updated**: 2026-04-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Qt UI Prototype

基于 Qt QWidget 框架的现代化 UI 样式表示例程序，通过 Qt 样式表（QSS）技术实现工业级控件的现代化界面。

## 项目目标

为 Qt 应用程序提供一套完整的现代化 UI 样式表示例，涵盖工业控制常用控件，支持一键切换 147 种颜色主题，满足不同用户的审美需求。

## 特性

- **147 种颜色主题** - 覆盖粉红、红、橙、黄、绿、青、蓝、紫、灰等色系，任意切换
- **10 种控件支持** - 按钮、输入框、下拉框、进度条、滚动条、列表、框架等
- **主题下拉切换** - 通过 QComboBox 实时切换主题，即时预览效果
- **清晰的目录结构** - 按控件类型和主题双重分类，便于维护
- **CMake 构建系统** - 跨平台构建支持，使用 Ninja 加速编译

## 支持的控件

| 控件 | 状态 | 控件 | 状态 |
|------|------|------|------|
| QFrame | ✅ | QLineEdit | ✅ |
| QPushButton | ✅ | QSpinBox | ✅ |
| QToolButton | ✅ | QComboBox | ✅ |
| QCheckBox | ✅ | QProgressBar | ✅ |
| QRadioButton | ✅ | QScrollBar | ✅ |
| QTabWidget | ✅ | QListView | ✅ |
| QGroupBox | ✅ | | |

## 快速开始

### 环境要求

- Qt 5.15+ 或 Qt 6.x
- CMake 3.16+
- Ninja 构建工具

### 编译项目

```powershell
# 配置项目
cmake --preset=ninja-debug

# 编译项目
cmake --build build/ninja-debug
```

### 运行程序

```powershell
# Windows
./build/ninja-debug/bin/qt_ui_prototype.exe
```

## 项目结构

```
qt_ui_prototype/
├── CMakeLists.txt              # CMake 构建配置
├── CMakePresets.json           # CMake 预设配置
├── main.cpp                    # 程序入口
├── widget.h/cpp/ui             # 主窗口类
├── resource_loader.h/cpp        # 资源加载器
├── resource.qrc                # Qt 资源文件
├── q*_demo.h/cpp/ui           # 各控件演示页面
├── 所有颜色.md                  # RGB 颜色对照表
├── 设计说明.md                  # 项目设计说明
├── 总结说明.md                  # 开发总结
└── 备忘录.md                    # 开发备忘
├── resources/
│   ├── styles/                 # 样式表目录
│   │   ├── default.qss        # 默认主题
│   │   ├── spring_green.qss   # 春绿色主题
│   │   ├── gold.qss          # 金色主题
│   │   ├── dark_orchid.qss   # 深兰花紫主题
│   │   ├── hot_pink.qss       # 热情粉红主题
│   │   ├── {color}.qss       # 147种颜色主题...
│   │   └── QFrame/           # QFrame控件专属样式
│   │       ├── default.qss
│   │       ├── spring_green.qss
│   │       └── {color}.qss   # 各颜色主题
│   │   ├── QAbstractButton/  # 按钮控件样式
│   │   ├── QTabWidget/       # 标签页控件样式
│   │   ├── QComboBox/         # 下拉框控件样式
│   │   ├── QLineEdit/         # 输入框控件样式
│   │   ├── QListView/        # 列表控件样式
│   │   ├── QProgressBar/     # 进度条控件样式
│   │   ├── QScrollBar/       # 滚动条控件样式
│   │   ├── QSpinBox/         # 数值框控件样式
│   │   └── QGroupBox/        # 分组框控件样式
│   ├── font/                  # 字体资源
│   └── icons/                 # 图标资源
└── README.md
```

## 主题系统

### 147 种颜色主题

项目支持以下 147 种 RGB 标准颜色主题：

| 色系 | 颜色示例 |
|------|----------|
| 粉红色系 | light_pink, pink, hot_pink, deep_pink |
| 红色系 | crimson, red, firebrick, brown |
| 橙色系 | orange, coral, tomato, salmon |
| 黄色系 | gold, yellow, lemon_chiffon, wheat |
| 绿色系 | spring_green, lime, forest_green, sea_green |
| 青色系 | cyan, aqua, turquoise, teal |
| 蓝色系 | blue, navy, sky_blue, steel_blue |
| 紫色系 | purple, violet, orchid, indigo |
| 中性色系 | white, silver, gray, black |

### 切换主题

在程序界面中，通过顶部的「工具」标签页下的 QComboBox 下拉框即可实时切换主题。

### 创建新主题

1. 在 `所有颜色.md` 中添加新颜色配置
2. 在 `resources/styles/` 目录下创建全局样式文件
3. 在各控件子目录下创建对应的样式文件
4. 更新 `widget.cpp` 中的主题名称数组
5. 更新 `resource.qrc` 添加文件引用

## 样式表示例

### 按钮状态

```cpp
// 设置按钮状态样式
ui->pushButton->setProperty("status", "warning");
ui->pushButton->style()->unpolish(ui->pushButton);
ui->pushButton->style()->polish(ui->pushButton);
```

支持的按钮状态：`warning`、`error`、`success`

### 控件尺寸

```cpp
// 设置控件尺寸
ui->comboBox->setProperty("size", "large");
ui->comboBox->style()->unpolish(ui->comboBox);
ui->comboBox->style()->polish(ui->comboBox);
```

支持的尺寸：`small`、`large`

## 开发指南

### 添加新控件样式

1. 创建控件样式目录：`resources/styles/QNewControl/`
2. 创建样式文件：`default.qss`、`spring_green.qss`、各颜色主题
3. 创建对应的演示页面 `newcontrol_demo.h/cpp/ui`
4. 在 `widget.cpp` 中集成演示页面
5. 更新 `resource.qrc` 添加文件引用

### 样式表编写规范

- 使用 `rgba()` 定义半透明颜色，便于主题叠加
- 状态样式使用属性选择器：`[status="success"]`
- 尺寸样式使用属性选择器：`[size="large"]`
- 避免使用 `!important`，保持样式优先级可控
- 颜色值基于主题色生成变体（加深/加亮）

## 技术栈

- **UI 框架**: Qt 5.15+ / Qt 6.x
- **构建工具**: CMake + Ninja
- **样式方案**: Qt Style Sheets (QSS)

## 许可证

本项目仅供学习和参考使用。