Qt-网易云音乐界面实现-5 收藏列表，播放列表实现 QListWidget QTableWidget
先上目前完成的内容吧，发现后面越写越多。在看看点击量，心凉凉。
完成了左侧的导航列表，还有就是右下角的播放列表。
//创建的歌单
my_Create_Music_List = new QListWidget(ui->widget_list);
connect(my_Create_Music_List,&QListWidget::itemClicked,this,&MainWindow::slot_my_Create_Music_List_itemClicked);
my_Create_Music_List->setStyleSheet("QListWidget{color:rgb(173,175,178); background:rgb(25,27,31);border:0px solid gray;}"
"QListWidget::Item{height:30px;border:0px solid gray;padding-left:15;}"
"QListWidget::Item:hover{color:rgb(255,255,255);background:transparent;border:0px solid gray;}"
"QListWidget::Item:selected{border-image:url(images/listwidget_h.png); color:rgb(255,255,255);border:0px solid gray;}"
"QListWidget::Item:selected:active{background:#00FFFFFF;color:#FFFFFF;border-width:0;}");
//去掉滚动条
my_Create_Music_List->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
my_Create_Music_List->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
my_Create_Music_List->hide(); //创建列表测试
QListWidgetItem *add_item_10 = new QListWidgetItem(my_Create_Music_List);
add_item_10->setIcon(QIcon("./images/musicform/btn_like_n.png"));
add_item_10->setText("我喜欢的音乐");
QListWidgetItem *add_item_11 = new QListWidgetItem(my_Create_Music_List);
add_item_11->setIcon(QIcon("./images/lock.png"));
add_item_11->setText("我的音乐"); QListWidgetItem *add_item_12 = new QListWidgetItem(my_Create_Music_List);
add_item_12->setIcon(QIcon("./images/musiclist.png"));
add_item_12->setText("我创建的歌单1"); QListWidgetItem *add_item_13 = new QListWidgetItem(my_Create_Music_List);
add_item_13->setIcon(QIcon("./images/musiclist.png"));
add_item_13->setText("我创建的歌单2"); QListWidgetItem *add_item_14 = new QListWidgetItem(my_Create_Music_List);
add_item_14->setIcon(QIcon("./images/musiclist.png"));
add_item_14->setText("我创建的歌单3"); //收藏的歌单
my_Collect_Music_List = new QListWidget(ui->widget_list);
connect(my_Collect_Music_List,&QListWidget::itemClicked,this,&MainWindow::slot_my_my_Collect_Music_List_itemClicked);
my_Collect_Music_List->setStyleSheet("QListWidget{color:rgb(173,175,178); background:rgb(25,27,31);border:0px solid gray;}"
"QListWidget::Item{height:30px;border:0px solid gray;padding-left:15;}"
"QListWidget::Item:hover{color:rgb(255,255,255);background:transparent;border:0px solid gray;}"
"QListWidget::Item:selected{border-image:url(images/listwidget_h.png); color:rgb(255,255,255);border:0px solid gray;}"
"QListWidget::Item:selected:active{background:#00FFFFFF;color:#FFFFFF;border-width:0;}");
//去掉滚动条
my_Collect_Music_List->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
my_Collect_Music_List->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
my_Collect_Music_List->hide(); //收藏歌单测试
QListWidgetItem *add_item_15 = new QListWidgetItem(my_Collect_Music_List);
add_item_15->setIcon(QIcon("./images/musiclist.png"));
add_item_15->setText("我收藏的歌单1"); QListWidgetItem *add_item_16 = new QListWidgetItem(my_Collect_Music_List);
add_item_16->setIcon(QIcon("./images/musiclist.png"));
add_item_16->setText("我收藏的歌单2"); QListWidgetItem *add_item_17 = new QListWidgetItem(my_Collect_Music_List);
add_item_17->setIcon(QIcon("./images/musiclist.png"));
add_item_17->setText("我收藏的歌单3");
这里就是现在是用了4个listwidget ，需要再每个的触发函数中把其他三个的数据屏蔽了，不知道网易原生是不是这样实现的。
/*
* 推荐列表
*/
void MainWindow::on_listWidget_itemClicked(QListWidgetItem *item)
{
Q_UNUSED(item);
// qDebug()<<item->text();
ui->listWidget_mymusic->clearSelection();
my_Collect_Music_List->clearSelection();
my_Create_Music_List->clearSelection();
}
/*
* 我的音乐列表
*/
void MainWindow::on_listWidget_mymusic_itemClicked(QListWidgetItem *item)
{
Q_UNUSED(item);
// qDebug()<<item->text();
ui->listWidget->clearSelection();
my_Collect_Music_List->clearSelection();
my_Create_Music_List->clearSelection();
}
/*
* 我创建的列表点击
*/
void MainWindow::slot_my_Create_Music_List_itemClicked(QListWidgetItem *item)
{
Q_UNUSED(item);
// qDebug()<<item->text();
ui->listWidget_mymusic->clearSelection();
ui->listWidget->clearSelection();
my_Collect_Music_List->clearSelection();
}
/*
* 我收藏的列表点击
*/
void MainWindow::slot_my_my_Collect_Music_List_itemClicked(QListWidgetItem *item)
{
Q_UNUSED(item);
// qDebug()<<item->text();
ui->listWidget_mymusic->clearSelection();
ui->listWidget->clearSelection();
my_Create_Music_List->clearSelection();
}
可以看下，这里就是间的把每个listwidget的最后一个选项取消。
还存在一个问题就是创建的歌单和收藏的歌单
这里就是用了简单的位置移动
/*
* 创建列表展开列表
*/
static bool unfold_Flag = false;
void MainWindow::on_pushButton_unfold_clicked()
{
if(!unfold_Flag)
{
if(my_Create_Music_List->isHidden())
{
my_Create_Music_List->setGeometry(0,360,200,30*my_Create_Music_List->count());
my_Create_Music_List->show();
}
unfold_Flag = !unfold_Flag;
ui->pushButton_unfold->setStyleSheet("QPushButton{border-image:url(images/btn_down_n.png);}"
"QPushButton::hover{border-image:url(images/btn_down_h.png);}"
"QPushButton::pressed{border-image:url(images/btn_down_n.png);}");
ui->widget_list->resize(200,ui->widget_list->height() + 30*my_Create_Music_List->count());
ui->widget_Collect_form->setGeometry(0,my_Create_Music_List->y()+30*my_Create_Music_List->count(),200,30);
if(!my_Collect_Music_List->isHidden())
{
my_Collect_Music_List->setGeometry(0,ui->widget_Collect_form->y()+30,200,30*my_Collect_Music_List->count());
}
}
else
{
my_Create_Music_List->hide();
unfold_Flag = !unfold_Flag;
ui->pushButton_unfold->setStyleSheet("QPushButton{border-image:url(images/btn_right_1_n.png);}"
"QPushButton::hover{border-image:url(images/btn_right_1_h.png);}"
"QPushButton::pressed{border-image:url(images/btn_right_1_n.png);}");
ui->widget_list->resize(200,ui->widget_list->height() - 30*my_Create_Music_List->count());
ui->widget_Collect_form->setGeometry(0,370,200,30);
if(!my_Collect_Music_List->isHidden())
{
my_Collect_Music_List->setGeometry(0,ui->widget_Collect_form->y()+30,200,30*my_Collect_Music_List->count());
}
} }
/*
* 收藏列表展开按钮
*/
static bool unfold_collect_Flag = false;
void MainWindow::on_pushButton_unfold_collect_clicked()
{
if(!unfold_collect_Flag)
{
if(my_Collect_Music_List->isHidden())
{
my_Collect_Music_List->setGeometry(0,ui->widget_Collect_form->y()+30,200,30*my_Collect_Music_List->count());
my_Collect_Music_List->show();
}
unfold_collect_Flag = !unfold_collect_Flag;
ui->pushButton_unfold_collect->setStyleSheet("QPushButton{border-image:url(images/btn_down_n.png);}"
"QPushButton::hover{border-image:url(images/btn_down_h.png);}"
"QPushButton::pressed{border-image:url(images/btn_down_n.png);}");
ui->widget_list->resize(200,ui->widget_list->height() + 30*my_Create_Music_List->count()); }
else
{
my_Collect_Music_List->hide();
unfold_collect_Flag = !unfold_collect_Flag;
ui->pushButton_unfold_collect->setStyleSheet("QPushButton{border-image:url(images/btn_right_1_n.png);}"
"QPushButton::hover{border-image:url(images/btn_right_1_h.png);}"
"QPushButton::pressed{border-image:url(images/btn_right_1_n.png);}");
ui->widget_list->resize(200,ui->widget_list->height() - 30*my_Create_Music_List->count());
} }
剩下的就是右侧的这个播放列表了，这个就是用了一个tabwidget来显示播放列表和历史记录
主要的还是qss的问题，这里还有很多细节没有实现，不过没有耐心了，暂时这样吧。
看下整个代码
#include "playlistform.h"
#include "ui_playlistform.h" PlayListForm::PlayListForm(QWidget *parent) :
QWidget(parent),
ui(new Ui::PlayListForm)
{
ui->setupUi(this);
ui->tabWidget->setTabText(0,"播放列表");
ui->tabWidget->setTabText(1,"历史记录");
ui->pushButton_PL_shoucang->setIcon(QIcon("./images/btn_shoucang_n.png"));
ui->pushButton_PL_delete->setIcon(QIcon("./images/btn_delete_n.png"));
ui->pushButton_PL_delete_2->setIcon(QIcon("./images/btn_delete_n.png"));
QHeaderView *headview = ui->tableWidget_playlist->verticalHeader(); //隐藏列
headview->setHidden(true);
headview = ui->tableWidget_playlist->horizontalHeader(); //隐藏行
headview->setHidden(true);
ui->tableWidget_playlist->setSelectionBehavior(QAbstractItemView::SelectRows); //选中整行
ui->tableWidget_playlist->setSelectionMode(QAbstractItemView::SingleSelection); //单行模式
ui->tableWidget_playlist->setColumnCount(4);
ui->tableWidget_playlist->setRowCount(20);
ui->tableWidget_playlist->setShowGrid(false);
ui->tableWidget_playlist->setStyleSheet("QTableWidget{border-top:0px solid #e8f3f9;background:transparent;alternate-background-color:red;selection-background-color:#3b3d41;}"
"QTableWidget::Item:selected:active{background:#00FFFFFF;color:#FFFFFF;border-width:0;}");
ui->tableWidget_playlist->horizontalHeader()->resizeSection(0,417);
ui->tableWidget_playlist->horizontalHeader()->resizeSection(1,50);
ui->tableWidget_playlist->horizontalHeader()->resizeSection(2,50);
ui->tableWidget_playlist->horizontalHeader()->resizeSection(3,50); headview = ui->tableWidget_historylist->verticalHeader(); //隐藏列
headview->setHidden(true);
headview = ui->tableWidget_historylist->horizontalHeader(); //隐藏行
headview->setHidden(true);
ui->tableWidget_historylist->setSelectionBehavior(QAbstractItemView::SelectRows); //选中整行
ui->tableWidget_historylist->setSelectionMode(QAbstractItemView::SingleSelection); //单行模式
ui->tableWidget_historylist->setColumnCount(4);
ui->tableWidget_historylist->setRowCount(20);
ui->tableWidget_historylist->setShowGrid(false);
ui->tableWidget_historylist->setStyleSheet("QTableWidget{border-top:0px solid #e8f3f9;background:transparent;alternate-background-color:red;selection-background-color:#3b3d41;}"
"QTableWidget::Item:selected:active{background:#00FFFFFF;color:#FFFFFF;border-width:0;}");
ui->tableWidget_historylist->horizontalHeader()->resizeSection(0,417);
ui->tableWidget_historylist->horizontalHeader()->resizeSection(1,50);
ui->tableWidget_historylist->horizontalHeader()->resizeSection(2,50);
ui->tableWidget_historylist->horizontalHeader()->resizeSection(3,50); QPalette pal = ui->tableWidget_playlist->palette();
pal.setBrush(QPalette::Base,QBrush(QColor(255,255,255,0)));
ui->tableWidget_playlist->setPalette( pal );
QStringList headers;
headers<<"name"<<"singer"<<"from"<<"time"; //测试数据
QTableWidgetItem *item = new QTableWidgetItem(QIcon("./images/icon_play.png"),"爱的就是你");
ui->tableWidget_playlist->setItem(0,0,item);
item->setTextColor(QColor(255,255,255));
QTableWidgetItem *item1 = new QTableWidgetItem("刘佳");
item1->setTextColor(QColor(95,95,99));
ui->tableWidget_playlist->setItem(0,1,item1);
QTableWidgetItem *item2 = new QTableWidgetItem("来源");
item2->setTextColor(QColor(95,95,99));
ui->tableWidget_playlist->setItem(0,2,item2);
QTableWidgetItem *item3 = new QTableWidgetItem("04:31");
item3->setTextColor(QColor(95,95,99));
ui->tableWidget_playlist->setItem(0,3,item3);
for(int i=1;i<20;i++)
{
QTableWidgetItem *item = new QTableWidgetItem(QIcon("./images/zanweifu.png"),"爱的就是你");
item->setTextColor(QColor(255,255,255));
ui->tableWidget_playlist->setItem(i,0,item);
QTableWidgetItem *item1 = new QTableWidgetItem("刘佳");
item1->setTextColor(QColor(95,95,99));
ui->tableWidget_playlist->setItem(i,1,item1);
QTableWidgetItem *item2 = new QTableWidgetItem("来源");
item2->setTextColor(QColor(95,95,99));
ui->tableWidget_playlist->setItem(i,2,item2);
QTableWidgetItem *item3 = new QTableWidgetItem("04:31");
item3->setTextColor(QColor(95,95,99));
ui->tableWidget_playlist->setItem(i,3,item3);
} //测试数据
QTableWidgetItem *item11 = new QTableWidgetItem(QIcon("./images/icon_play.png"),"爱的就是你");
ui->tableWidget_historylist->setItem(0,0,item11);
item11->setTextColor(QColor(255,255,255));
QTableWidgetItem *item12 = new QTableWidgetItem("刘佳");
item12->setTextColor(QColor(95,95,99));
ui->tableWidget_historylist->setItem(0,1,item12);
QTableWidgetItem *item13 = new QTableWidgetItem("来源");
item13->setTextColor(QColor(95,95,99));
ui->tableWidget_historylist->setItem(0,2,item13);
QTableWidgetItem *item14 = new QTableWidgetItem("04:31");
item14->setTextColor(QColor(95,95,99));
ui->tableWidget_historylist->setItem(0,3,item14);
for(int i=1;i<20;i++)
{
QTableWidgetItem *item11 = new QTableWidgetItem(QIcon("./images/zanweifu.png"),"爱的就是你");
item11->setTextColor(QColor(255,255,255));
ui->tableWidget_historylist->setItem(i,0,item11);
QTableWidgetItem *item12 = new QTableWidgetItem("刘佳");
item12->setTextColor(QColor(95,95,99));
ui->tableWidget_historylist->setItem(i,1,item12);
QTableWidgetItem *item13 = new QTableWidgetItem("来源");
item13->setTextColor(QColor(95,95,99));
ui->tableWidget_historylist->setItem(i,2,item13);
QTableWidgetItem *item14 = new QTableWidgetItem("04:31");
item14->setTextColor(QColor(95,95,99));
ui->tableWidget_historylist->setItem(i,3,item14);
} } PlayListForm::~PlayListForm()
{
delete ui;
} void PlayListForm::paintEvent(QPaintEvent *event)
{
Q_UNUSED(event);
QPainter painter_mainback(this);
painter_mainback.setPen(Qt::NoPen);
painter_mainback.setBrush(QColor(40,42,46));
painter_mainback.drawRect(0,0,this->width(),this->height()); } void PlayListForm::on_pushButton_close_clicked()
{
this->close();
}
/*
* 播放列表收藏全部按钮
*/
void PlayListForm::on_pushButton_PL_shoucang_clicked()
{ }
/*
* 播放列表情况按钮
*/
void PlayListForm::on_pushButton_PL_delete_clicked()
{ }
/*
* 历史记录列表清除按钮
*/
void PlayListForm::on_pushButton_PL_delete_2_clicked()
{ }
这些接口都还没有引出来，如果要实现功能，需要将接口引出。
好了，今天就到了这里吧，都哈哈
Qt-网易云音乐界面实现-5 收藏列表，播放列表实现 QListWidget QTableWidget的更多相关文章
- Android 开发之网易云音乐（或QQ音乐）的播放界面转盘和自定义SeekBar的实现
这个东西我在eoeAndroid上首发的,但没有详细的实现说明:http://www.eoeandroid.com/thread-317901-1-1.html 在csdn上进行详细的说明吧.(同时上 ...
- Flutter仿网易云音乐：播放界面
写在前头 本来是要做一个仿网易云音乐的flutter项目,但是因为最近事情比较多,项目周期跨度会比较长,因此分几个步骤来完成.这是仿网易云音乐项目系列文章的第一篇.没有完全照搬网易云音乐的UI,借鉴了 ...
- 网易云音乐APP分析
网易云音乐-感受音乐的力量 你选择的产品是? 网易云音乐 为什么选择该产品作为分析? 之前用的一直是QQ音乐,但是有一天一个朋友分享了一首网易云上的音乐(顺便分享一下歌名:Drop By Drop) ...
- Qt-网易云音乐界面实现-2 红红的程序运行图标，和相似下方音乐条
被调出来出差了,这次出差可以说是非常不开心,这次出差也算给我自己提了个醒吧,那就是注意自己的精力,自己的口碑,和比人对自己的信任.具体内容如下 我们公司有一款硬件的设备的电路是外包给某个人来做的,这个 ...
- Qt-网易云音乐界面实现-1 窗口隐藏拖拽移动，自定义标题栏
最近也换了公司,也换了新的工作,工资也象征性的涨了一点点,但是最近心里还是慌慌,不知道为什么,没有那种踏实感,感觉自己随时可以被抛弃的感觉.感觉自己在荒废时间,也感觉自己在浪费生命. 为了让自己在被抛 ...
- Android项目实战之高仿网易云音乐项目介绍
这一节我们来讲解这个项目所用到的一些技术,以及一些实现的效果图,让大家对该项目有一个整体的认识,推荐大家收藏该文章,因为我们发布文章后会在该文章里面加入链接,这样大家找着就很方便. 目录 第1章 前期 ...
- Github获8300星！用Python开发的一个命令行的网易云音乐
最近在逛Github发现了一个非常有趣的库musicbox,是用纯Python打造的,收获了8300颗星.Python语言简单易学,好玩有趣,身边越来越多的小伙伴都开始学习Python.她的魅力非常大 ...
- 利用AudioContext来实现网易云音乐的鲸鱼音效
一直觉得网易云音乐的用户体验是很不错的,很早就注意到了里面的鲸鱼音效,如下图,就是一个环形的跟着音乐节拍跳动的特效. gif动图可能效果不太理想,可以直接在手机上体验 身为前端凭着本能的好奇心和探索心 ...
- 高仿Android网易云音乐OkHttp+Retrofit+RxJava+Glide+MVC+MVVM
简介 这是一个使用Java(以后还会推出Kotlin版本)语言,从0开发一个Android平台,接近企业级的项目(我的云音乐),包含了基础内容,高级内容,项目封装,项目重构等知识:主要是使用系统功能, ...
随机推荐
- November 28th 2016 Week 49th Monday
You only live once, but if you do it right, once is enough. 年华不虚度,一生也足矣. One today can win two tomor ...
- VS中生成、清理项目、调试、開始运行（不调试）、Debug 和 Release等之间的差别
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/helloUSB2010/article/details/35802437 一.生成和又一次生成 &q ...
- 1927. [SDOI2010]星际竞速【费用流】
Description 10年一度的银河系赛车大赛又要开始了.作为全银河最盛大的活动之一,夺得这个项目的冠军无疑是很多人的 梦想,来自杰森座α星的悠悠也是其中之一.赛车大赛的赛场由N颗行星和M条双向星 ...
- NPOI保存到服务器和导出到客户端
保存到服务器 <a class="easyui-linkbutton" href="javascript:void(0);" onclick=" ...
- 基础拾遗 C# Json 与对象相互转换
方法一.JavaScriptSerializer 方法二.JsonConvert 示例: Web API项目 1.新建 Model: namespace WebApi{ public class Pr ...
- 集合之HashTable
在java中与有两个类都提供了一个多种用途的hashTable机制,他们都可以将可以key和value结合起来构成键值对通过put(key,value)方法保存起来,然后通过get(key)方法获取相 ...
- SVN提交的动作解释
今天更新svn,发现有很多动作,其中字母代表的意思半知半解,就随手记录下来: A:add,新增 C:conflict,冲突 D:delete,删除 M:modify,本地已经修改 G:modify a ...
- dbcp最终版本
注意:我们在使用有参的queryrunner的时候,不需要关闭connection和DataSource 这些都queryrunner 都替我们完成.我们不需要关系资源释放. 工具类: package ...
- MapReduce操作Hbase --table2file
官方手册:http://hbase.apache.org/book.html#mapreduce.example 简单的操作,将hbase表中的数据写入到文件中. RunJob 源码: import ...
- class和object_getClass方法区别
一.概述 如上图: 1.内存创建一个instance实例对象(Person *per),同时会创建一个与之对应的类对象(Class perClass)和元类对象(Class perMeta); 注:实 ...