Qt-网易云音乐界面实现-6 迷你个人中心实现

最新推荐文章于 2022-09-01 21:47:55 发布
最新推荐文章于 2022-09-01 21:47:55 发布
阅读量2.5k 收藏 10
点赞数
分类专栏： Qt、QML # Qt 网易云音乐界面实现 文章标签： Qt Qss
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z609932088/article/details/80960219
版权

这个界面除了麻烦耗时，没有啥技术含量。暂时我也就把它称为迷你个人中心，因为后面还有一个个人中心了。

先看下完成品

左侧是我的，右侧是原生

个人感觉还可以吧，哈哈哈。给我自己奖励一个鸡腿。

看下头文件

#ifndef PERSONFORM_H
#define PERSONFORM_H

#include <QWidget>
#include <QPaintEvent>
#include <QPainter>
namespace Ui {
class PersonForm;
}

class PersonForm : public QWidget
{
    Q_OBJECT

public:
    explicit PersonForm(QWidget *parent = 0);
    ~PersonForm();
protected:
    void paintEvent(QPaintEvent *event);
private slots:
    void on_pushButton_person_head_image_clicked();

    void on_pushButton_clicked();

    void on_pushButton_sign_clicked();

    void on_pushButton_fans_clicked();

    void on_pushButton_attention_clicked();

    void on_pushButton_dynamic_clicked();

    void on_pushButton_mymember_clicked();

    void on_pushButton_dengji_clicked();

    void on_pushButton_shop_clicked();

    void on_pushButton_person_infor_clicked();

    void on_pushButton_bend_clicked();

    void on_pushButton_off_clicked();

private:
    Ui::PersonForm *ui;
};

#endif // PERSONFORM_H

下面是源文件代码

#include "personform.h"
#include "ui_personform.h"
#include <QDebug>
PersonForm::PersonForm(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::PersonForm)
{
    ui->setupUi(this);
}

PersonForm::~PersonForm()
{
    delete ui;
}

void PersonForm::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);
    QPainter painter_mainback(this);
    painter_mainback.drawPixmap(0,0,this->width(),this->height(),QPixmap("./images/Personform/mainback.png"));
    ui->pushButton_person_head_image->setMask(QRegion(0,0,40,40,QRegion::Ellipse));     //设置头像遮罩
}
/*
 * 头像点击按钮
 */
void PersonForm::on_pushButton_person_head_image_clicked()
{
    qDebug()<<"头像按钮点击";
}
/*
 * 个人名字点击效果
 */
void PersonForm::on_pushButton_clicked()
{
    qDebug()<<"用户名字点击";
}
/*
 * 签到按钮槽函数
 */
void PersonForm::on_pushButton_sign_clicked()
{
    qDebug()<<"签到按钮点击";
}
/*
 * 粉丝按钮按下
 */
void PersonForm::on_pushButton_fans_clicked()
{
    qDebug()<<"粉丝按钮点击";
}
/*
 * 关注按钮按下
 */
void PersonForm::on_pushButton_attention_clicked()
{
    qDebug()<<"关注按钮点击";
}
/*
 * 动态按钮按下
 */
void PersonForm::on_pushButton_dynamic_clicked()
{
    qDebug()<<"动态按钮点击";
}
/*
 * 我的会员点击按钮
 */
void PersonForm::on_pushButton_mymember_clicked()
{
    qDebug()<<"我的会员按钮点击";
}
/*
 * 等级按钮
 */
void PersonForm::on_pushButton_dengji_clicked()
{
    qDebug()<<"等级按钮点击";
}
/*
 * 商城按钮
 */
void PersonForm::on_pushButton_shop_clicked()
{
    qDebug()<<"商城按钮点击";
}
/*
 * 个人信息按钮设置
 */
void PersonForm::on_pushButton_person_infor_clicked()
{
    qDebug()<<"个人信息设置按钮点击";
}
/*
 * 绑定社交账号按钮
 */
void PersonForm::on_pushButton_bend_clicked()
{
    qDebug()<<"绑定社交账号按钮点击";
}
/*
 * 退出登录按钮
 */
void PersonForm::on_pushButton_off_clicked()
{
    qDebug()<<"退出登录按钮点击";
}

整个迷你个人中心布局

那么怎么调出这个界面了，看下主窗口调用函数

/*
 * 个人信息按钮
 */
void MainWindow::on_pushButton_people_clicked()
{
    if(personform)
    {
        if(personform->isHidden())
        {
            personform->show();
        }
        else
        {
            personform->hide();
        }
    }
    else
    {
        personform = new PersonForm(this);
        personform->setGeometry(588,40,267,367);
        personform->raise();                //提升显示层数
        personform->show();
    }

}

 

这里的大部分美化都是在Qss文件中完成的，下面看下Qss中文件的实现代码

/*迷你个人中心头像按钮*/
QPushButton#pushButton_person_head_image
{
	border-image:url(images/pretty_girl.png);	
}
QPushButton::hover#pushButton_person_head_image
{
	border-image:url(images/pretty_girl.png);
}
QPushButton::pressed#pushButton_person_head_image
{
	border-image:url(images/pretty_girl.png);
}
/*会员表示*/
QLabel#label_user_member_icon
{
	border-image:url(images/Personform/user_nember.png);
}
/*迷你个人中心文本*/
QLabel#label_user_name
{
	color: rgb(175, 175, 175);
}
/*个人中心按钮*/
QPushButton#pushButton
{
	background:#00FFFFFF;
}
QPushButton::hover#pushButton
{
	background:#00FFFFFF;
}
QPushButton::pressed#pushButton
{
	background:#00FFFFFF;
}
/*迷你个人中签到按钮*/
QPushButton#pushButton_sign
{
	border-image:url(images/Personform/btn_tiandao_n.png);	
}
QPushButton::hover#pushButton_sign
{
	border-image:url(images/Personform/btn_tiandao_h.png);
}
QPushButton::pressed#pushButton_sign
{
	border-image:url(images/Personform/btn_tiandao_n.png);
}

/*迷你个人中动态按钮*/
QPushButton#pushButton_dynamic
{
	background:#00FFFFFF;
	color: rgb(130,131,133);	
}
QPushButton::hover#pushButton_dynamic
{
	background:#00FFFFFF;
	color: rgb(255,255,255);
}
QPushButton::pressed#pushButton_dynamic
{
	background:#00FFFFFF;
	color: rgb(130,131,133);	
}
/*迷你个人中心关注按钮*/
QPushButton#pushButton_attention
{
	background:#00FFFFFF;
	color: rgb(130,131,133);	
}
QPushButton::hover#pushButton_attention
{
	background:#00FFFFFF;
	color: rgb(255,255,255);
}
QPushButton::pressed#pushButton_attention
{
	background:#00FFFFFF;
	color: rgb(130,131,133);	
}
/*迷你个人中心粉丝按钮*/
QPushButton#pushButton_fans
{
	background:#00FFFFFF;
	color: rgb(130,131,133);	
}
QPushButton::hover#pushButton_fans
{
	background:#00FFFFFF;
	color: rgb(255,255,255);
}
QPushButton::pressed#pushButton_fans
{
	background:#00FFFFFF;
	color: rgb(130,131,133);	
}
/*迷你个人中心分割线*/
QLabel#labelline_1
{
	background: rgb(55, 57, 61);
}
QLabel#labelline_2
{
	background: rgb(55, 57, 61);
}
QLabel#labelline_3
{
	background: rgb(55, 57, 61);
}
/*迷你个人中心关注文本*/
QLabel#label_attention
{
	color: rgb(255, 255, 255);
}
/*迷你个人中心动态文本*/
QLabel#label_dynamic
{
	color: rgb(255, 255, 255);
}
/*迷你个人中心粉丝文本*/
QLabel#label_fans
{
	color: rgb(255, 255, 255);
}
/*迷你个人中心我的会员按钮*/
QPushButton#pushButton_mymember
{
	background:#00393b3e;	
}
QPushButton::hover#pushButton_mymember
{
	background:#55393b3e;
	border-width:0;
	border-color:rgb(255,132,0,0);
	border-style: solid;
	border-radius: 0px;
}
QPushButton::pressed#pushButton_mymember
{
	background:#00FFFFFF;	
}
/*迷你个人中心我的会员头像*/
QLabel#label_my_menber
{
	border-image:url(images/Personform/user_nember_h.png);
}
/*迷你个人中心我的会员文本*/
QLabel#label_my_member
{
	color: rgb(175, 175, 175);
}
/*迷你个人中心我的会员时间文本*/
QLabel#label_my_member_time
{
	color: rgb(95, 95, 99);
}
/*迷你个人中心我>文本*/
QLabel#label_L_1
{
	color: rgb(95, 95, 99);
}
QLabel#label_L_2
{
	color: rgb(95, 95, 99);
}
/*迷你个人中心等级按钮*/
QPushButton#pushButton_dengji
{
	background:#00393b3e;	
}
QPushButton::hover#pushButton_dengji
{
	background:#55393b3e;
	border-width:0;
	border-color:rgb(255,132,0,0);
	border-style: solid;
	border-radius: 0px;
}
QPushButton::pressed#pushButton_dengji
{
	background:#00FFFFFF;	
}
/*迷你个人中心商城按钮*/
QPushButton#pushButton_shop
{
	background:#00393b3e;	
}
QPushButton::hover#pushButton_shop
{
	background:#55393b3e;
	border-width:0;
	border-color:rgb(255,132,0,0);
	border-style: solid;
	border-radius: 0px;
}
QPushButton::pressed#pushButton_shop
{
	background:#00FFFFFF;	
}
/*迷你个人中心个人信息按钮*/
QPushButton#pushButton_person_infor
{
	background:#00393b3e;	
}
QPushButton::hover#pushButton_person_infor
{
	background:#55393b3e;
	border-width:0;
	border-color:rgb(255,132,0,0);
	border-style: solid;
	border-radius: 0px;
}
QPushButton::pressed#pushButton_person_infor
{
	background:#00FFFFFF;	
}
/*迷你个人中心绑定按钮*/
QPushButton#pushButton_bend
{
	background:#00393b3e;	
}
QPushButton::hover#pushButton_bend
{
	background:#55393b3e;
	border-width:0;
	border-color:rgb(255,132,0,0);
	border-style: solid;
	border-radius: 0px;
}
QPushButton::pressed#pushButton_bend
{
	background:#00FFFFFF;	
}
/*迷你个人中心关闭按钮*/
QPushButton#pushButton_off
{
	background:#00393b3e;	
}
QPushButton::hover#pushButton_off
{
	background:#55393b3e;
	border-width:0;
	border-color:rgb(255,132,0,0);
	border-style: solid;
	border-radius: 0px;
}
QPushButton::pressed#pushButton_off
{
	background:#00FFFFFF;	
}
/*迷你个人中心等级头像*/
QLabel#label_my_dengji
{
	border-image:url(images/Personform/dengji.png);
}
/*迷你个人中心等级文本*/
QLabel#label_my_dengji_1
{
	color: rgb(175, 175, 175);
}
/*迷你个人中心我的会员时间文本*/
QLabel#label_my_dengji_2
{
	color: rgb(95, 95, 99);
}
/*商城*/
QLabel#label_my_shop
{
	border-image:url(images/Personform/shop.png);
}
QLabel#label_my_shop2
{
	color: rgb(175, 175, 175);
}
QLabel#label_L_3
{
	color: rgb(95, 95, 99);
}
/*个人信息设置*/
QLabel#label_my_setup
{
	border-image:url(images/Personform/setup.png);
}
QLabel#label_my_setup2
{
	color: rgb(175, 175, 175);
}
QLabel#label_L_4
{
	color: rgb(95, 95, 99);
}
/*绑定社交账号*/
QLabel#label_my_bend
{
	border-image:url(images/Personform/bend.png);
}
QLabel#label_my_bend2
{
	color: rgb(175, 175, 175);
}
QLabel#label_L_5
{
	color: rgb(95, 95, 99);
}
QLabel#label_my_bend_3
{
	border-image:url(images/Personform/xinlang.png);
}
QLabel#label_my_bend_4
{
	border-image:url(images/Personform/qita.png);
}
/*退出登录*/
QLabel#label_my_off
{
	border-image:url(images/Personform/off.png);
}
QLabel#label_my_off2
{
	color: rgb(175, 175, 175);
}

DreamLife.
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Qt---网易云音乐
12-27
Qt开发的Windows网易云音乐
Qt 实现PC端网易云音乐界面
亅会飞的乌龟的博客
12-25 8607
闲暇时间持续开发中，欢迎大家提供想法和交流。。。 github: https://github.com/FlyWM/MumuMusic
基于QT搭建的网易云音乐
gy827257174的博客
09-01 2627
用QT实现的网易云音乐，目前实现的功能有： 1.本地音乐扫描与播放。 2.使用的Binaryify/NeteaseCloudMusicApi作为api,链接部署在本地的网易云音乐服务器，通过API播放网络音乐。 注：本软件仅供学习使用，不可用于商业用途，本人不拥有网易云音乐版权，此软件所有UI,界面框架版权全归网易所有，侵权联系本人，收到将立即删除。
用qt做网易云音乐--个人中心实现
weixin_51965272的博客
03-19 1150
先上完成图 大体设计及位置，主要是按钮和label 我这里图标采用的是QLabel的pixmap 记住要勾选scaledContents，缩放内容到label大小，不会导致图标只显示一部分 这样设计完成后有一个问题，就是label会遮挡button的事件 我们要用setAttribute(Qt::WA_TransparentForMouseEvents)让label事件穿透 以下是窗体cpp文件(供大家参考) #include "personalcenterwindow.h" #include "ui
Qt-网易云音乐界面实现-5 收藏列表，播放列表实现 QListWidget QTableWidget
DreamLife
07-07 5955
先上目前完成的内容吧，发现后面越写越多。在看看点击量，心凉凉。完成了左侧的导航列表，还有就是右下角的播放列表。//创建的歌单 my_Create_Music_List = new QListWidget(ui-&gt;widget_list); connect(my_Create_Music_List,&amp;QListWidget::itemClicked,this,&amp;...
网易云音乐app用户个人中心(对比QQ音乐）
weixin_37694416的博客
02-27 8352
打开网易云，寻找用户个人中心咋一看，顶部居中的三枚按钮没有个人中心，排除法，点来左上角类似设置的图标发现个人中心入口，一张晶莹剔透的背景墙上有头像，昵称，用户等级的信息，这个默认的背景墙上还有一个小巧的”签到”Button，签到加积分还能跳转去积分商城界面（这个兴趣型需求做的很巧妙）；点击用户头像和用户昵称都能进入个人中心，而点击等级跳转到用户等级界面这个界面厉害了，介绍了当前用户等级的特权，还有...
用qt做网易云音乐--源代码
weixin_51965272的博客
04-01 1317
之前由于太忙，没有继续写了，所以把已完成的代码上传到git，给大家分享 先看下目前完成的成果 有些部分模块实现的方法我写在之前的博客里了，还有些都是相似的功能，大家看看源代码理解一下，如果有哪些地方不懂，可以私信我，我看到会解答的 git链接：https://e.coding.net/hhpweb/wyymusic/wyymusic.git 有需要的小伙伴可以下载哦 如果大家觉得对你们帮助的话，可以关注下我博客，顺手点个赞哦 ...
Qt-网易云音乐界面实现-3 音乐名片模块的实现
DreamLife
07-03 3692
这个模块其实我是不知道该叫什么的，暂时就叫做音乐名片模块吧，这可以看到，这个模块简单的显示以下信息。1. 歌曲名称2. 歌曲歌唱者3. 歌曲封面4. 喜欢歌曲的按钮5. 分享歌曲的按钮6. 全屏显示歌曲信息的按钮（在歌曲封面上面）看下对比图正版的动图有点大了，演示不了了，大家可以自己体验一下网易云音乐的这个动作。下面说说我是怎么实现这个小小的音乐名牌的。1. 歌曲名称 就是一个简单的label，这...
Qt实现网易云音乐进度条效果
08-24
主要为大家详细介绍了Qt实现网易云音乐进度条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
qt-qml实现达图.7z
09-19
qt-qml实现达图.7z
qt for android 音乐播放器QML界面
10-21
qml编写的播放器界面，列表功能，没有实现播放音乐功能，只是一个UI列表界面，读取音乐列表格式显示。
Qt高仿网易云音乐界面源码
08-20
Qt高仿网易云音乐界面源码，Qt界面美化，Qt项目源码。
Qt：qvbox.h”: No such file or directory
寒冰
11-04 1843
在QT4的编译环境中编Qt3的教程《家庭价值》时候，出现qvbox.h”: No such file or directory The QVBox class is now only available as Q3VBox in Qt 4. You can achieve the same result as QVBox by creating a QWidget with a ve
详解Qt动画框架（2）--- 实现网易云音乐tag切换
我只是一个单纯的2的博客
08-07 3177
在 详解Qt的动画框架（一）介绍了关于Qt动画框架一些基础知识，在这一节中，将会实际的看到有关与动画框架的实现，该案例主要实现的具体是网易云音乐tag的切换，网易云音乐中的切换如图所示： 本文介绍的方法也可以达到这种切换的简易效果。 设计动画框架 首先我们需要设计对于动画框架，其需要的动画效果是什么？对于上图，我们需要的是三个tag可以不停的切换，可以抽象为左移以及右移，即
用qt做网易云音乐--画廊实现
weixin_51965272的博客
04-01 390
qt画廊采用子控件最多显示父控件大小的原理，采用move函数进行，再加QPropertyAnimation动画进行操作 下面上下最终成品 以下是成员变量 int m_currentShowGalleryFirstIndex; int m_currentShowGalleryLastIndex; 由于向左或向右移动时，要有标志来确定是否到最左或最右来判断还能否移动，这里定义两个索引用来判断位置 int m_galleryItemCount; 项总数,总数*（每个项宽度+项间
qt编写网易云界面（12）----最新音乐模块
比卡丘不皮的博客
11-17 1196
简单的模仿网易云部分，轻松写出好看界面
qml之从零开始编写网易云音乐（一）
小李的博客
04-11 2442
初步实现无边框窗口，以及左边的导航栏，效果如下：主要包括无边框窗体以及左边的导航栏。无边框窗体设计思路：1、主窗体设置无边框属性。flags:Qt.FramelessWindowHint | Qt.Window;2、标题栏拖拽移动。 MouseArea{ property real xmouse; //鼠标的x轴坐标 property real ymous...
【QT】QT5基于QTimer定时器和QPainter绘制动态图像的学习
大糊涂虫
05-17 1992
效果图： 目录结构： 头文件： #ifndef MYWIDGET_H #define MYWIDGET_H #include <QMainWindow> namespace Ui { class MyWidget; } class MyWidget : public QMainWindow { Q_OBJECT public: explicit MyWidget(QWidget *parent = 0); ~MyWidget(); voi
QT实现网易云音乐播放器
最新发布
05-15
要实现网易云音乐播放器的功能，可以使用 Qt 平台和网易云音乐的 API，实现获取歌曲信息、搜索歌曲、播放歌曲等功能。 下面是一个简单的实现步骤： 1. 使用 Qt Creator 创建一个新的 Qt Widgets 应用程序项目。 2....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DreamLife.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值