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

目录

    • 一、项目介绍
    • 二、项目基本配置
    • 三、UI界面设计
    • 四、主程序实现
      • 4.1 widget.h头文件
      • 4.2 widget.cpp源文件
      • 4.3 main.qss
    • 五、效果演示

一、项目介绍

以QToolButton为例,详解Qt界面外观(QSS)设计。

二、项目基本配置

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

三、UI界面设计

UI界面内放置一个ToolButton,如下:
Qt实战案例(13)(序)——以QToolButton为例介绍Qt界面外观设计_第1张图片

四、主程序实现

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)); 
}

五、效果演示

效果如下:
Qt实战案例(13)(序)——以QToolButton为例介绍Qt界面外观设计_第2张图片

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


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

你可能感兴趣的