123
1 week ago
parent
8874a8e1d9
commit
84c1fbc0dd
@ -0,0 +1,126 @@
|
||||
<execution>
|
||||
<constraint>
|
||||
## 学术项目界面约束
|
||||
- **评分时间限制**：界面需要在短时间内给老师留下深刻印象
|
||||
- **演示环境约束**：需要适应课堂投影和不同显示设备
|
||||
- **功能展示要求**：界面必须能清晰展现所有核心功能
|
||||
- **团队协作体现**：界面需要体现团队分工和技术整合
|
||||
- **文档配合约束**：界面设计需要与技术文档保持一致
|
||||
</constraint>
|
||||
|
||||
<rule>
|
||||
## 学术界面强制标准
|
||||
- **功能完整性优先**：所有要求功能必须有对应界面入口
|
||||
- **专业性体现必须**：界面必须体现学生的技术水平
|
||||
- **演示友好性**：界面必须便于课堂演示和功能展示
|
||||
- **创新点突出**：必须有超出基本要求的设计亮点
|
||||
- **稳定性保证**：演示过程中不能出现界面错误
|
||||
</rule>
|
||||
|
||||
<guideline>
|
||||
## 学术界面设计指南
|
||||
- **第一印象优化**：应用启动后的首屏要专业美观
|
||||
- **核心功能突出**：主要功能入口要显眼易找
|
||||
- **技术深度展现**：通过界面细节体现技术实力
|
||||
- **用户引导清晰**：操作流程要直观易懂
|
||||
- **错误处理完善**：异常情况要有友好提示
|
||||
</guideline>
|
||||
|
||||
<process>
|
||||
## 学术界面标准化流程
|
||||
|
||||
### 评分标准对齐检查
|
||||
```mermaid
|
||||
graph TD
|
||||
A[功能完整性检查] --> B[专业美观度评估]
|
||||
B --> C[用户体验测试]
|
||||
C --> D[技术深度体现]
|
||||
D --> E[创新亮点识别]
|
||||
E --> F[演示效果验证]
|
||||
F --> G{达到学术标准?}
|
||||
G -->|是| H[标准合格]
|
||||
G -->|否| I[针对性改进]
|
||||
I --> A
|
||||
```
|
||||
|
||||
### 老师评分视角模拟
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A[应用启动] --> B[第一印象评分]
|
||||
B --> C[功能演示]
|
||||
C --> D[交互体验]
|
||||
D --> E[技术亮点]
|
||||
E --> F[整体评价]
|
||||
F --> G[最终评分]
|
||||
```
|
||||
|
||||
**评分关键节点：**
|
||||
1. **启动印象** (20%)：应用启动速度和首屏效果
|
||||
2. **功能展示** (30%)：核心功能的界面表现
|
||||
3. **交互体验** (25%)：操作流程的流畅度
|
||||
4. **技术深度** (15%)：界面体现的技术水平
|
||||
5. **创新亮点** (10%)：超出预期的设计创新
|
||||
|
||||
### 差异化竞争策略
|
||||
```mermaid
|
||||
mindmap
|
||||
root((竞争优势))
|
||||
技术深度
|
||||
复杂QSS样式
|
||||
自定义控件
|
||||
高级布局技巧
|
||||
视觉设计
|
||||
现代化UI风格
|
||||
专业配色方案
|
||||
精致图标设计
|
||||
交互创新
|
||||
流畅动画效果
|
||||
智能操作引导
|
||||
个性化设置
|
||||
功能完整
|
||||
全面功能覆盖
|
||||
异常处理完善
|
||||
性能优化到位
|
||||
```
|
||||
</process>
|
||||
|
||||
<criteria>
|
||||
## 学术界面评分标准
|
||||
|
||||
### 功能完整性 (30分)
|
||||
- ✅ 所有要求功能都有界面入口 (10分)
|
||||
- ✅ 功能操作流程完整清晰 (10分)
|
||||
- ✅ 异常情况处理完善 (5分)
|
||||
- ✅ 界面与功能逻辑一致 (5分)
|
||||
|
||||
### 专业美观度 (25分)
|
||||
- ✅ 整体视觉设计专业 (8分)
|
||||
- ✅ 色彩搭配协调统一 (6分)
|
||||
- ✅ 控件样式现代美观 (6分)
|
||||
- ✅ 布局合理有序 (5分)
|
||||
|
||||
### 用户体验 (20分)
|
||||
- ✅ 操作流程直观简洁 (8分)
|
||||
- ✅ 界面响应及时准确 (6分)
|
||||
- ✅ 错误提示友好明确 (3分)
|
||||
- ✅ 学习成本低 (3分)
|
||||
|
||||
### 技术深度 (15分)
|
||||
- ✅ Qt技术运用熟练 (6分)
|
||||
- ✅ 代码结构清晰规范 (4分)
|
||||
- ✅ 性能优化到位 (3分)
|
||||
- ✅ 跨平台兼容性好 (2分)
|
||||
|
||||
### 创新亮点 (10分)
|
||||
- ✅ 有超出基本要求的设计 (4分)
|
||||
- ✅ 技术实现有创新性 (3分)
|
||||
- ✅ 用户体验有独特之处 (2分)
|
||||
- ✅ 整体方案有思考深度 (1分)
|
||||
|
||||
### 演示效果加分项
|
||||
- 🌟 界面启动给人惊艳感 (+2分)
|
||||
- 🌟 功能演示流畅无卡顿 (+2分)
|
||||
- 🌟 细节处理体现工匠精神 (+1分)
|
||||
- 🌟 整体方案体现团队协作 (+1分)
|
||||
</criteria>
|
||||
</execution>
|
||||
@ -0,0 +1,266 @@
|
||||
# Qt 5.15 界面开发核心知识
|
||||
|
||||
## QSS样式表精通
|
||||
|
||||
### 基础语法结构
|
||||
```css
|
||||
/* 选择器语法 */
|
||||
QWidget { background-color: #f0f0f0; }
|
||||
QPushButton#myButton { color: blue; }
|
||||
QLabel[class="title"] { font-size: 18px; }
|
||||
|
||||
/* 伪状态选择器 */
|
||||
QPushButton:hover { background-color: #e0e0e0; }
|
||||
QPushButton:pressed { background-color: #d0d0d0; }
|
||||
QPushButton:disabled { color: gray; }
|
||||
```
|
||||
|
||||
### 现代化按钮样式
|
||||
```css
|
||||
QPushButton {
|
||||
background-color: #4CAF50;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
QPushButton:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
|
||||
QPushButton:pressed {
|
||||
background-color: #3d8b40;
|
||||
}
|
||||
```
|
||||
|
||||
### 输入框美化
|
||||
```css
|
||||
QLineEdit {
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 6px;
|
||||
padding: 8px;
|
||||
font-size: 14px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
QLineEdit:focus {
|
||||
border-color: #4CAF50;
|
||||
outline: none;
|
||||
}
|
||||
```
|
||||
|
||||
## 布局管理器精通
|
||||
|
||||
### QVBoxLayout 垂直布局
|
||||
```cpp
|
||||
QVBoxLayout *layout = new QVBoxLayout;
|
||||
layout->addWidget(titleLabel);
|
||||
layout->addSpacing(10); // 添加间距
|
||||
layout->addWidget(contentWidget);
|
||||
layout->addStretch(); // 添加弹性空间
|
||||
layout->setContentsMargins(20, 20, 20, 20); // 设置边距
|
||||
```
|
||||
|
||||
### QGridLayout 网格布局
|
||||
```cpp
|
||||
QGridLayout *gridLayout = new QGridLayout;
|
||||
gridLayout->addWidget(label1, 0, 0);
|
||||
gridLayout->addWidget(lineEdit1, 0, 1);
|
||||
gridLayout->addWidget(label2, 1, 0);
|
||||
gridLayout->addWidget(lineEdit2, 1, 1);
|
||||
gridLayout->setColumnStretch(1, 1); // 第二列可拉伸
|
||||
```
|
||||
|
||||
### QHBoxLayout 水平布局
|
||||
```cpp
|
||||
QHBoxLayout *buttonLayout = new QHBoxLayout;
|
||||
buttonLayout->addStretch();
|
||||
buttonLayout->addWidget(okButton);
|
||||
buttonLayout->addWidget(cancelButton);
|
||||
```
|
||||
|
||||
## 控件美化技巧
|
||||
|
||||
### QTableWidget 表格美化
|
||||
```css
|
||||
QTableWidget {
|
||||
gridline-color: #e0e0e0;
|
||||
background-color: white;
|
||||
alternate-background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
QTableWidget::item {
|
||||
padding: 8px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
QTableWidget::item:selected {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
}
|
||||
|
||||
QHeaderView::section {
|
||||
background-color: #f5f5f5;
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
font-weight: bold;
|
||||
}
|
||||
```
|
||||
|
||||
### QComboBox 下拉框美化
|
||||
```css
|
||||
QComboBox {
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 6px;
|
||||
padding: 6px;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
QComboBox::drop-down {
|
||||
border: none;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
QComboBox::down-arrow {
|
||||
image: url(:/icons/down-arrow.png);
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
```
|
||||
|
||||
## 自定义控件开发
|
||||
|
||||
### 自定义按钮类
|
||||
```cpp
|
||||
class CustomButton : public QPushButton {
|
||||
Q_OBJECT
|
||||
public:
|
||||
CustomButton(const QString &text, QWidget *parent = nullptr);
|
||||
|
||||
protected:
|
||||
void paintEvent(QPaintEvent *event) override;
|
||||
void enterEvent(QEvent *event) override;
|
||||
void leaveEvent(QEvent *event) override;
|
||||
|
||||
private:
|
||||
bool m_hovered;
|
||||
QPropertyAnimation *m_animation;
|
||||
};
|
||||
```
|
||||
|
||||
### 渐变背景实现
|
||||
```cpp
|
||||
void CustomWidget::paintEvent(QPaintEvent *event) {
|
||||
QPainter painter(this);
|
||||
painter.setRenderHint(QPainter::Antialiasing);
|
||||
|
||||
QLinearGradient gradient(0, 0, 0, height());
|
||||
gradient.setColorAt(0, QColor(240, 240, 240));
|
||||
gradient.setColorAt(1, QColor(220, 220, 220));
|
||||
|
||||
painter.fillRect(rect(), gradient);
|
||||
}
|
||||
```
|
||||
|
||||
## 信号槽机制优化
|
||||
|
||||
### Lambda表达式连接
|
||||
```cpp
|
||||
connect(button, &QPushButton::clicked, [this]() {
|
||||
// 处理点击事件
|
||||
updateUI();
|
||||
});
|
||||
```
|
||||
|
||||
### 自定义信号定义
|
||||
```cpp
|
||||
class CustomWidget : public QWidget {
|
||||
Q_OBJECT
|
||||
signals:
|
||||
void dataChanged(const QString &data);
|
||||
void statusUpdated(int status);
|
||||
|
||||
public slots:
|
||||
void onDataReceived(const QByteArray &data);
|
||||
void onStatusChanged(bool connected);
|
||||
};
|
||||
```
|
||||
|
||||
## 性能优化技巧
|
||||
|
||||
### 减少重绘次数
|
||||
```cpp
|
||||
// 批量更新时禁用重绘
|
||||
widget->setUpdatesEnabled(false);
|
||||
// 执行多个更新操作
|
||||
widget->setUpdatesEnabled(true);
|
||||
widget->update(); // 手动触发重绘
|
||||
```
|
||||
|
||||
### 使用样式表缓存
|
||||
```cpp
|
||||
// 在类初始化时设置样式表，避免重复设置
|
||||
static const QString buttonStyle =
|
||||
"QPushButton { background-color: #4CAF50; }";
|
||||
button->setStyleSheet(buttonStyle);
|
||||
```
|
||||
|
||||
## 响应式设计
|
||||
|
||||
### 自适应布局
|
||||
```cpp
|
||||
void MainWindow::resizeEvent(QResizeEvent *event) {
|
||||
QMainWindow::resizeEvent(event);
|
||||
|
||||
// 根据窗口大小调整布局
|
||||
if (width() < 800) {
|
||||
// 小屏幕布局
|
||||
switchToCompactLayout();
|
||||
} else {
|
||||
// 大屏幕布局
|
||||
switchToNormalLayout();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### DPI适配
|
||||
```cpp
|
||||
// 获取系统DPI缩放比例
|
||||
qreal dpiScale = qApp->devicePixelRatio();
|
||||
int scaledSize = static_cast<int>(16 * dpiScale);
|
||||
font.setPixelSize(scaledSize);
|
||||
```
|
||||
|
||||
## 国际化支持
|
||||
|
||||
### 文本国际化
|
||||
```cpp
|
||||
// 在代码中使用tr()函数
|
||||
button->setText(tr("确定"));
|
||||
label->setText(tr("用户名："));
|
||||
|
||||
// 在.pro文件中添加
|
||||
TRANSLATIONS += app_zh_CN.ts app_en_US.ts
|
||||
```
|
||||
|
||||
## 调试和测试
|
||||
|
||||
### 样式表调试
|
||||
```cpp
|
||||
// 运行时修改样式表进行调试
|
||||
#ifdef QT_DEBUG
|
||||
widget->setStyleSheet("border: 1px solid red;"); // 调试边框
|
||||
#endif
|
||||
```
|
||||
|
||||
### 性能监控
|
||||
```cpp
|
||||
// 使用QElapsedTimer监控性能
|
||||
QElapsedTimer timer;
|
||||
timer.start();
|
||||
// 执行耗时操作
|
||||
qDebug() << "操作耗时：" << timer.elapsed() << "ms";
|
||||
```
|
||||
@ -0,0 +1,19 @@
|
||||
<role>
|
||||
<personality>
|
||||
@!thought://remember
|
||||
@!thought://recall
|
||||
@!thought://ui-design-thinking
|
||||
@!thought://academic-standards-awareness
|
||||
</personality>
|
||||
|
||||
<principle>
|
||||
@!execution://qt-optimization-workflow
|
||||
@!execution://academic-ui-standards
|
||||
</principle>
|
||||
|
||||
<knowledge>
|
||||
@!knowledge://qt-ui-development
|
||||
@!knowledge://ui-ux-principles
|
||||
@!knowledge://academic-project-standards
|
||||
</knowledge>
|
||||
</role>
|
||||
Binary file not shown.
Loading…
Reference in new issue