用qt做网易云音乐--个人中心实现

先上完成图

大体设计及位置，主要是按钮和label

我这里图标采用的是QLabel的pixmap

记住要勾选scaledContents，缩放内容到label大小，不会导致图标只显示一部分

这样设计完成后有一个问题，就是label会遮挡button的事件
我们要用setAttribute(Qt::WA_TransparentForMouseEvents)让label事件穿透

以下是窗体cpp文件(供大家参考)

#include "personalcenterwindow.h"
#include "ui_personalcenterwindow.h"
#include <loadqssfile.h>

PersonalCenterWindow::PersonalCenterWindow(int x, int y, QWidget *parent):
    QWidget(parent),
    ui(new Ui::PersonalCenterWindow)
{
    ui->setupUi(this);
    this->setGeometry(x,y,this->width(),this->height());
    this->setAttribute(Qt::WA_StyledBackground);
    ui->mcIconLabel->setAttribute(Qt::WA_TransparentForMouseEvents);
    ui->mcTextLabel->setAttribute(Qt::WA_TransparentForMouseEvents);
    ui->memberStateLabel->setAttribute(Qt::WA_TransparentForMouseEvents);
    ui->rightArrowLabel->setAttribute(Qt::WA_TransparentForMouseEvents);
    ui->gIconLabel->setAttribute(Qt::WA_TransparentForMouseEvents);
    ui->gTextLabel->setAttribute(Qt::WA_TransparentForMouseEvents);
    ui->grabCountLabel->setAttribute(Qt::WA_TransparentForMouseEvents);
    ui->rightArrowLabel2->setAttribute(Qt::WA_TransparentForMouseEvents);
    ui->sIconLabel->setAttribute(Qt::WA_TransparentForMouseEvents);
    ui->sTextLabel->setAttribute(Qt::WA_TransparentForMouseEvents);
    ui->rightArrowLabel3->setAttribute(Qt::WA_TransparentForMouseEvents);
    ui->pisIconLabel->setAttribute(Qt::WA_TransparentForMouseEvents);
    ui->pisTextLabel->setAttribute(Qt::WA_TransparentForMouseEvents);
    ui->rightArrowLabel4->setAttribute(Qt::WA_TransparentForMouseEvents);
    ui->bsaIconLabel->setAttribute(Qt::WA_TransparentForMouseEvents);
    ui->bsaTextLabel->setAttribute(Qt::WA_TransparentForMouseEvents);
    ui->rightArrowLabel5->setAttribute(Qt::WA_TransparentForMouseEvents);
    ui->msIconLabel->setAttribute(Qt::WA_TransparentForMouseEvents);
    ui->msTextLabel->setAttribute(Qt::WA_TransparentForMouseEvents);
    ui->microblogLabel->setAttribute(Qt::WA_TransparentForMouseEvents);
    ui->rightArrowLabel6->setAttribute(Qt::WA_TransparentForMouseEvents);
    ui->lIconLabel->setAttribute(Qt::WA_TransparentForMouseEvents);
    ui->lTextLabel->setAttribute(Qt::WA_TransparentForMouseEvents);
}

PersonalCenterWindow::~PersonalCenterWindow()
{
    delete ui;
}

void PersonalCenterWindow::setMemberState(bool state)
{
    if(state)
    {
        ui->memberStateLabel->setText("已订购");
    }
    else
    {
        ui->memberStateLabel->setText("未订购");
    }
}

void PersonalCenterWindow::setGrade(int grade)
{
    ui->grabCountLabel->setText(QString::asprintf("Lv%d",grade));
}

void PersonalCenterWindow::setDynamicCount(int count)
{
    ui->dynamicCountLabel->setText(QString::number(count));
}

void PersonalCenterWindow::setAttentionCount(int count)
{
    ui->attentionCountLabel->setText(QString::number(count));
}

void PersonalCenterWindow::setFansCount(int count)
{
    ui->fansCountLabel->setText(QString::number(count));
}

void PersonalCenterWindow::leaveEvent(QEvent *event)
{
    this->hide();
    QWidget::leaveEvent(event);
}

窗体的代码比较简单，没什么复杂的地方
然后是主窗口，我写了一个init函数来初始化

void MainWindow::initPersonalCenterWindow()
{
    if(personalCenterWindow == NULL)
    {
        int x = ui->iconButton->x()-40;
        int y = ui->iconButton->y()+ui->personButton->height()+10;
        personalCenterWindow = new PersonalCenterWindow(x,y,this);
        personalCenterWindow->setMemberState(false);
        personalCenterWindow->setGrade(8);
        personalCenterWindow->setDynamicCount(44);
        personalCenterWindow->setAttentionCount(64);
        personalCenterWindow->setFansCount(9648);
    }
}

这里的窗体点击后应该是有事件产生，我这里没写，事件建议大家采用qt信号和槽的方式，把信号发给主窗口， 让主窗口处理

最后是样式表，也没有什么难点

/*personalcenterwindow的qss样式表*/
QWidget#PersonalCenterWindow
{
    background-color:rgb(255,255,255);
    border-width:1px;
    border-radius:15px
}

QLabel#dynamicCountLabel,#attentionCountLabel,#fansCountLabel
{
    font-weight:bold;
    font-size:18px;
    color:rgb(51,51,51);
}

QPushButton#dynamicButton,#attentionButton,#fansButton
{
    color:rgb(102,102,102);
}

QPushButton#signInButton
{
    image:url(:/images/personalcenterwindow/签到.png);

}

QPushButton:hover#signInButton
{
    image:url(:/images/personalcenterwindow/签到2.png);

}

QPushButton#memberCentralButton,#gradeButton,#shopButton,#personalInformationSetButton,#bindSocialAccountButton,#myServiceButton,#logoutButton
{
    background-color:rgb(255,255,255);
}

QPushButton:hover#memberCentralButton,:hover#gradeButton,:hover#shopButton,:hover#personalInformationSetButton,:hover#bindSocialAccountButton,:hover#myServiceButton,:hover#logoutButton
{
    background-color:rgb(246,246,247);
}

这里注意qss如果不生效，可能是没有加
this->setAttribute(Qt::WA_StyledBackground);这句