Qt实战案例（13）（序）——以QToolButton为例介绍Qt界面外观设计

一、项目介绍

以QToolButton为例，详解Qt界面外观（QSS）设计。

二、项目基本配置

新建一个Qt案例，项目名称为“Test”，基类选择“QWidget”，创建UI界面复选框的选中状态，完成项目创建。

三、UI界面设计

UI界面内放置一个ToolButton，如下：

四、主程序实现

4.1 widget.h头文件

声明按钮点击槽函数：

private slots:
    void on_toolButton_clicked();

4.2 widget.cpp源文件

核心代码如下：

    ui->toolButton->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);
    ui->toolButton->setText("更新设置");
    ui->toolButton->setIcon( QIcon(":/img/right.png"));
    ui->toolButton->setProperty("START","Up");            //设置为未按下状态

定义按钮点击槽函数：

void Widget::on_toolButton_clicked()
{
    if(ui->toolButton->property("START")=="Up")          //之前是未按下
    {
     ui->toolButton->setProperty("START","Down");     //设置为按下
     qDebug()<<ui->toolButton->property("START");

     ui->toolButton->setText("取消设置");
     ui->toolButton->setIcon( QIcon(":/img/wrong.png"));
     //......
    }
    else
    {
       ui->toolButton->setProperty("START","Up");    //设置为未按下状态

       ui->toolButton->setText("更新设置");
       ui->toolButton->setIcon( QIcon(":/img/right.png"));
    //......
    }
}

然后定义QSS文件：

    //应用样式 apply the qss style
        QFile file(":/qss/main.qss");
        file.open(QFile::ReadOnly);
        QTextStream filetext(&file);
        QString stylesheet = filetext.readAll();
        this->setStyleSheet(stylesheet);
     file.close();

4.3 main.qss

在文件中添加一个资源文件，命名为main.qss，内容如下：

/*正常状态下*/
QToolButton[START="Up"] {                                                         
        border-radius: 20px;
        border: none;
        padding-left :30px;
        color: rgb(255,255,255);
        background: rgb(56,167,222); 
}


QToolButton[START="Up"]:hover {                                                              

        padding-bottom: 2px;
        background: rgb(0,205,252); 
}

QToolButton[START="Up"]:checked,QToolButton[START="Up"]:pressed {      
        background: rgb(6,144,175); 
}


/*取消状态下*/
QToolButton[START="Down"] {                                                            
        border-radius: 20px;
        border: none;
 　　　　padding-left :30px;
　　　　 color: rgb(255,255,255);
　　　　 background: qlineargradient(spread:pad,                   
                  x1:0, y1:0, x2:0, y2:1,
              stop:0 rgba(255,176,30, 255), 
              stop:0.6 rgba(254,139,91, 255),
              stop:1.0 rgba(254,176,143, 255));
}

QToolButton[START="Down"]:hover {        
        padding-bottom: 2px;
        background: qlineargradient(spread:pad,               
                 x1:0, y1:0, x2:0, y2:1,
              stop:0 rgba(255,176,30, 255), 
              stop:0.6 rgba(255,74,0, 255),
              stop:1.0 rgba(255,183,153, 255)); 
}

五、效果演示

效果如下：

如果没有看懂的话，完整代码可以参考：
https://download.csdn.net/download/didi_ya/75661766

---

ok，以上便是本文的全部内容了，如果对你有所帮助，记得点个赞哟~