【QT入门】Qt自定义控件与样式设计之QPushButton常用qss

往期回顾

【QT入门】Qt自定义控件与样式设计之qss介绍(Qt style sheet)-CSDN博客

【QT入门】 Qt自定义控件与样式设计之qss选择器-CSDN博客

【QT入门】 Qt自定义控件与样式设计之QLineEdit的qss使用-CSDN博客

 【QT入门】Qt自定义控件与样式设计之QPushButton常用qss

这里我们主要是实现几个常用的按钮样式，针对其中涉及的知识点进行分析讲解：

 

一、设置字体、背景以及鼠标按下，悬浮点击出现不同样式 

1、鼠标按下效果

在设置鼠标悬浮时的效果是，用了一个id选择器，这样就只对选中的那个按钮有效果

/*鼠标悬浮时的效果*/
QPushButton#btn2:hover
{
    color:#0000ff;
    background-color:rgb(100, 100, 20); /*改变背景色*/
    border-style:inset;/*改变边框风格*/
    padding-left:8px;
    padding-top:8px;
}

2、相关的状态扩充 

1、checked	button部件被选中
2、unchecked	button部件未被选中
3、disabled	部件被禁用
4、enabled	部件被启用
5、focus	部件获得焦点
6、hover	鼠标位于部件上
7、pressed	部件被鼠标按下
8、indeterminate	checkbox或radiobutton被部分选中
9、off	部件可以切换，且处于off状态
10、on	部件可以切换，且处于on状态

3、禁止使用的样式 

QPushButton:disabled
{
 color: blue;
 border-color: brown;
    background-color: #363636;
}

ui->pushButton->setEnabled(false); 

4、完整代码

QPushButton
{  
    /* 前景色, 文字的颜色 */  
    color:green;  
 
    /* 背景色 */  
    background-color:rgb(223,223,223);  
 
    /* 边框风格 */  
    border-style:outset;  
 
    /* 边框宽度 */  
    border-width:0.5px;  
 
    /* 边框颜色 */  
    border-color:rgb(10,45,110);  
 
    /* 边框倒角 */  
    border-radius:10px;  
 
    /* 字体 */  
    font:bold 22px;  
 
    /* 控件最小宽度 */  
    min-width:100px;  
 
    /* 控件最小高度 */  
    min-height:20px;  
 
    /* 内边距 */  
    padding:4px;  
} 
 
/* 鼠标按下时的效果 */ 
QPushButton#pushButton:pressed 
{  
    /* 改变背景色 */  
    background-color:rgb(40,85,20);  
 
    /* 改变边框风格 */  
    border-style:inset;  
 
    /* 使文字有一点移动 */  
    padding-left:6px;  
    padding-top:6px;  
}
 
/* 按钮样式 */ 
QPushButton:flat 
{  
    border:2px solid red;  
} 
 
/*鼠标悬浮时的效果*/
QPushButton:hover
{
    color:#0000ff;
    background-color:rgb(210, 205, 205); /*改变背景色*/
    border-style:inset;/*改变边框风格*/
    padding-left:8px;
    padding-top:8px;
}

二、放置一个图片，鼠标悬浮和点击时都会出现不同样式 

这个比较简单，就直接上代码了

QPushButton
{
 background-image:url(":/resources/user.png");
 background-position:center;
 background-repeat: no-repeat;
 border:none
}
 
QPushButton:hover
{
 background-color:rgb(10,210,210);
 background-image:url(":/resources/user_hover.png")
}
 
QPushButton:pressed
{
 background-color:rgb(10,210,210);
 background-image:url(":/resources/user.png");
 padding-left:8px;
    padding-top:8px;
}

三、实现按钮上图片和文字左右共存的效果

主要是实现按钮上图片和文字左右共存的效果，可以通过参数设置图片在左边还是在右边

3.1最终效果

实现这个还是简单，而且既可以通过代码实现，也可以通过样式表实现

3.2通过代码实现 

    ui->pushButton_3->resize(64,64);
    ui->pushButton_3->setText("会员");
    ui->pushButton_3->setIcon(QIcon(":/resources/vip_yes.png"));
    //可以设置图标的位置，在文字左边还是右边
    ui->pushButton_3->setLayoutDirection(Qt::LeftToRight);

    enum LayoutDirection {
        LeftToRight,
        RightToLeft,
        LayoutDirectionAuto
    }; 

这里的这个参数指的是图片的位置，默认情况下是图片在左边。

3.3通过样式表实现

 里面用到一个转义字符，注意一下。

ui->pushButton_4->setFixedSize(200, 64);
    ui->pushButton_4->setText(u8"非会员");
    QString btnStyle = "QPushButton{"
                       "background-image: url(:/resources/vip_no.png);"
                       "background-repeat: no-repeat;"
                       "background-origin: padding;"
                       "background-position: left;"
                       "padding-left:65px;"
                       "border: none;"
                       "background-color: rgb(0, 255, 255);"
                       "color:rgb(0, 0, 0);"
                       "text-align:left;"
                       "font: bold italic 30px \"Microsoft YaHei\";"
                       "}";

    ui->pushButton_4->setStyleSheet(btnStyle);

3.4实现图片和文字的上下共存

如果说想实现图片和文字的上下共存，也是两个方法。

3.4.1ToolButton

用ToolButton，这个可以直接实现

3.4.2QPushButton

QPushButton本身也是继承自QWidget，我们就可以把他看成是一个Widget，所以可以在按钮里放两个QLabel，一个在上面放图片，一个在下面放文字。最终实现我们想要的效果

ui->label->setPixmap(QPixmap(":/resources/vip_yes.png"));

 

---

以上，就是QPushButton常用的qss。

都看到这里了，点个赞再走呗朋友~

加油吧，预祝大家变得更强！