187 lines
5.5 KiB
Markdown
187 lines
5.5 KiB
Markdown
# Logo和横幅图像配置说明
|
||
|
||
## 功能概述
|
||
|
||
本更新实现了以下需求：
|
||
1. **Logo在菜单栏左侧** - 和菜单栏在**同一行**
|
||
2. **菜单栏在最右侧** - 使用弹性空间布局
|
||
3. **横幅图片撑满整个区域** - 自适应窗口宽度
|
||
|
||
## 布局说明
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ [Logo] 文件 工具 帮助 │ ← 同一行：Logo在左，菜单在右
|
||
├─────────────────────────────────────┤
|
||
│ [软件名称横幅图 - 撑满宽度] │ ← 横幅撑满整个区域
|
||
├─────────────────────────────────────┤
|
||
│ │
|
||
│ 主要内容区 │
|
||
│ │
|
||
```
|
||
|
||
## 配置步骤
|
||
|
||
### 1. 准备图像文件
|
||
|
||
将你的图像文件放在项目目录中。建议的目录结构：
|
||
|
||
```
|
||
fengzhuang-ui2/
|
||
├── assets/ # 推荐：创建资源目录
|
||
│ ├── logo.png # 公司logo (建议高度30像素)
|
||
│ └── banner.png # 软件名称横幅 (建议高度70像素)
|
||
├── src/
|
||
│ └── gui/
|
||
│ └── water_quality_gui.py
|
||
└── ...
|
||
```
|
||
|
||
### 2. 修改图像路径
|
||
|
||
打开 `src/gui/water_quality_gui.py` 文件，找到以下两处代码：
|
||
|
||
#### Logo路径修改（create_logo_bar 方法中，第3928行左右）
|
||
|
||
```python
|
||
# 修改前：
|
||
logo_path = "path/to/your/logo.png"
|
||
|
||
# 修改后（使用相对路径）：
|
||
logo_path = "assets/logo.png"
|
||
|
||
# 或使用绝对路径：
|
||
logo_path = r"E:\your\full\path\to\logo.png"
|
||
```
|
||
|
||
#### 横幅路径修改（create_banner_widget 方法中，第3978行左右）
|
||
|
||
```python
|
||
# 修改前：
|
||
banner_path = "path/to/your/banner.png"
|
||
|
||
# 修改后（使用相对路径）：
|
||
banner_path = "assets/banner.png"
|
||
|
||
# 或使用绝对路径：
|
||
banner_path = r"E:\your\full\path\to\banner.png"
|
||
```
|
||
|
||
### 3. 图像规格建议
|
||
|
||
| 名称 | 建议尺寸 | 格式 | 说明 |
|
||
|-----|--------|------|------|
|
||
| Logo | 高度30像素 | PNG/JPG | 放在顶部Logo栏中，自动按高度缩放保持宽高比 |
|
||
| 横幅 | 高度70像素 | PNG/JPG | 占据横幅区域，自动按高度缩放保持宽高比 |
|
||
|
||
### 4. 图像加载失败处理
|
||
|
||
如果图像文件未找到或加载失败，系统会自动显示占位符：
|
||
|
||
- **Logo占位符**: 显示"Logo"文本，背景为浅灰色
|
||
- **横幅占位符**: 显示"软件名称横幅"文本，背景为蓝色，字体为24号加粗
|
||
|
||
### 5. 自适应缩放说明
|
||
|
||
为了避免图像拉伸，代码使用了 `scaledToHeight()` 方法：
|
||
- Logo按高度30像素缩放，自动计算宽度，保持原始宽高比
|
||
- 横幅按高度70像素缩放，自动计算宽度，保持原始宽高比
|
||
|
||
这样可以确保无论原始图像大小如何，都能自然地显示而不会出现拉伸变形。
|
||
|
||
## 常见问题
|
||
|
||
### Q: 如何使用项目内的图像资源？
|
||
|
||
**A**: 在项目中创建 `assets` 或 `resources` 文件夹，并使用相对路径：
|
||
|
||
```python
|
||
# 假设项目结构：
|
||
# fengzhuang-ui2/
|
||
# ├── assets/
|
||
# │ ├── logo.png
|
||
# │ └── banner.png
|
||
# └── src/gui/water_quality_gui.py
|
||
|
||
# 在 water_quality_gui.py 中（第3928行）：
|
||
logo_path = "assets/logo.png"
|
||
|
||
# 在 water_quality_gui.py 中（第3978行）：
|
||
banner_path = "assets/banner.png"
|
||
```
|
||
|
||
### Q: Logo或横幅大小不合适？
|
||
|
||
**A**: 修改以下代码调整显示大小：
|
||
|
||
```python
|
||
# 在 create_logo_bar() 方法中调整Logo大小
|
||
logo_label.setFixedSize(60, 40) # 改为 60×40
|
||
|
||
# 在 create_banner_widget() 方法中调整横幅大小
|
||
banner_label.setMaximumHeight(100) # 改为100像素高
|
||
banner_label.setMinimumHeight(80) # 改为最小80像素高
|
||
|
||
# 调整缩放高度
|
||
scaled_pixmap = logo_pixmap.scaledToHeight(35, Qt.SmoothTransformation) # 改为35
|
||
scaled_pixmap = banner_pixmap.scaledToHeight(85, Qt.SmoothTransformation) # 改为85
|
||
```
|
||
|
||
### Q: 如何隐藏Logo或横幅？
|
||
|
||
**A**: 在 `init_ui()` 方法中注释掉相应的创建方法：
|
||
|
||
```python
|
||
# 在 init_ui() 中
|
||
# self.create_logo_bar() # 注释此行隐藏Logo
|
||
# self.create_banner_widget() # 注释此行隐藏横幅
|
||
```
|
||
|
||
### Q: Logo显示位置不对？
|
||
|
||
**A**: Logo栏是作为独立的工具栏添加在菜单栏下方，不是在菜单栏内。当前的布局顺序是：
|
||
1. 菜单栏 (最上方)
|
||
2. Logo栏 (菜单栏下方)
|
||
3. 横幅区域 (Logo栏下方)
|
||
4. 主内容区域 (最下方)
|
||
|
||
### Q: 图像在高分辨率屏幕上看起来模糊？
|
||
|
||
**A**: 使用 `Qt.SmoothTransformation` 可以改善图像质量。如果仍然不够清晰，可以准备高分辨率的原始图像。
|
||
|
||
## 代码位置
|
||
|
||
- **Logo栏创建**: `create_logo_bar()` 方法 (第3902行)
|
||
- **横幅区域创建**: `create_banner_widget()` 方法 (第3950行)
|
||
- **主UI初始化**: `init_ui()` 方法 (第3821行)
|
||
|
||
## 支持的图像格式
|
||
|
||
- PNG (推荐，支持透明背景)
|
||
- JPG/JPEG
|
||
- BMP
|
||
- GIF
|
||
- TIFF
|
||
|
||
## 样式调整
|
||
|
||
如需修改样式（背景色、边框等），编辑以下位置的 `setStyleSheet()` 调用：
|
||
|
||
```python
|
||
# Logo样式（第3907-3916行）
|
||
logo_toolbar.setStyleSheet("""...""")
|
||
|
||
# 占位符样式（第3931行）
|
||
logo_label.setStyleSheet("...")
|
||
|
||
# 横幅占位符样式（第3959-3965行）
|
||
banner_label.setStyleSheet("""...""")
|
||
```
|
||
|
||
## 更新日期
|
||
2026-03-27
|
||
|
||
## 备注
|
||
|
||
所有的图像路径都可以根据你的实际项目结构灵活调整。建议将图像文件与代码一起版本控制，以确保项目的可维护性。
|