Qt-网易云音乐界面实现-1 窗口隐藏拖拽移动,自定义标题栏

最近也换了公司,也换了新的工作,工资也象征性的涨了一点点,但是最近心里还是慌慌,不知道为什么,没有那种踏实感,感觉自己随时可以被抛弃的感觉。感觉自己在荒废时间,也感觉自己在浪费生命。

为了让自己在被抛弃的时候可以有一个养家糊口的工作,现在也得加深一下自己的技能了。给自己一个小目标,先把网易云音乐的界面实现了,其实这个是我很好的愿望了,只是自己懒得动,一直拖到现在。

先放一个参考依据

我们就以这个为主要,先来实现主界面,这里由于没有现成的素材,我也懒得去找相似素材,就展现我的PS渣渣技术了,全程资源抠图实现。

现在经过一上午的努力,终于做出点东西了,先看下图

通过截图软件发现,网易云音乐的界面实现也是隐藏得了原生窗口标题栏,所以,我以同理。

目前实现了该窗口隐藏界面口可拖拽移动

主要利用Qt QMouseEvent里面的

//鼠标按下
void mousePressEvent(QMouseEvent* event);
//鼠标移动
void mouseMoveEvent(QMouseEvent* event);
//鼠标释放
void mouseReleaseEvent(QMouseEvent* event);

  

来实现窗口的移动和拖拽

实现代码如下

/*
 * 鼠标按下操作
 * 记录当前坐标
 */
static QPoint last(0,0);        //保存坐标
const int TITLE_HEIGHT = 50;    //这里也可以使用宏定义,保存标题高度,也就是鼠标点击区域的高度
void MainWindow::mousePressEvent(QMouseEvent *event)
{
    if(event->y()<TITLE_HEIGHT)
    {
        last = event->globalPos();
    }
}
/*
 * 鼠标移动函数
 * 这里实时修改窗口的坐标
 */
void MainWindow::mouseMoveEvent(QMouseEvent *event)
{
    if(event->y()<TITLE_HEIGHT)
    {
        int dx = event->globalX() - last.x();
        int dy = event->globalY() - last.y();
        last = event->globalPos();
        this->move(this->x()+dx,this->y()+dy);
    }
}
/*
 * 鼠标释放函数
 */
void MainWindow::mouseReleaseEvent(QMouseEvent *event)
{
    if(event->y()<TITLE_HEIGHT)
    {
        int dx = event->globalX() - last.x();
        int dy = event->globalY() - last.y();
        this->move(this->x()+dx,this->y()+dy);
    }
}

  

关于背景的实现,有小伙伴可能会发现,设置最下面的背景有问题,我一般用两种方式

1. 就是放一个QLabel,来作为背景

2. 使用绘制函数来绘制背景

在这版本中,我用的第二种方式,代码如下

/*
 * 绘制函数
 * 绘制程序北京
 */
void MainWindow::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);
    QPainter painter_mainback(this);
    painter_mainback.drawPixmap(0,0,this->width(),this->height(),QPixmap(":/mianwindow/images/mainback.png"));

}

 

因为我在这个版本里面,使用了绝对布局,所以,最大化按钮我只做了槽函数,但是没有实际功能。

左上角的LOGO也是抠图实现,使用QLabel来放一个资源就好了。

另外,我的发部分资源都会依赖Qss来连接,下面附上Qss内容

/*标题背景文件*/
QLabel#label_title_back
{
	border-image:url(./images/title_back.png);
}
/*关闭按钮*/
QPushButton#pushButton_close
{
	border-image:url(images/btn_close_n.png);
}
QPushButton::hover#pushButton_close
{
	border-image:url(images/btn_close_h.png);
}
QPushButton::pressed#pushButton_close
{
	border-image:url(images/btn_close_n.png);
}
/*最大化按钮*/
QPushButton#pushButton_max
{
	border-image:url(images/btn_max_n.png);
}
QPushButton::hover#pushButton_max
{
	border-image:url(images/btn_max_h.png);
}
QPushButton::pressed#pushButton_max
{
	border-image:url(images/btn_max_n.png);
}
/*最小化按钮*/
QPushButton#pushButton_min
{
	border-image:url(images/btn_min_n.png);
}
QPushButton::hover#pushButton_min
{
	border-image:url(images/btn_min_h.png);
}
QPushButton::pressed#pushButton_min
{
	border-image:url(images/btn_min_n.png);
}
/*迷你按钮*/
QPushButton#pushButton_mini
{
	border-image:url(images/btn_mini_n.png);
}
QPushButton::hover#pushButton_mini
{
	border-image:url(images/btn_mini_h.png);
}
QPushButton::pressed#pushButton_mini
{
	border-image:url(images/btn_mini_n.png);
}
/*标题LOGO文件*/
QLabel#label_title_logo
{
	border-image:url(./images/title_logo.png);
}

  好了,今天上午就实现了这些功能,希望对小伙伴有所帮助,可以加我微信交流,见下图

 

原文地址:https://www.cnblogs.com/DreamDog/p/9246781.html

时间: 2024-10-20 05:39:18

Qt-网易云音乐界面实现-1 窗口隐藏拖拽移动,自定义标题栏的相关文章

使用flex进行网易云音乐界面构建和布局解析

1.为什么要用flex进行webapp布局 第一,float布局 需要清除浮动,很麻烦. 第二,绝对定位需要考虑位置和空间占位 第三,元素垂直水平居中问题. 2.网易云音乐首页分析3.啥也别说,直接上代码 先来一个html, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"

详解Qt动画框架(2)--- 实现网易云音乐tag切换

在详解Qt的动画框架(一)介绍了关于Qt动画框架一些基础知识,在这一节中,将会实际的看到有关与动画框架的实现,该案例主要实现的具体是网易云音乐tag的切换,网易云音乐中的切换如图所示: 本文介绍的方法也可以达到这种切换的简易效果. 设计动画框架 首先我们需要设计对于动画框架,其需要的动画效果是什么?对于上图,我们需要的是三个tag可以不停的切换,可以抽象为左移以及右移,即一个tag从一个矩形区域,移动到另外的矩形区域,那么对于Tag的承载体选为什么较为合适呢?因为我们仅仅只需要图片的显示,因此Q

Android 开发之网易云音乐(或QQ音乐)的播放界面转盘和自定义SeekBar的实现

这个东西我在eoeAndroid上首发的,但没有详细的实现说明:http://www.eoeandroid.com/thread-317901-1-1.html 在csdn上进行详细的说明吧.(同时上两个社区,这真是个坏毛病,以后专注csdn好了). 1.用过网易云音乐客户端应该都懂得它那个播放界面,是蛮炫的.先看我实现的效果图吧: 自定义SeekBar这里少了点东西,进度条应该有两种颜色表示进度,一种是当前播放进度,一种是下载进度.我只实现了第一个,第二个要实现的话还需要重载SeekBar.

网易云音乐锁屏界面效果实现

最终效果: 完整的实现思路: App如果需要在锁屏界面上显示相关的信息和按钮, 必须先开启远程控制事件(Remote Control Event), 否则锁屏界面只显示滑动解锁. 实现锁屏界面信息, 将歌曲的相关信息更新到锁屏界面上 实现锁屏界面的事件处理, 在锁屏界面和上拉的快速功能菜单中实现播放控制 远程控制事件的实现 在iOS7.1之前, 远程控制事件主要涉及以下三个方法: 开始接收远程控制事件 结束接收远程控制事件 触发远程控制事件后的捕获处理 官方文档对这三个方法的描述如下, 这里做了

Qt-网易云音乐界面实现-2 红红的程序运行图标,和相似下方音乐条

被调出来出差了,这次出差可以说是非常不开心,这次出差也算给我自己提了个醒吧,那就是注意自己的精力,自己的口碑,和比人对自己的信任.具体内容如下 我们公司有一款硬件的设备的电路是外包给某个人来做的,这个人事开始的同事,后面他自己准备单干,但是呢,失败了,最近有找了份工作糊口,但是还是结了这个活,今天来调试,把设备拆了,调试完就因为赶着明天回去上班,就撤了,撤了,撤了,留我一个写软件的来装,结果很悲剧,好多都有问题,还有个灯不亮了,虽然不影响使用,但是还是不是一个完美的产品.有点小遗憾. 这间事其实

Qt-网易云音乐界面实现-3 音乐名片模块的实现

这个模块其实我是不知道该叫什么的,暂时就叫做音乐名片模块吧,这可以看到,这个模块简单的显示以下信息. 1. 歌曲名称 2. 歌曲歌唱者 3. 歌曲封面 4. 喜欢歌曲的按钮 5. 分享歌曲的按钮 6. 全屏显示歌曲信息的按钮(在歌曲封面上面) 看下对比图 正版的动图有点大了,演示不了了,大家可以自己体验一下网易云音乐的这个动作. 下面说说我是怎么实现这个小小的音乐名牌的. 1. 歌曲名称 就是一个简单的label,这里还没有处理完成,只是简单的设置了样式,但是没有做字符超长检测,在后面会加上 2

小白学爬虫:网易云音乐歌单(一)

从零开始写爬虫,初学者的速成指南! 介绍 什么是爬虫? 先看看百度百科的定义: 号:923414804群里有志同道合的小伙伴,互帮互助,群里有不错的视频学习教程和PDF! 简单的说网络爬虫(Web crawler)也叫做网络铲(Web scraper).网络蜘蛛(Web spider),其行为一般是先"爬"到对应的网页上,再把需要的信息"铲"下来. 为什么学习爬虫? 看到这里,有人就要问了:google.百度等搜索引擎已经帮我们抓取了互联网上的大部分信息了,为什么还

Ubuntu 16.04 一系列软件安装命令,包括QQ、搜狗、Chrome、vlc、网易云音乐安装方法

1 简介 Ubuntu 16.04安装完后,还需要做一些配置才能愉快的使用,包括添加软件源.安装搜狗输入法.Chrome浏览器.网易云音乐.配置快捷键.安装git等等,下面就跟着我来配置吧,just do it 2 版本选择 如果你是小白,不想折腾,可以直接选择安装deepin linux,中文名”深度Linux”,这个是国内目前最好用的Linux之一,开箱即用,常用软件都安装好了,甚至连最新版的QQ都有,mac风格的界面也很漂亮. 但是,作为一个程序员,还是要使用Ubutnu,之前博主用过Ub

实现 60fps 的网易云音乐首页

网易云音乐是一款很优秀的音乐软件,我也是它的忠实用户.最近在研究如何更好的开发TableView,接着我写了一个Model驱动的小框架 - MDTable.为了去验证框架的可用性,我选择了网易云音乐的首页来作为Demo,语言是Swift 3. 本文的内容包括: 实现网易云音乐首页的思路如何建立一个轻量级的UITableViewController(不到100行)性能瓶颈原因以分析及如何优化到接近60fps Note:本文并没有用Reveal去分析网易云音乐iOS客户端的原始UI布局,所以实现方式