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