Qss美化界面1：主界面美化

Qss美化界面1：主界面美化（基础）

先看效果图：

思路：导入qss文件，在qss文件中改变控件属性。另外：头部导航栏的按钮icon分为两种颜色，是模仿liudianwu大神的图标工具类的思路，根据fontawesome字体库选出字体动态绘制多种不同颜色的图标（根据自己定义的正常颜色和按下，悬浮的颜色而定），在点击按钮是切换icon而达成的效果。

再来看看界面原型：

关键cpp代码：

void Widget::initPage(){
    ui->widget_left->setProperty("nav","left");
    ui->widget_top->setProperty("nav","top");
    ui->widget_head->setProperty("nav","head");
    ui->widget_window->setProperty("nav","window");
    ui->widget_body->setProperty("nav","body");

    IconUtil::getInstance()->setBtnIcon(ui->toolButton_menu,QChar(0xf0c9),15);
    IconUtil::getInstance()->setBtnIcon(ui->toolButton_zoomout,QChar(0xf068),15);
    IconUtil::getInstance()->setBtnIcon(ui->toolButton_zoom,QChar(0xf067),15);
    IconUtil::getInstance()->setBtnIcon(ui->toolButton_close,QChar(0xf00d),15);

}

void Widget::initQss(){
    QFile file(":/qss/stylesheet.css");
    if(file.open(QIODevice::ReadOnly)){
        QString qss = QLatin1String(file.readAll());
        qApp->setStyleSheet(qss);
        file.close();
    }else{
        qDebug()<<"qss is not open";
    }
}

void Widget::initHeadBtn(){

    QList<int> charList;
    btnListHead<<ui->toolButton_2<<ui->toolButton_5<<ui->toolButton_6<<ui->toolButton_7<<ui->toolButton_8<<ui->toolButton;
    charList<<0xf26e<<0xf7a9<<0xf5d0<<0xf7b0<<0xf7b1<<0xf270;

    IconUtil::getInstance()->setStyle(btnListHead,charList);
    for(QToolButton *btn:btnListHead){
        connect(btn,QToolButton::clicked,this,Widget::toolBtnHeadClicked);
    }
}

void Widget::initLeftBtn(){
    btnListLeft<<ui->toolButton_add<<ui->toolButton2<<ui->toolButton_3<<ui->toolButton_4;
    for(QToolButton *btn:btnListLeft){
        connect(btn,QToolButton::clicked,this,Widget::toolBtnLeftClicked);
    }
}

void Widget::toolBtnHeadClicked(){
    QToolButton* curMacHeadBtn = (QToolButton*)sender();

    for(QToolButton *toolBtn : btnListHead){
        if(toolBtn == curMacHeadBtn){
            toolBtn->setChecked(true);
            toolBtn->setIcon(QIcon(IconUtil::getInstance()->getPixmap(toolBtn,false)));
        }else{
            toolBtn->setChecked(false);
            toolBtn->setIcon(QIcon(IconUtil::getInstance()->getPixmap(toolBtn,true)));
        }
    }
}

void Widget::toolBtnLeftClicked(){
    QToolButton* curMacLeftBtn = (QToolButton*)sender();

    for(QToolButton *toolBtn : btnListLeft){
        if(toolBtn == curMacLeftBtn){
            toolBtn->setChecked(true);
        }else{
            toolBtn->setChecked(false);
        }
    }
}

void Widget::on_toolButton_close_clicked()
{
    close();
}

void Widget::mousePressEvent(QMouseEvent * event)
{
    if (event->button() == Qt::LeftButton)
    {
        pressed = true;
        m_point = event->globalPos() - this->frameGeometry().topLeft();
    }
}

void Widget::mouseMoveEvent(QMouseEvent * event)
{
    if (event->buttons() & Qt::LeftButton)
    {
        if(!pressed){
            return;
        }
        move(event->globalPos() - m_point);
    }
}
void Widget::mouseReleaseEvent(QMouseEvent *event){
    pressed = false;
}

qss代码:

QWidget[nav="top"]{
    background:#555B6B/*qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #555B6B,stop:1 #2E313A);*/
}
#label_title{
    color:#FFFFFF;
}
QWidget[nav="window"]{
    margin-top:0px;
}
QWidget[nav="window"] QAbstractButton{
    background-color:#555B6B;
    border-style:none;
    border-width:0px;
}

#toolButton_menu:pressed,#toolButton_zoom:pressed,#toolButton_zoomout:pressed,#toolButton_menu:hover,#toolButton_zoom:hover,#toolButton_zoomout:hover{
    background-color:#2E313A;
    border-style:none;
    border-width:0px;
}

#toolButton_close:pressed,#toolButton_close:hover{
background-color:#E81123;
border-style:none;
border-width:0px;
}

QWidget[nav="head"] QAbstractButton{
    color:#FFFFFF;
    border-style:none;
    border-width:0px;
    padding:5px;
    background-color:#555B6B;
}

QWidget[nav="head"] QAbstractButton:pressed,QWidget[nav="head"] QAbstractButton:hover,QWidget[nav="head"] QAbstractButton:checked{
    color:#E84753;
    border-style:solid;
    border-color:#41CD52;
    border-width:0px 0px 3px 0px;
    padding:4px 4px 1px 4px;
    background-color:#31333A;
}

QWidget[nav="body"]{
    background:#F5F5F5;
}

QWidget[nav="left"]{
    background:#FFFFFF;
}

QWidget[nav="left"] QAbstractButton{
    padding-left:20px;
    border-style:none;
    background:#FFFFFF;
}
QWidget[nav="left"] QAbstractButton:pressed,QWidget[nav="left"] QAbstractButton:hover,QWidget[nav="left"] QAbstractButton:checked{
    border-style:solid;
    border-color:#F39828;
    border-width:0px 3px 0px 0px;
    padding:4px 1px 4px 4px;
    background:#F5F5F5;
}

QWidget[nav="left"] QLabel{
    color:gray;
}

#widget,#widget_2{
    background-color:#FFFFFF;
    border-radius:5px;
    margin-bottom:10px;
}

完整代码：

网盘地址：https://pan.baidu.com/s/1ZOjHAIAy0rNfiBfGcF0wpA&shfl=sharepset