备案控制台
探索云世界
开发者社区 云计算 文章 正文

Qt-网易云音乐界面实现-5 收藏列表，播放列表实现 QListWidget QTableWidget

2021-12-15 312
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 先上目前完成的内容吧，发现后面越写越多。在看看点击量，心凉凉。

image.png

//创建的歌单
    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());
    }
}

image.png

主要的还是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界面
Qt播放
Qt列表
Qt网易云音乐界面列表
DreamLife
目录
相关文章
fensnote
|
23天前
|
计算机视觉 数据格式
使用opencv在Qt控件上播放mp4文件
使用opencv在Qt控件上播放mp4文件
fensnote
28 2
泡沫o0
|
1月前
|
编解码 并行计算 Java
QT界面中实现视频帧显示的多种方法及应用（二）
QT界面中实现视频帧显示的多种方法及应用
泡沫o0
81 0
泡沫o0
|
1月前
|
数据可视化 API vr&ar
探索Qt 3D之旅：从基础到实战，打造引人入胜的三维界面与应用
探索Qt 3D之旅：从基础到实战，打造引人入胜的三维界面与应用
泡沫o0
114 2
泡沫o0
|
29天前
|
存储 测试技术 UED
Qt中实现界面回放的艺术：从理论到代码“ (“The Art of Implementing UI Playback in Qt: From Theory to Code
Qt中实现界面回放的艺术：从理论到代码“ (“The Art of Implementing UI Playback in Qt: From Theory to Code
泡沫o0
66 1
abcd552191868
|
3月前
|
编译器
QT creator开发环境下 界面更改后运行程序不能实时更新或者在源文件添加该控件后无法编译的问题
在使用QT Creator开发界面的过程中，偶尔会出现添加控件后，运行程序后，界面控件无法更新的情况，或者在源文件使用该控件却出现无法编译的情况，使用QT Creator 4.8.2也会出现这个情况，也不知道这种情况会不会在以后有所改善。
abcd552191868
66 0
倔强的大蜗牛
|
9天前
|
数据可视化 开发工具 C++
Qt Creator 界面
Qt Creator 界面
倔强的大蜗牛
23 3
倔强的大蜗牛
|
9天前
|
Windows
解决windows下Qt Creator显示界面过大的问题
解决windows下Qt Creator显示界面过大的问题
倔强的大蜗牛
27 2
泡沫o0
|
1月前
|
SQL XML API
Qt C++ 模块 描述列表【从Qt 官网 6.5 版本翻译】
Qt C++ 模块 描述列表【从Qt 官网 6.5 版本翻译】
泡沫o0
13 0
泡沫o0
|
1月前
|
机器学习/深度学习 人工智能 语音技术
QT界面中实现视频帧显示的多种方法及应用（三）
QT界面中实现视频帧显示的多种方法及应用
泡沫o0
66 0
泡沫o0
|
1月前
|
存储 编解码 监控
QT界面中实现视频帧显示的多种方法及应用（一）
QT界面中实现视频帧显示的多种方法及应用
泡沫o0
124 0

热门文章

最新文章

  • 1
    【Qt 底层机制之图形渲染引擎】深入理解 Qt 的 渲染机制：从基础渲染到高级图形
  • 2
    【Qt 底层机制之信号和槽 】深入探究Qt信号和槽背后的原理
  • 3
    【Qt 并发 】理解Qt中事件循环与并发机制的协同工作
  • 4
    【Qt 底层之事件驱动系统】深入理解 Qt 事件机制：主事件循环与工作线程的交互探究，包括 QML 的视角
  • 5
    深入对比：Qt 的 QFile/QFileInfo 和与 C++17 Filesystem 和标准文件流 的细节剖析
  • 6
    【Qt 应用开发 】初步理解 Qt窗口中的模态性应用
  • 7
    Qt中实现界面回放的艺术：从理论到代码“ (“The Art of Implementing UI Playback in Qt: From Theory to Code
  • 8
    【Qt 元对象系统 01 】深入探索Qt的元对象系统：核心地位、功能与构成
  • 9
    基于Qt的简易PDF阅读器设计与实现
  • 10
    Qt编码之谜：乱码问题的成因与解决策略
  • 1
    实现Hello Qt 程序
    30
  • 2
    Qt Creator 界面
    23
  • 3
    Qt Creator 新建项目
    31
  • 4
    解决windows下Qt Creator显示界面过大的问题
    27
  • 5
    【Qt 学习笔记】Qt控件概述
    21
  • 6
    【Qt 学习笔记】按钮实现helloworld | 信号与槽概述
    21
  • 7
    【PyQt5桌面应用开发】3.Qt Designer快速入门（控件详解）
    35
  • 8
    QT里面字符串转ieee754标准的float浮点数
    12
  • 9
    Qt使用MSVC编译错误: LNK2019: 无法解析的外部符号
    12
  • 10
    Qt之使用图片填充QLabel
    18

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册

    • 推荐镜像

    更多
  • qt
  • msys2
  • eclipse
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）