AI 助理
备案控制台
开发者社区 云计算 文章 正文

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

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

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 qtablewidget
Qt qlistwidget
Qt qlistwidget qtablewidget
Qt播放
DreamLife
目录
相关文章
国中之林
|
3月前
|
监控 C++ 容器
【qt】MDI多文档界面开发
【qt】MDI多文档界面开发
国中之林
71 0
五羟基己醛
|
23天前
|
编译器
【项目开发】QT简单练习之QQ登录界面模仿
为了进一步加深对QT开发的理解，在学习完基础操作之后要进行一个简单的练习。
五羟基己醛
29 1
国中之林
|
6月前
【qt】QTableWidget 表格组件3
【qt】QTableWidget 表格组件
国中之林
60 0
国中之林
|
6月前
【qt】QTableWidget 表格组件2
【qt】QTableWidget 表格组件
国中之林
63 0
国中之林
|
6月前
【qt】QTableWidget 表格组件1
【qt】QTableWidget 表格组件
国中之林
45 0
国中之林
|
6月前
|
搜索推荐
【qt】自定义界面类
【qt】自定义界面类
国中之林
55 0
国中之林
|
6月前
【qt】QListWidget 组件3
【qt】QListWidget 组件
国中之林
26 0
国中之林
|
6月前
【qt】QListWidget 组件2
【qt】QListWidget 组件
国中之林
50 0
DS小龙哥
|
4月前
|
数据安全/隐私保护 C++ 计算机视觉
Qt(C++)开发一款图片防盗用水印制作小工具
文本水印是一种常用的防盗用手段，可以将文本信息嵌入到图片、视频等文件中，用于识别和证明文件的版权归属。在数字化和网络化的时代，大量的原创作品容易被不法分子盗用或侵犯版权，因此加入文本水印成为了保护原创作品和维护知识产权的必要手段。 通常情况下，文本水印可以包含版权声明、制作者姓名、日期、网址等信息，以帮助识别文件的来源和版权归属。同时，为了增强防盗用效果，文本水印通常会采用字体、颜色、角度等多种组合方式，使得水印难以被删除或篡改，有效地降低了盗用意愿和风险。 开发人员可以使用图像处理技术和编程语言实现文本水印的功能，例如使用Qt的QPainter类进行文本绘制操作，将文本信息嵌入到图片中，
DS小龙哥
173 1
Qt(C++)开发一款图片防盗用水印制作小工具
yantuguiguziPGJ
|
2月前
|
开发工具 C++
qt开发技巧与三个问题点
本文介绍了三个Qt开发中的常见问题及其解决方法，并提供了一些实用的开发技巧。
yantuguiguziPGJ
67 0

热门文章

最新文章

  • 1
    Qt编写自定义控件35-GIF录屏控件
  • 2
    Qt/E服务器客户端的通信机制
  • 3
    Qt C++ 键盘事件全解析：从基础到高级，实现精彩互动体验
  • 4
    Qt编写安防视频监控系统4-删除视频
  • 5
    Qt开源作品1-视频流播放ffmpeg内核
  • 6
    QT刷屏函数
  • 7
    Qt Creator编译项目，报错，error: LNK1158: 无法运行“rc.exe”
  • 8
    Qt Creator指定临时文件生成目录(MOC_DIR/RCC_DIR等)和PWD/OUT_PWD/.pro官方文档
  • 9
    基于C++(QT框架)设计的网络摄像头项目(支持跨平台运行)
  • 10
    使用qt实现简易示波器功能
  • 1
    QT里面字符串转ieee754标准的float浮点数
    131
  • 2
    QT5构建套件检测不到MSVC2017解决方法
    497
  • 3
    精伦安全模块-身份证读卡器对接-Qt调用SDK
    144
  • 4
    使用opencv在Qt控件上播放mp4文件
    208
  • 5
    【QT】GraphicsView、QGraphicsScene、QGraphicsEllipseItem的使用
    324
  • 6
    【QT】读写.ini配置文件的程序实现
    98
  • 7
    Qt更新组件出现（“要继续此操作，至少需要一个有效且已启用的储存库”）
    301
  • 8
    QT实现一个简单的日志打印系统
    230
  • 9
    正点原子IMX6ULL-安装交叉编译器、编译tslib触摸屏库、编译arm环境qt源代码
    182
  • 10
    qt开发使用camera类获取摄像头信息并拍照保存
    179

    • 相关电子书

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

    • 推荐镜像

    更多
  • qt
  • python-release
  • blender
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月