# QRibbon

**Repository Path**: junlei_meng/qribbon

## Basic Information

- **Project Name**: QRibbon
- **Description**: 简单的ribbon实现，ai自动创建
- **Primary Language**: C++
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Qt Ribbon UI Framework

基于 Qt5.14.2 + CMake + MinGW64 的 Ribbon 风格 UI 框架。

## 项目结构

```
QRibbon/
├── CMakeLists.txt
├── include/
│   ├── mainwindow.h
│   ├── customtitlebar.h
│   ├── ribbonbar.h
│   ├── ribbontab.h
│   ├── ribbongroup.h
│   ├── ribbonbutton.h
│   └── statusbarwidget.h
├── src/
│   ├── main.cpp
│   ├── mainwindow.cpp
│   ├── customtitlebar.cpp
│   ├── ribbonbar.cpp
│   ├── ribbontab.cpp
│   ├── ribbongroup.cpp
│   ├── ribbonbutton.cpp
│   └── statusbarwidget.cpp
└── resources/
    ├── resources.qrc
    └── app.rc
```

## 架构说明

### 组件层次

```
MainWindow  (QMainWindow, 无边框)
├── CustomTitleBar     — 自定义标题栏（拖动/最大化/最小化/关闭）
├── RibbonBar          — Ribbon 工具栏
│   ├── QTabBar        — Tab 标签行（工作空间 / 项目硬件 / 其他）
│   └── QStackedWidget — 每个 Tab 对应一个 RibbonTab
│       └── RibbonTab
│           └── RibbonGroup (N个)
│               └── RibbonButton (Large / Small)
├── Content Area       — 主内容区（QSplitter + 项目树 + 编辑器）
└── StatusBarWidget    — 底部状态栏
```

### 关键类说明

| 类 | 说明 |
|---|---|
| `CustomTitleBar` | 无边框窗口标题栏，支持拖动、双击最大化 |
| `RibbonBar` | Ribbon 主容器，管理 Tab 切换与 QAT 快速访问栏 |
| `RibbonTab` | 单个 Tab 页，横向排列若干 RibbonGroup |
| `RibbonGroup` | 按钮分组，底部显示组名，右侧有分隔线 |
| `RibbonButton` | 支持 Large（图标+文字下方）/ Small（图标+文字右侧）两种样式 |
| `StatusBarWidget` | 底部状态栏，显示状态文字、连接状态、当前用户 |

## 编译方法

### 前置条件

- Qt 5.14.2（MinGW 64-bit）
- CMake >= 3.14
- MinGW-w64

### 使用 Qt Creator

1. 打开 Qt Creator
2. 文件 → 打开文件或项目 → 选择 `CMakeLists.txt`
3. 选择 Qt 5.14.2 MinGW 64-bit Kit
4. 点击构建并运行


## 扩展指南

### 添加新的 Ribbon Tab

```cpp
// 在 mainwindow.cpp setupRibbon() 中：
RibbonTab *myTab = m_ribbonBar->addTab("我的Tab");
auto *myGroup = myTab->addGroup("分组名称");
myGroup->addLargeButton(QIcon(":/icons/my_icon.png"), "按钮文字");
```

### 添加小按钮（两行堆叠）

```cpp
myGroup->addSmallButton(QIcon(":/icons/icon1.png"), "操作A");
myGroup->addSmallButton(QIcon(":/icons/icon2.png"), "操作B");
myGroup->addSmallButton(QIcon(":/icons/icon3.png"), "操作C");
// 超过3个自动新建一列
```

### 添加分组分隔线

```cpp
myGroup->addSeparator();
```

### 更新状态栏

```cpp
m_statusBar->setStatusText("正在执行测试...");
m_statusBar->setConnectionStatus(true);   // 绿色 ● 已连接
m_statusBar->setConnectionStatus(false);  // 橙色 ● 未连接
m_statusBar->setUserText("TestUser");
```

### 替换图标

将 `.png` 图标文件放入 `resources/icons/`，在 `resources.qrc` 中注册：

```xml
<file>icons/save.png</file>
```

然后在代码中使用：

```cpp
QIcon(":/icons/save.png")
```

推荐图标尺寸：大按钮 32×32px，小按钮 16×16px，支持 HiDPI 可提供 64×64px。

## 样式定制

全局样式集中在 `MainWindow::applyGlobalStyle()`，各组件局部样式在各自的 `applyStyle()` 方法中。

颜色主题变量（在代码中统一调整）：

| 用途 | 颜色值 |
|---|---|
| 标题栏渐变起始 | `#1a2a4a` |
| 标题栏渐变结束 | `#162440` |
| Ribbon 背景 | `#F0F2F5` |
| Tab 选中指示线 | `#2a6cd4` |
| 状态栏背景 | `#2a3a5a` |
| 主强调色 | `#2a6cd4` |