用qt做网易云音乐--画廊实现

qt画廊采用子控件最多显示父控件大小的原理，采用move函数进行，再加QPropertyAnimation动画进行操作
下面上下最终成品

gallery

以下是成员变量

  int m_currentShowGalleryFirstIndex;
    int m_currentShowGalleryLastIndex;
    由于向左或向右移动时，要有标志来确定是否到最左或最右来判断还能否移动，这里定义两个索引用来判断位置
    int m_galleryItemCount;
    项总数,总数*（每个项宽度+项间距）=窗体宽度;
    需要这个宽度变量
    QList<GalleryItem * > m_itemList;
    用来存放每个项
    QWidget *m_galleryWindow;
    存放各项的窗体
    int m_galleryWindowWidth;
    窗体宽度,多处用到，单独定义出来
    const int m_padding = 15;
    const int m_itemwidth = 141;
    间距和项宽度
    QPropertyAnimation *m_animation;
    动画指针对象

首先
m_galleryWindow = new QWidget(ui->galleryWidget);
让画廊窗体为ui的一个子控件（子控件再打，也只能显示父控件大小的部分）
m_currentShowGalleryFirstIndex = 0;
第一项索引默认为0；
然后初始化项

 GalleryItem *item = new GalleryItem(m_galleryWindow);
    item->setPixmap("./images/homeTab/exclusive/gallery/1.png");
    item->setInfo("从《远方》开启保障音乐环游|宝藏雷达");
    m_itemList.append(item);

    GalleryItem *item1 = new GalleryItem(m_galleryWindow);
    item1->setPixmap("./images/homeTab/exclusive/gallery/2.png");
    item1->setInfo("还在听《隐隐约约》吗|时光雷达");
    m_itemList.append(item1);

    GalleryItem *item2 = new GalleryItem(m_galleryWindow);
    item2->setPixmap("./images/homeTab/exclusive/gallery/3.png");
    item2->setInfo("今天从《当爱已成往事》听起|私人雷达");
    m_itemList.append(item2);

    GalleryItem *item3 = new GalleryItem(m_galleryWindow);
    item3->setPixmap("./images/homeTab/exclusive/gallery/4.png");
    item3->setInfo("孙楠的歌总是令人心动|时光雷达");
    m_itemList.append(item3);

    GalleryItem *item4 = new GalleryItem(m_galleryWindow);
    item4->setPixmap("./images/homeTab/exclusive/gallery/5.png");
    item4->setInfo("吉法师带你来听听歌 |qq雷达");
    m_itemList.append(item4);

    GalleryItem *item5 = new GalleryItem(m_galleryWindow);
    item5->setPixmap("./images/homeTab/exclusive/gallery/6.png");
    item5->setInfo("从《爱的代价》开启宝藏音乐|时光雷达");
    m_itemList.append(item5);

    GalleryItem *item6 = new GalleryItem(m_galleryWindow);
    item6->setPixmap("./images/homeTab/exclusive/gallery/7.png");
    item6->setInfo("你喜欢的韩国音乐|你的雷达");
    m_itemList.append(item6);

    GalleryItem *item7 = new GalleryItem(m_galleryWindow);
    item7->setPixmap("./images/homeTab/exclusive/gallery/8.png");
    item7->setInfo("《The end of word》就是那么好听|时光雷达");
    m_itemList.append(item7);

这个类是自定义的

很简单，就是组成一个小组件方便操作
然后确定末尾索引

 m_galleryItemCount = m_itemList.size();
    if(m_galleryItemCount>5)
    {
        m_currentShowGalleryLastIndex = 4; //最多显示5个,但索引是4
    }
    else
    {
        m_currentShowGalleryLastIndex = m_galleryItemCount-1;
    }

如果项不到5个，末尾索引就是项总数-1

然后把每个项放到子窗体里

   //采用qt的使用视口与窗口的策略
    //作为子组件,不会超过父组件显示
    m_galleryWindowWidth = m_itemwidth*m_galleryItemCount+m_padding*(m_galleryItemCount -1);
    m_galleryWindow->resize(m_galleryWindowWidth,ui->galleryWidget->height());
    for(int i = 0 ; i<m_galleryItemCount ; i++)
    {
        m_itemList[i]->move(i*(m_itemwidth+m_padding),0);
    }

就是放到每个位置，这里看看就可以懂
向左和向右的槽函数

void ExclusiveCustomWidget::on_lButton_clicked()
{
    if(m_currentShowGalleryFirstIndex == 0)
    {
        return;
    }
    rollGallery(ExclusiveCustomWidget::left);

}

void ExclusiveCustomWidget::on_rButton_clicked()
{
    if(m_currentShowGalleryLastIndex == m_galleryItemCount-1)
    {
        return;
    }
    rollGallery(ExclusiveCustomWidget::right);
}

操作函数

void ExclusiveCustomWidget::rollGallery(ExclusiveCustomWidget::rollDirection direction)
{
    m_animation = new QPropertyAnimation(m_galleryWindow,"pos");
    //animation->setDirection(300);  构造函数默认就有250豪秒,我这里就不写了
    if (direction == ExclusiveCustomWidget::left)
    {
        m_currentShowGalleryFirstIndex--;
        m_currentShowGalleryLastIndex--;
    }
    else if(direction == ExclusiveCustomWidget::right)
    {
        m_currentShowGalleryFirstIndex++;
        m_currentShowGalleryLastIndex++;
    }
    m_animation->setEndValue(QPoint(-(m_padding+m_itemwidth)*m_currentShowGalleryFirstIndex,0));
    m_animation->start();
}

把子窗体移动，由于子窗体的坐标是相对于父窗口的，移动之后，子窗口为-的位置和大于父窗口的位置，都是看不到的，以此完成预期结果