QT-项目（音乐）（二）

最新推荐文章于 2026-08-28 17:51:19 发布

原创最新推荐文章于 2026-08-28 17:51:19 发布 · 612 阅读

29 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

Body的设计

Bodyleft实现

动态线条动画：用 QPropertyAnimation 实现呼吸效果

Body的设计

Bodyleft实现

left样图：

样式设计：图片，文本，动画设计

功能设计：实现界面切换

此处需要自定义控件表单完成美化工作：

这样才能使多个控件统一成为我们设计的表单控件，选中我们想要功能实现的控件右键提升为"你设计的类"，此处我设计的表单名为BtForm

BtForm:

在 Qt 界面开发中，细节动效和交互反馈是提升用户体验的关键。一个音乐播放器的功能按钮组为例，分享如何通过 QPropertyAnimation 实现动态线条动画，并结合信号槽机制管理按钮状态，打造流畅的交互体验。

动态线条动画：用 QPropertyAnimation 实现呼吸效果

为了让按钮组更具活力，我们给每个按钮添加了一个垂直线条的 "呼吸动画"—— 线条会在固定范围内循环伸缩，形成类似呼吸的视觉效果。核心代码如下：

// 初始化UI后开始创建动画
ui->setupUi(this);
ui->lineBox->hide();  // 先隐藏线条容器，按需显示

// 线条1动画：1500ms一个周期，从(0,15)收缩到(0,0)再伸展回原位
line1Animal = new QPropertyAnimation(ui->line1, "geometry", this);
line1Animal->setDuration(1500);  // 动画时长
line1Animal->setKeyValues({
    {0, QRect(0, 15, 2, 0)},    // 起始状态：高度为0
    {0.5, QRect(0, 0, 2, 15)},  // 中间状态：高度15（完全伸展）
    {1, QRect(0, 15, 2, 0)}     // 结束状态：回到高度0
});
line1Animal->setLoopCount(-1);  // -1表示无限循环
line1Animal->start();

// 线条2-4动画：依次增加100ms时长，形成错落感
line2Animal = new QPropertyAnimation(ui->line2, "geometry", this);
line2Animal->setDuration(1600);  // 比线条1慢100ms
// ... 其余参数与line1类似，仅位置x坐标依次为7、14、21（间隔7像素）

实现要点：

通过geometry属性控制线条的位置和大小，QRect(x, y, width, height)中height的变化是动画核心；
多个线条通过不同的duration（时长）和起始 x 坐标，形成有层次感的动效；
动画对象需在类中声明为成员变量（如line1Animal），避免局部变量被销毁导致动画失效。

按钮状态管理：图标、文本与交互反馈

每个功能按钮（BtForm）需要展示图标、文本，并在点击时切换状态。我们通过封装函数实现样式统一管理：

// 设置按钮图标、文本和页面ID
void BtForm::setIconAndText(const QString &iconPath, const QString &text, int id)
{
    ui->btIcon->setPixmap(QPixmap(iconPath));  // 显示图标
    ui->btText->setText(text);                 // 显示文本
    this->_PageId = id;                        // 绑定页面ID（用于切换页面）
}

// 点击时切换选中样式，并发送信号
void BtForm::mousePressEvent(QMouseEvent *event)
{
    (void)event;
    // 选中状态：背景色变为青绿色
    ui->btStyle->setStyleSheet("#btStyle{background-color:rgb(30,206,154);}");
    emit BtClicked(_PageId);  // 发送当前页面ID
}

// 重置未选中状态
void BtForm::clear()
{
    // 未选中状态：浅灰色背景
    ui->btStyle->setStyleSheet("#btStyle{background-color:#f0f0f0;}");
}

使用示例：初始化 6 个功能按钮，分别对应不同功能页面：

// 为每个按钮设置图标、文本和ID
ui->Rec->setIconAndText(":/images/rec.png", "推荐", 0);
ui->radio->setIconAndText(":/images/radio.png", "电台", 1);
ui->music->setIconAndText(":/images/music.png", "音乐厅", 2);
ui->like->setIconAndText(":/images/like.png", "我喜欢", 3);
ui->local->setIconAndText(":/images/local.png", "本地下载", 4);
ui->recent->setIconAndText(":/images/recent.png", "最近播放", 5);

// 默认选中"本地下载"按钮（ID=4）
ui->local->showBtFormStyle();  // 显示线条动画容器
ui->stackedWidget->setCurrentIndex(4);  // 切换到对应页面

信号槽联动：实现页面切换与状态同步

当点击按钮时，需要触发两个核心操作：切换到对应页面、重置其他按钮的选中状态。通过信号槽机制可以优雅实现：

// 在主窗口中连接信号槽
connect(ui->Rec, &BtForm::BtClicked, this, &miniMusic::onBtClicked);
connect(ui->radio, &BtForm::BtClicked, this, &miniMusic::onBtClicked);
// ... 其他按钮同理

// 统一处理按钮点击事件
void miniMusic::onBtClicked(int pageId)
{
    // 查找所有BtForm类型的按钮，重置未选中状态
    QList<BtForm*> allBtForms = findChildren<BtForm*>();
    for (auto bt : allBtForms) {
        if (bt->getPageId() != pageId) {  // 排除当前点击的按钮
            bt->clear();  // 重置为未选中样式
        }
    }
    // 切换到目标页面
    ui->stackedWidget->setCurrentIndex(pageId);
}

界面切换功能基础：

点击左侧按钮的必要动作是主页的切换，因此bodyright不能仅仅是单一的widget，此处实现多界面需要借助stackwidget。

QT内置控件无法实现多功能触发案件，因此此处我们需要自定控件来达成目的：BtFrom，空间之间的信息传递依托于信号，当点击时触发信号由主界面minimusic接收并处理进行切换。在 Qt 开发中，信号与槽机制是实现组件交互的核心。

场景需求

我们有一个音乐播放器界面（miniMusic），包含多个功能按钮（Rec、radio、music等），每个按钮对应一个子页面（BtForm）。点击任意按钮时，需要：

切换到对应页面（通过stackedWidget）；
重置其他未选中的子页面状态。

代码

1. 信号与槽连接

首先在初始化函数中，将所有按钮的点击信号连接到同一个槽函数：

void miniMusic::ConnectSignalandSlots()
{
    // 多个按钮连接到同一个槽函数onBtForm_clicked
    connect(ui->Rec, &BtForm::BtClicked, this, &miniMusic::onBtForm_clicked);
    connect(ui->radio, &BtForm::BtClicked, this, &miniMusic::onBtForm_clicked);
    connect(ui->music, &BtForm::BtClicked, this, &miniMusic::onBtForm_clicked);
    connect(ui->like, &BtForm::BtClicked, this, &miniMusic::onBtForm_clicked);
    connect(ui->local, &BtForm::BtClicked, this, &miniMusic::onBtForm_clicked);
    connect(ui->recent, &BtForm::BtClicked, this, &miniMusic::onBtForm_clicked);
}

关键思路：所有按钮发送相同的BtClicked信号（携带页面 ID 参数），触发同一个槽函数，避免为每个按钮写单独的处理逻辑。

槽函数统一处理逻辑

槽函数接收页面 ID 参数，实现页面切换和状态重置：

void miniMusic::onBtForm_clicked(int pageid)
{
    // 查找所有BtForm类型的子组件
    QList<BtForm*> btforms = this->findChildren<BtForm*>();
    
    // 重置非当前页面的状态
    for(auto bt : btforms)
    {
        if(bt->getpageid() != pageid)  // 过滤当前点击的页面
        {
            bt->clear();  // 假设clear()用于重置按钮样式/状态
        }
    }
    
    // 切换到目标页面
    ui->stackedWidget->setCurrentIndex(pageid);

Bodyright界面设计

如上图body有bodyleft和bodyright两部分，其上样式各位根据个人喜好设定；

right窗口的设计

如示例图所示主页面right部分实现功能为实现展示栏（标题，图片，按钮），进度条，功能按钮。

right推荐界面功能设计

在音乐播放器、内容推荐类界面设计中，带滑动效果的作品展示栏是提升交互体验的核心模块。本文从设计层面拆解核心思路，无需复杂代码实现，聚焦布局逻辑与交互体验设计。

核心布局结构设计

1. 整体框架（分层设计）

层级	作用	设计要点
外层容器	承载整个展示栏（命名：RecBox）	固定宽高，预留左右滑动按钮位置，边框 / 圆角美化（如 8px 圆角，浅灰色背景）
滑动内容区	包裹所有作品项的可移动容器	无固定宽度（随作品项数量自适应），垂直布局（QVBoxLayout）排列作品项
作品项（Item）	单个内容卡片（如 “推荐 - 001”）	统一尺寸（如宽 200px× 高 120px），包含缩略图 + 标题，项间距 10px，左对齐排列

2. 布局逻辑

作品项采用垂直流式布局，所有项在滑动内容区中依次排列，超出外层容器宽度时隐藏；
滑动内容区仅做 “位移”，不改变自身大小，保证作品项布局结构稳定；
外层容器添加溢出隐藏（Qt 中通过setClip(true)实现），避免滑动内容区超出可视范围。

滑动交互设计

1. 交互规则

操作	反馈效果
点击左滑按钮	滑动内容区向左移动固定步长（如 200px），动画时长 300ms，缓动曲线（OutQuad）
点击右滑按钮	滑动内容区向右移动固定步长，最大复位到初始位置（x=0），避免空白
边界限制	左滑不超过 “内容总宽度 - 外层容器宽度”，右滑不超过 0，防止滑动过度

2. 视觉细节