qt编写网易云界面（8）----专属定制界面_qt之制作网易云界面-优快云博客

本文档展示了如何使用Qt框架模仿网易云音乐的画廊界面，包括界面设计、QSS样式和核心代码实现。已完成的功能包括图片展示和左右滑动效果。源码将在后期发布到Git，供读者学习参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前段时间把qt网易云中的简单的画廊写了一下，多谢狗哥大佬给的指点，后期我也会把源码发到git 上，让大家快点了解，喜欢我博客，可以关注我，私信我可以提前得到当前代码。（看到必回）

我们目标的网易云界面。

目前完成的部分：

主要的动态图：

主要使用的qss:

/*专属定制部分*/
QLabel#lab_per
{
	font-family:"微软雅黑";
	color: rgb(55,55,55);
	font-size:20px;
	font-weight: bold;
}

QLabel#lab_per2
{
	font-family:"微软雅黑";
	color: rgb(159,159,159);
}

QLabel#lab_per3
{
	font-family:"微软雅黑";
	color: rgb(55,55,55);
	font-size:20px;
	font-weight: bold;
}
/*爱上音乐为伴的下午部分*/
QWidget#widgetPer1
{
	border-image:url(images/Gallery/widgetPer1.png);
}
QWidget#widgetPer2
{
	border-image:url(images/Gallery/widgetPer2.png);
}
QWidget#widgetPer3
{
	border-image:url(images/Gallery/widgetPer3.png);
}
QWidget#widgetPer4
{
	border-image:url(images/Gallery/widgetPer4.png);
}
QWidget#widgetPer5
{
	border-image:url(images/Gallery/widgetPer5.png);
}

/*左右按钮*/
/*右边*/
QPushButton#btnPerR
{
	border-image:url(images/Gallery/前进.png);
    background-color: rgb(235,235,235);
    border-radius:12px;
}
/*左边*/
QPushButton#btnPerL
{
	border-image:url(images/Gallery/后退.png);
    background-color: rgb(235,235,235);
    border-radius:12px;
}

核心代码：

#ifndef GALLERYPRIVATE_H
#define GALLERYPRIVATE_H

#include"galleryitem.h"
#include <QList>
#include <QWidget>
#include <QPropertyAnimation>
/***********************************************************************************************************************
 *                                                    GalleryPrivate                                                   *
 **********************************************************************************************************************/
class GalleryPrivate
{
public:
    GalleryPrivate();
    //输入item对象的宽与长 以及要放入的对象
    void setItemRes(int itemWidth, int itemHeight, const QList<GalleryItem*>& itemData );
    //上一个的索引
    int getPreviousItemIndex();
    //下一个的索引
    int getNextItemIndex();
    //是否有下一个
    bool hasNextItem();
    //是否有上一个
    bool hasPreviousItem();
    //显示对应位置
    void showImage(int index);
    //获取view 的指针
    QWidget * getItemViewport() const;
private:
    //对象的宽
    int itemWidth;
    //对象的高
    int itemHeght;
    //对象的个数
    int itemCount;
    //当前的对象的索引
    int currentItem;
    // 动画的播放时间，单位为毫秒
    int animationDuraton;
    //能够看到对象的区域
    QWidget * itemViewport;
    //对象的全部区域
    QWidget * itemContainer;

};

#endif // GALLERYPRIVATE_H

#include "galleryprivate.h"

const int Padding = 15;

GalleryPrivate::GalleryPrivate()
{
    itemWidth = 0;
    itemHeght = 0;
    itemCount = 0;
    currentItem = 0;
    animationDuraton = 200; //200毫秒
}

void GalleryPrivate::setItemRes(int itemWidth, int itemHeight, const QList<GalleryItem *> &itemData)
{
    currentItem = 0;
    this->itemWidth = itemWidth;
    this->itemHeght = itemHeight;
    int nSize = itemData.size();
    itemCount = nSize;
    //viewport 的固定大小 显示5个item 与中间4个间隔 每个固定15
    itemViewport = new QWidget();
    itemViewport->setFixedSize(this->itemWidth*5+Padding*4,this->itemHeght);

    // itemContainer 的大小为所有item排在一起的大小
    itemContainer = new QWidget(itemViewport);
    itemContainer->resize(nSize*this->itemWidth + (nSize-1) * Padding,this->itemHeght);
    itemContainer->move(0,0);

    //让对象添加到 对应的位置。
    for (int index = 0; index< itemCount; index++) {
        itemData[index]->setParent(itemContainer);
        {
           itemData[index]->move(index*this->itemWidth+(index) *Padding,0);
        }
    }

    itemViewport->setStyleSheet("QWidget#itemViewport{border:1px; background:white; }");
    itemContainer->setStyleSheet("QWidget#itemContainer{border:1px; background:white; }");

}

int GalleryPrivate::getPreviousItemIndex()
{
    if(hasPreviousItem())
    {
        currentItem--;
    }

    return  currentItem;
}

int GalleryPrivate::getNextItemIndex()
{
    if(hasNextItem())
    {
        currentItem++;
    }
    return currentItem;
}

bool GalleryPrivate::hasNextItem()
{
    return  currentItem < itemCount - 5;
}

bool GalleryPrivate::hasPreviousItem()
{
    return  currentItem > 0;
}

void GalleryPrivate::showImage(int index)
{
    if(index>=0 && index<itemCount - 4)
    {
        QPropertyAnimation *animation = new QPropertyAnimation(itemContainer,"pos");
        animation->setDuration(animationDuraton);
        if(index == 0)
        {
            animation->setEndValue(QPoint(0,0));
        }
        else {
            animation->setEndValue(QPoint(-(index*this->itemWidth+(index)*Padding),0));
        }
        animation->start(QAbstractAnimation::DeleteWhenStopped);
    }
}

QWidget *GalleryPrivate::getItemViewport() const
{
    return itemViewport;
}

主界面加载：

void AllMain::setGallery()
{
    //初始话数据
    gallerPrivate = new GalleryPrivate();

    QList<GalleryItem * > items;
    //添加8个数据
    GalleryItem *item = new GalleryItem();
    item->setPicture("./images/Gallery/1.png");
    item->setMessage("从《远方》开启保障音乐环游|宝藏雷达");
    items.append(item);
    //2
    GalleryItem *item2 = new GalleryItem();
    item2->setPicture("./images/Gallery/2.png");
    item2->setMessage("还在听《隐隐约约》吗|时光雷达");
    items.append(item2);

    GalleryItem *item3 = new GalleryItem();
    item3->setPicture("./images/Gallery/3.png");
    item3->setMessage("今天从《当爱已成往事》听起|私人雷达");
    items.append(item3);

    GalleryItem *item4 = new GalleryItem();
    item4->setPicture("./images/Gallery/4.png");
    item4->setMessage("孙楠的歌总是令人心动|时光雷达");
    items.append(item4);

    GalleryItem *item5 = new GalleryItem();
    item5->setPicture("./images/Gallery/5.png");
    item5->setMessage("吉法师带你来听听歌 |qq雷达");
    items.append(item5);

    GalleryItem *item6 = new GalleryItem();
    item6->setPicture("./images/Gallery/6.png");
    item6->setMessage("从《爱的代价》开启宝藏音乐|时光雷达");
    items.append(item6);

    GalleryItem *item7 = new GalleryItem();
    item7->setPicture("./images/Gallery/7.png");
    item7->setMessage("你喜欢的韩国音乐|你的雷达");
    items.append(item7);

    GalleryItem *item8 = new GalleryItem();
    item8->setPicture("./images/Gallery/8.png");
    item8->setMessage("《The end of word》就是那么好听|时光雷达");
    items.append(item8);

    gallerPrivate->setItemRes(item->width(),item->height(),items);

    ui->horizontalLayout_6->setContentsMargins(0,0,0,0);
    ui->horizontalLayout_6->addWidget(gallerPrivate->getItemViewport());

    this->setStyleSheet("QWidget#customization{border:1px; background:white; border-radius:5px;}");
}