![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
qt(QSS)进步空间
比卡丘不皮
一个热爱学习与热爱分享的有志青年
展开
-
qt编写网易云界面(16)---- 源码与感想
前言: 网易云这个项目弄完了,不知道为何,做完后有点点失落感,当时没有考虑到后面会有小伙伴们想要学习这个代码,所以在项目开始的时候做的非常错乱,很多现在看看都是非常低级的问题。 这个项目算是刚接触qt的小伙伴们,想要练习美化界面的简单练手吧,其实在我自己刚开始学习qt就是感觉很少有相关教程来教你如何写美化界面的。毕竟每个人审美能力是不一样的,这也是我写这个项目与大家分享的主要动力吧。 本人使用的qt版本5.12.3. 项目下载地址中文 git:...原创 2021-11-23 23:00:31 · 16757 阅读 · 37 评论 -
qt编写网易云界面(15)----播放音乐模块
网易云不能播放音乐算什么播放器,这里就简单的加了一个播放功能,目前可以播放当地音乐,下面我们来看看吧。代码整理中,下个博客上传源码。 点击开始按钮就可听到音乐了,这里要注意的地方就是播放条与音乐的进度问题,音乐播放改变进度条,但是我们又想拖动音乐条改变当前播放位置。这样逻辑就成立一个死循环。播放歌曲的时候呢,就会断断续续 这里的解决方案就是bloksingle,在变的一下可以,停止发送对象的信号,这样就完美的解决了问题所在。 代码段部分: player...原创 2021-11-23 21:15:55 · 1403 阅读 · 0 评论 -
qt编写网易云界面(14)----个人消息模块
没有想到这个简单的项目,很多人想要我把它做完,今天我就加了一个个人消息模块。稍后我在添加播放音乐的功能后,提供出源码,希望刚接触qt想要制作美化界面的小伙伴们,从这里学到一点点就好。我就十分开心了。 这个图是网易云的原图部分,效果如下。我完成的部分为: 只是简单的像而已,这里主要用到QlistWidget 按钮部分在最新音乐模块有讲到过。别的没有啥可以讲的了。看下动态图效果: 按钮功能没有写,其实在最新音乐模块中,大家都学会了,就是加载不同的东西。下...原创 2021-11-23 06:53:52 · 3453 阅读 · 6 评论 -
qt编写网易云界面(13)----一键换肤模块
模仿网易云一键换肤,轻松学习qt变成与美化界面,源码也会很快上传原创 2021-11-19 11:30:25 · 2511 阅读 · 5 评论 -
qt编写网易云界面(12)----最新音乐模块
简单的模仿网易云部分,轻松写出好看界面原创 2021-11-17 16:08:44 · 1265 阅读 · 0 评论 -
qt编写网易云界面(11)----歌手模块
今天也把歌手模块给做了一下,后面在做些基本的东西模块,就把源码分享给大家,希望学习qt的小伙伴们都能写出来比较好看的界面。 这个模块按理是要使用数据库,通过筛选功能显示出对应的界面,这里我只是简单的加载界面,这部分功能喜欢的小伙伴们可以自己实现一下。 这次直接上自己写的界面吧。这个还是比较简单的,那些选项我使用QpushBotton 与 QButtonGroup 结合,每个button的checked设置为true.这样基本样式就出来了,后面就是点...原创 2021-11-13 01:00:53 · 1797 阅读 · 0 评论 -
qt编写网易云界面(10)----排行榜模块
这个模块东西感觉不是很多,其实在,开发的时候细节还是很麻烦的,本以为2个小时绝对搞定,结果搞了半天,不过也想到了很多方式去实现对应的效果,希望大家能够喜欢。 话不多说,我们来看这个模块目标网易云中的样子:我完成的模块部分:动态图如下:...原创 2021-11-12 10:12:20 · 3108 阅读 · 0 评论 -
qt编写网易云界面(9)----歌单模块
今天把歌单模块给弄完了,这个模块还是比较简单的,就是基本的qss 贴图。以及QButtonGroup的基本使用,实现单点按钮的功能。计划把后面几个模块写完成后,上传代码,希望喜欢我的可以关注,第一时间可以拿到源码。话不多说,先上我们目标的网易云的界面:点击对应的按钮会又不同的内容出现,这里还是非常简单的,我实现的效果:动态图效果:主要的qss 代码:/*歌单部分*/QWidget#picTitle{ border-image:url(images/pict...原创 2021-11-10 02:17:04 · 1073 阅读 · 1 评论 -
qt编写网易云界面(8)----专属定制界面
前段时间把qt网易云中的简单的画廊写了一下,多谢狗哥大佬给的指点,后期我也会把源码发到git 上,让大家快点了解,喜欢我博客,可以关注我,私信我可以提前得到当前代码。(看到必回)我们目标的网易云界面。目前完成的部分:主要的动态图:主要使用的qss:/*专属定制部分*/QLabel#lab_per{ font-family:"微软雅黑"; color: rgb(55,55,55); font-size:20px; font-weight: bo...原创 2021-11-05 16:22:49 · 1380 阅读 · 2 评论 -
qt 实现画廊展示
在完成网易云部分,要用到画廊动画,感谢公孙二狗的指导,给的简单例子,自己改写代码,完成下面效果。 其实想法很简单,就是我们使用两个Qwidget,一个是显示,一个是存放加载的资源,然后,在通过QPropertyAnimation,移动到对应的位置,就可以达到这样的基本效果。点击下载: 代码下载连接GalleryItem的布局Widget布局代码部分:主要部分:#ifndef GALLERYPRIVATE_H#define GALLERYPRIVA...原创 2021-11-04 21:13:15 · 918 阅读 · 0 评论 -
qt编写网易云界面(7)----个性推荐界面
前段时间把qt网易云中的轮播图,写了一下,多谢谢建波大佬给的指点,后期我也会把源码发到git 上,让大家快点了解,我们目标的网易云界面。当前我完成的部分:还是有点味道的,哈哈,简单的gif 的动态图...原创 2021-11-01 17:10:42 · 5944 阅读 · 15 评论 -
qt 实现轮播图
这个是为了编写我网易云项目中轮播图的效果,目前移动动画有点问题,后期把功能给加上。采用了QGraphicsScene 、QGraphicsView、QGraphicsPixmapItem的方式,参考了网上博主https://blog.csdn.net/h391998495979/article/details/101868838然后自己采用了map 关联了button 与 图片的连接。主要代码:#include "picturewidget.h"#include "ui_pi..原创 2021-10-29 18:26:34 · 2859 阅读 · 8 评论 -
qt编写网易云界面(6)----个人中心的实现
我们点击网易云的个人中心的时候。目前我实现的部分:还是有点区别的,这部分动态图如下:这里personform.ui布局部分:personform.h#ifndef PERSONFORM_H#define PERSONFORM_H#include <QWidget>namespace Ui {class personForm;}class personForm : public QWidget{ Q_OBJECTprote...原创 2021-10-25 11:44:02 · 1372 阅读 · 1 评论 -
qt编写网易云界面(5)----搜索框的实现
我们知道当我们点击网易云的搜索框的时候,会出现对应的搜索内容。如下图:滑块可以滑动,选择对应的模块我实现的部分:gif显示的还是不是那么好。下面简单实现过程:主页面使用过滤器,构造函数中: ui->line_Search->installEventFilter(this); ui->line_Search->setMouseTracking(true); searchForm = new SearchForm(); //创...原创 2021-08-31 23:28:29 · 2352 阅读 · 0 评论 -
QListWidget与QTableWidget的使用以及样式设置
QListWidget和QTableWidget的使用和属性,QTableWidget和QListWidget样式表的设置,滚动条的样式设置一、QListWidget的使用//一、QListWidgetlist_widget = new QListWidget();//list_widget->resize(200,300);list_widget->setFixedWidth(300);//设置item图标大小list_widget->setIconSize(转载 2021-08-30 16:40:16 · 7985 阅读 · 1 评论 -
qt编写网易云界面(4)----TabWidget的实现
我们目标对象网易云:上次完成的部分是:我们今天实现中间tabWidget的部分,具体页面会有不同,以后也会慢慢修改,当前完成:对应qss,其实很简单:/*QTabWidget 的样式*/QTabWidget::pane{ top:10px; border: none; }/*个性推荐*/QTabBar::tab{ background:transparent; border-bottom: 3px solid rgb(255,255,25...原创 2021-08-26 23:44:07 · 2141 阅读 · 1 评论 -
qt编写网易云界面(3)----列表框的实现
今天完成列表框的数据,我们来看下,原版网易云部分:我们要实现的就是左边的部分,标题栏与下面控制栏都已经写完毕。详细可以看我前面播客。目前完成的部分:首先要说明一下,里面会有些不同,毕竟我找不到图标呀,这点希望大家能够用就好。上一个动态图:这部分主要代码:void AllMain::setListT1(){ //首先我们要把滚动条给取消掉 垂直与水平 ui->listT1->setVerticalScrollBarPolicy(Qt::...原创 2021-08-21 01:29:56 · 2459 阅读 · 6 评论 -
qt编写网易云界面(2)---- 音乐条与搜索框
抽了一点时间,把今日的界面完善了一下,界面如下:其实主要是找ui比较麻烦,核心的qss:/*标题输入框*/QLineEdit#line_Search{ background: rgb(225,62,62); border-radius: 10px; padding: 0px 0px 0px 30px; font-size: 14; font-family: "微软雅黑"; color: rgb(241,120,120);}QLineEdit::pressed#.原创 2021-08-16 22:56:02 · 2318 阅读 · 5 评论 -
qt编写网易云界面(1)----标题框的实现
大家都知道,在qt基本的做完后,想要对界面美化,其实在qt 使用qss 还是很好的,因为之前实习的时候做过java web ,相比网页来说还是有点差距,话不多说,先看看目标界面。哈哈,我是非常喜欢周深的,当然不知道你喜不喜欢。目前我完成:就完成自定义给的标题栏,后期有时间我会不断的完善。其中比较麻烦的就是ui,本身我不会ui设计,图标都是在网上找的,推荐给大家网站:https://www.iconfont.cn/代码核心:AllMain::AllMain(QWidget..原创 2021-08-15 23:17:30 · 6029 阅读 · 12 评论 -
偷偷学习qt 样式,然后写出惊艳所有人的界面
QT样式表qt样式表主要受到css的启发,通过调用QWidget:: setStyleSheet() 或 QApplication::setStyleSheet()来设置样式,也可以在界面的样式表中直接填写。盒子模型(the Box Model)学习样式之前我们要先了解盒子模型,也是最基本的样式:content 为最内部的矩形,通常是绘制文子、图片的地方。 padding 负责指定填充操作,主要是窗口部件内容,与边缘线(border)之间的空隙,它可以用top 、right、bott...原创 2021-04-06 11:41:31 · 2273 阅读 · 1 评论 -
QT 自定义圆形QLabel 加载圆形图片
每天自定义一些qt 控件,让自己学到更多的东西,我们经常看到一些圆形的账号图片,我们知道常用QLabel加载图片,但是加载的都是方形的,而且qt并不像html 那样改变特别方便。我们常见的图像如:还有csdn的用户的:都是这种圆形图片,想要需要我们重新定义控件,自己来画,才会出结果。然后我们就从新定义一个类,来继承QLable 或者继承 QFrame :这里提示一下,我定义类的时候把MyLabel 拼写错了,写成了MyLable 。大家自己写的时候演注意一下。代...原创 2021-03-26 16:49:12 · 2567 阅读 · 0 评论 -
QT 美化之透明的Widgets
好多小伙伴们,熟悉qt后,想让自己的界面更加漂亮与“专业”,接下来的日子我也通过学习,带大家做些非常简单的美化界面吧。本例子都是基于qss 来改变样式,让自己写的软件更加漂亮,也同时学习更多,希望大家喜欢这个系列,让我们更加进步。话不多说我们开始吧,第一个写个小透明的Widgets。我们常常会看见下面的登录界面:其中灰色的就是一个透明的Widgets,下面是实现的过程。先看结果图吧:我们看到中间的位置,一个小Widget,通过样式表,我们让它变的透明,然后我们可以在上面...原创 2021-03-22 17:19:39 · 1637 阅读 · 0 评论 -
qt style sheet(QSS)这不是学习例子
弄完基本的图形界面后,尝试去做一个比较看起来“专业”的界面,但是通过布局学习,还有对应的ui界面,然后发现自己依旧布局不出来好看的界面,感觉写出来,太水: 我要记录下未来对布局的学习,与我现在会有多大的变化,把现在做的界面贴出来吧,当成一个对比的界面,以后的界面要靠自己来多多练习: 我的图片:连我自己都看不下去了,哎,以后还是多多学习吧,下面是QSS的界面代码:#centralWidget{background:rgba(32, ...原创 2020-06-10 16:46:14 · 559 阅读 · 0 评论