【QQMusic项目界面开发复习笔记】第二章

🌹 作者: 云小逸

🤟 个人主页: 云小逸的主页

🤟 motto : 要敢于一个人默默的面对自己，强大自己才是核心 。不要等到什么都没有了，才下定决心去做。种一颗树，最好的时间是十年前，其次就是现在！学会自己和解，与过去和解，努力爱自己。希望春天来之前，我们一起面朝大海，春暖花开！

🥇 专栏:

文章目录

- [📚 前言](#📚 前言)
- 一、界面开发基础准备
- - [1. 创建工程](#1. 创建工程)
  - [2. 主窗口布局设计](#2. 主窗口布局设计)
  - - [2.1 窗口基础设置](#2.1 窗口基础设置)
    - [2.2 背景容器布局](#2.2 背景容器布局)
    - [2.3 划分head和body区域](#2.3 划分head和body区域)
- 二、Head区域开发
- - [1. 区域功能与结构](#1. 区域功能与结构)
  - [2. Logo区域实现](#2. Logo区域实现)
  - [3. 搜索框与功能按钮](#3. 搜索框与功能按钮)
- 三、Body区域开发
- - [1. 区域划分与布局](#1. 区域划分与布局)
  - - [1.1 左侧功能按钮区](#1.1 左侧功能按钮区)
    - [1.2 右侧页面显示区](#1.2 右侧页面显示区)
  - [2. 自定义按钮控件（BtForm）](#2. 自定义按钮控件（BtForm）)
- 四、界面美化与细节处理
- - [1. QSS样式设置](#1. QSS样式设置)
  - - [1.1 全局样式](#1.1 全局样式)
    - [1.2 搜索框样式](#1.2 搜索框样式)
  - [2. 阴影与透明效果](#2. 阴影与透明效果)
  - [3. 字体与图标优化](#3. 字体与图标优化)
- 五、核心技术总结
- - [1. 布局管理](#1. 布局管理)
  - [2. 自定义控件](#2. 自定义控件)
  - [3. QSS应用](#3. QSS应用)
- 六、内容总结
- - [1. 基础准备](#1. 基础准备)
  - [2. 界面布局](#2. 界面布局)
  - [3. 自定义控件](#3. 自定义控件)
  - [4. 界面美化](#4. 界面美化)
  - [5. 核心技术](#5. 核心技术)
- [📣 结语](#📣 结语)

📚 前言

在Qt项目开发中，界面设计是用户交互的基础。本文结合QQMusic项目文档，详细梳理界面开发的核心步骤、关键技术及实现逻辑，帮助读者系统掌握基于Qt Designer的界面布局、自定义控件和QSS样式美化等核心知识。

一、界面开发基础准备

1. 创建工程

目标：搭建基于Qt Widget的工程框架，为界面设计提供基础环境。

cpp 复制代码

// qqmusic.h
#ifndef QQMUSIC_H
#define QQMUSIC_H

#include <QWidget>

class QQMusic : public QWidget
{
    Q_OBJECT

public:
    QQMusic(QWidget *parent = nullptr);
    ~QQMusic();

private:
    void initUI(); // 界面初始化函数
};

#endif // QQMUSIC_H

cpp 复制代码

// qqmusic.cpp
#include "qqmusic.h"
#include "ui_qqmusic.h"

QQMusic::QQMusic(QWidget *parent)
    : QWidget(parent)
{
    initUI(); // 调用界面初始化函数
}

QQMusic::~QQMusic()
{
}

关键说明 ：
- 创建继承自QWidget的主窗口类QQMusic，通过initUI()统一管理界面初始化逻辑。
- 使用Qt Designer生成ui_qqmusic.h，实现可视化界面设计与代码分离。

2. 主窗口布局设计

目标：定义窗口基本尺寸，划分head和body区域，实现整体布局框架。

2.1 窗口基础设置

cpp 复制代码

// initUI()中设置窗口大小
this->setFixedSize(1040, 700); // 设置窗口固定大小为1040x700

2.2 背景容器布局

cpp 复制代码

// 添加背景容器并设置垂直布局
QWidget *background = new QWidget(this);
background->setObjectName("background");
QVBoxLayout *mainLayout = new QVBoxLayout(background);
mainLayout->setContentsMargins(0, 0, 0, 0); // 边距设为0
mainLayout->setSpacing(0); // 子部件间距设为0
this->setLayout(mainLayout); // 设置主布局

2.3 划分head和body区域

cpp 复制代码

// 创建head和body部件
QWidget *head = new QWidget(background);
QWidget *body = new QWidget(background);
head->setObjectName("head");
body->setObjectName("body");

// 设置head固定高度为80
head->setMinimumSize(QSize(0, 80));
head->setMaximumSize(QSize(16777215, 80));

// 添加到主布局
mainLayout->addWidget(head);
mainLayout->addWidget(body);

布局逻辑 ：
- 使用QVBoxLayout垂直布局管理背景容器，确保head和body上下排列。
- 通过setMinimumSize和setMaximumSize固定head高度，保证界面结构稳定。

二、Head区域开发

1. 区域功能与结构

功能：包含Logo、搜索框、功能按钮（皮肤、最小化、最大化、关闭）。
结构：分为headLeft（Logo）和headRight（搜索框+功能按钮）。

2. Logo区域实现

cpp 复制代码

// headLeft布局
QWidget *headLeft = new QWidget(head);
headLeft->setObjectName("headLeft");
headLeft->setMinimumSize(QSize(200, 80)); // 固定宽度200

QLabel *logo = new QLabel(headLeft);
logo->setObjectName("logo");
logo->setStyleSheet("border-image: url(:/images/Logo.png);"); // 设置Logo图片

3. 搜索框与功能按钮

cpp 复制代码

// 搜索框
QWidget *searchBox = new QWidget(headRight);
QLineEdit *searchInput = new QLineEdit(searchBox);
searchInput->setObjectName("searchInput");
searchInput->setStyleSheet(
    "background-color: #E3E3E3;"
    "border-radius: 17px;"
    "padding-left: 17px;"
);

// 功能按钮
QPushButton *skinBtn = new QPushButton(settingBox);
skinBtn->setObjectName("skin");
skinBtn->setStyleSheet("border-image: url(:/images/skin.png);"); // 皮肤按钮图片

关键技术 ：
- 使用QLineEdit实现搜索框，通过setStyleSheet设置圆角和背景色。
- 功能按钮通过border-image属性设置自定义图标，去除默认边框。

三、Body区域开发

1. 区域划分与布局

结构：左侧功能按钮区（bodyLeft）和右侧页面显示区（bodyRight），采用水平布局。

1.1 左侧功能按钮区

cpp 复制代码

// bodyLeft布局
QWidget *bodyLeft = new QWidget(body);
bodyLeft->setObjectName("bodyLeft");
bodyLeft->setMinimumSize(QSize(200, 0)); // 固定宽度200

// 垂直布局管理按钮
QVBoxLayout *leftLayout = new QVBoxLayout(bodyLeft);
leftLayout->setContentsMargins(0, 0, 0, 0);

// 添加按钮（推荐、电台、音乐馆等）
QPushButton *recommendBtn = new QPushButton("推荐", bodyLeft);
recommendBtn->setObjectName("recommendBtn");
leftLayout->addWidget(recommendBtn);

1.2 右侧页面显示区

cpp 复制代码

// bodyRight布局
QWidget *bodyRight = new QWidget(body);
QStackedWidget *stackedWidget = new QStackedWidget(bodyRight);
stackedWidget->addPage(new RecommendPage()); // 添加推荐页面
stackedWidget->addPage(new LocalMusicPage()); // 添加本地音乐页面

// 设置水平布局
QHBoxLayout *bodyRightLayout = new QHBoxLayout(bodyRight);
bodyRightLayout->addWidget(stackedWidget);

核心逻辑 ：
- bodyLeft使用垂直布局排列功能按钮，bodyRight通过QStackedWidget实现页面切换。
- QStackedWidget管理多个页面，通过索引切换显示内容（如推荐页、本地音乐页）。

2. 自定义按钮控件（BtForm）

目标：实现按钮悬停变色、动画效果的自定义控件。

cpp 复制代码

// BtForm.h
class BtForm : public QWidget
{
    Q_OBJECT

public:
    explicit BtForm(QWidget *parent = nullptr);
    void setIcon(const QString &iconPath, const QString &text); // 设置图标和文本

private:
    Ui::BtForm *ui;
    QPropertyAnimation *lineAnimation; // 下划线动画
};

// BtForm.cpp
void BtForm::setIcon(const QString &iconPath, const QString &text) {
    ui->iconLabel->setStyleSheet(QString("border-image: url(%1);").arg(iconPath));
    ui->textLabel->setText(text);
}

// 悬停样式
QString style = "#btStyle:hover { background-color: #D8D8D8; }";
ui->btStyle->setStyleSheet(style);

动画实现 ：
- 使用QPropertyAnimation实现按钮下划线的动态显示效果。
- 通过setStyleSheet动态切换按钮背景色，实现悬停高亮。

四、界面美化与细节处理

1. QSS样式设置

目标：统一界面风格，提升视觉体验。

1.1 全局样式

cpp 复制代码

// 主窗口背景
#background { background-color: #F0F0F0; }

// 按钮通用样式
QPushButton {
    border: none;
    background-repeat: no-repeat;
    background-position: center center;
}
QPushButton:hover { background-color: rgba(230, 0, 0, 0.1); } // 半透明悬停效果

1.2 搜索框样式

cpp 复制代码

#searchInput {
    background-color: #E3E3E3;
    border-radius: 17px;
    padding-left: 17px;
}

2. 阴影与透明效果

cpp 复制代码

// 添加窗口阴影
QGraphicsDropShadowEffect *shadowEffect = new QGraphicsDropShadowEffect(this);
shadowEffect->setOffset(0, 3); // 阴影偏移
shadowEffect->setColor(QColor(0, 0, 0, 50)); // 半透明黑色
shadowEffect->setBlurRadius(10); // 模糊半径
this->setGraphicsEffect(shadowEffect);

// 透明背景
this->setAttribute(Qt::WA_TranslucentBackground, true);

技术要点 ：
- QGraphicsDropShadowEffect实现窗口阴影，提升立体感。
- WA_TranslucentBackground属性使窗口背景透明，配合阴影实现悬浮效果。

3. 字体与图标优化

cpp 复制代码

// 设置字体
QFont font("微软雅黑", 12); // 主字体为微软雅黑，大小12
searchInput->setFont(font);

// 图标资源
QIcon recommendIcon(":/images/recommend.png"); // 加载推荐按钮图标
recommendBtn->setIcon(recommendIcon);
recommendBtn->setIconSize(QSize(24, 24)); // 图标大小

五、核心技术总结

1. 布局管理

垂直布局（QVBoxLayout）：用于head、bodyLeft等上下排列的区域。
水平布局（QHBoxLayout）：用于headRight、bodyRight等左右排列的区域。
层叠布局（QStackedWidget）：实现页面切换，如推荐页与本地音乐页的显示切换。

2. 自定义控件

BtForm：封装按钮图标、文本和动画逻辑，提高复用性。
RecBox：实现推荐页的轮播图效果，通过自定义布局和事件处理实现交互。

3. QSS应用

样式分离：将界面样式通过QSS集中管理，便于维护和修改。
状态选择器 ：利用:hover、:pressed等伪状态实现按钮交互效果。

六、内容总结

1. 基础准备

创建基于Qt Widget的工程，定义主窗口类QQMusic，通过initUI函数初始化界面，使用Qt Designer实现可视化设计与代码分离。

2. 界面布局

主窗口 ：设置固定大小，采用垂直布局划分head和body区域。
Head区域 ：分为headLeft（Logo）和headRight（搜索框、功能按钮），使用QLineEdit和QPushButton实现相应功能。
Body区域 ：左侧bodyLeft为功能按钮区，右侧bodyRight使用QStackedWidget管理多个页面，实现页面切换。

3. 自定义控件

创建BtForm自定义按钮控件，实现悬停变色和动画效果，封装图标、文本和动画逻辑，提高复用性。

4. 界面美化

QSS样式：通过全局和局部样式设置统一界面风格，利用伪状态实现交互效果。
阴影与透明 ：使用QGraphicsDropShadowEffect添加窗口阴影，设置透明背景提升立体感。
字体与图标：设置统一字体，合理加载和调整图标大小。

5. 核心技术

掌握QVBoxLayout、QHBoxLayout和QStackedWidget等布局管理器的使用，学会封装自定义控件和灵活运用QSS样式。

📣 结语

界面开发是Qt项目的核心环节，QQMusic项目通过合理的布局规划、自定义控件和QSS美化，实现了功能与视觉的统一。复习时需重点掌握：

布局管理器的选择与嵌套使用。
自定义控件的封装思路（如BtForm的动画实现）。
QSS样式的灵活运用（背景、边框、悬停效果）。

通过实践这些知识点，可有效提升Qt界面开发的规范性和用户体验设计能力。后续可进一步扩展换肤功能、网络模块等，完善项目功能。