Qt样式表之三:实现按钮三态效果的三种方法

时间:2024-02-20 08:32:59

按钮的三态,指的是普通态、鼠标的悬停态、按下态。Qt中如果使用的是默认按钮,三态的效果是有的,鼠标放上去会变色,点击的时候有凹陷的效果。

但是如果自定义按钮实现三态效果有三种方法,一种是设置背景图,主要是需要自己设计按钮的效果图,另一种是通过样式控制不同状态下按钮的显示效果,还有一种是通过qss文件实现。



方法一:设置背景图方式

1.1 添加背景图

先使用PS或其他图片工具设计按钮的背景图,然后在工程里添加背景图,将下面两张图片添加进去,具体过程这里不再介绍。

下面是普通态的背景图,用了同一张背景图(ok.png):

下面是悬停态的背景图(ok1.png):

下面是按下态的背景图(ok2.png):


1.2 样式表设置背景图

样式表设置背景图可以使用setStyleSheet函数,在程序里设置按钮的样式表,具体程序如下所示:

ui->pbut_boardimg_reset->setStyleSheet("QPushButton{border-image: url(:/new/prefix1/image/showmodeimag/ok.png);}"
"QPushButton:hover{border-image: url(:/new/prefix1/image/showmodeimag/ok.png);}"
"QPushButton:pressed{border-image: url(:/new/prefix1/image/showmodeimag/ok1.png);}");

也可以在 QtDesigner 上,即ui文件上的按钮处编辑样式表,如下图所示:

样式表如下:

QPushButton{border-image: url(:/new/prefix1/image/showmodeimag/ok.png)}
QPushButton:hover{border-image: url(:/new/prefix1/image/showmodeimag/ok.png)}
QPushButton:pressed{border-image: url(:/new/prefix1/image/showmodeimag/ok1.png)}

1.3 运行效果图



二、方法二:设置样式方式

2.1 通过设置样式控制不同显示效果

/*按钮普通态*/
QPushButton
{
    /*字体为微软雅黑*/
    font-family:Microsoft Yahei;
    /*字体大小为20点*/
    font-size:20pt;
    /*字体颜色为白色*/    
    color:white;
    /*背景颜色*/  
    background-color:rgb(14 , 150 , 254);
    /*边框圆角半径为8像素*/ 
    border-radius:8px;
}

/*按钮停留态*/
QPushButton:hover
{
    /*背景颜色*/  
    background-color:rgb(44 , 137 , 255);
}

/*按钮按下态*/
QPushButton:pressed
{
    /*背景颜色*/  
    background-color:rgb(14 , 135 , 228);
    /*左内边距为3像素,让按下时字向右移动3像素*/  
    padding-left:3px;
    /*上内边距为3像素,让按下时字向下移动3像素*/  
    padding-top:3px;
}

注:注释只能使用/* */#//均无效。


2.2 运行效果图

可以看上图中“确定按钮”的三态效果。在鼠标悬停时背景色加深,按下时设置了padding,给人一种按钮被按下的感觉。

这种方法比上面用图标作为背景的好处就是可以不需要设计背景图,而且在样式不设置字体的情况下,可以随意更改文字以及文字的大小、位置、字体等显示效果。



三、方法三:qss文件方式

3.1 新建qss文件

新建一个txt文本文档,并修改后缀名为.qss,文件名任取,例如:myStyleSheet.qss,在这个qss文件写入qss语句。内容如下:

/*按钮普通态*/
QPushButton
{
    /*字体为微软雅黑*/
    font-family:Microsoft Yahei;
    /*字体大小为20点*/
    font-size:20pt;
    /*字体颜色为白色*/    
    color:white;
    /*背景颜色*/  
    background-color:rgb(14 , 150 , 254);
    /*边框圆角半径为8像素*/ 
    border-radius:8px;
}

/*按钮停留态*/
QPushButton:hover
{
    /*背景颜色*/  
    background-color:rgb(44 , 137 , 255);
}

/*按钮按下态*/
QPushButton:pressed
{
    /*背景颜色*/  
    background-color:rgb(14 , 135 , 228);
    /*左内边距为3像素,让按下时字向右移动3像素*/  
    padding-left:3px;
    /*上内边距为3像素,让按下时字向下移动3像素*/  
    padding-top:3px;
}

3.2 引用qss文件

引用qss文件有两种方式,一是引用qss文件的外部路径,二是引用qss文件的资源路径。

一、引用qss文件的外部路径

加载qss文件时,需要指定文件路径(一般是相对路径),如果把qss文件放在磁盘上,文件暴露在用户眼皮底下,可能会被用户随意修改,解决方法就是把qss文件作为资源,一起打包进exe文件中。

二、引用qss文件的资源路径

步骤如下:

1、在qt左侧目录树的顶层文件夹上右击 -> 添加新文件 -> 选择QT -> QT resource file - > choose,输入自定义资源文件的名字 resource -> 选择资源文件的存放路径->下一步->ok,这样就可以在目录树中看到一个文件 resource.qrc。(如果已经创建过资源文件,则跳过该步)

2、右击 resource.qrc文件 -> open in editor,在打开的资源编辑器中,点击添加 -> 前缀 -> 修改前缀为 /qss, 再点击添加 -> 添加现有文件 -> 添加上选中我们上面做好的qss文件。完成后效果如下图所示。

3、写程序时需要读取该文件时,右击这个qss文件,选择复制url,即可复制本文件的资源路径。

3.3 程序设置样式表

//这是在Qt的资源下的文件,可以不用在资源下
QFile file(":/qss/myStyleSheet.qss");
//只读方式打开文件
file.open(QFile::ReadOnly);
//读取文件的所有内容,并转换成QString类型
QString styleSheet = tr(file.readAll());
//当前窗口设置样式表
//this->setStyleSheet(styleSheet);
//指定按钮设置样式表
ui->pushButton->setStyleSheet(styleSheet);
ui->pushButton_2->setStyleSheet(styleSheet);

如果想设置单个的指定按钮样式,则通过UI指向按钮进行修改样式表就可以了。



四、综合对比

3.1 设置背景图方式

优点 :样式简单,直接设置border-image即可,可以选取漂亮的UI图片,总体上可能会比单纯通过样式设置显示效果要好一些。(如果UI图选取效果不好的情况下,效果可能没有单纯设置样式好看,这就要看个人的审美观了哈O(∩_∩)O!)

缺点 :需要自己制定背景效果图, 可能比较耗时。


3.2 设置样式方式

优点不需要准备背景图,直接通过样式设置,简单、粗暴,想怎么设置就怎么设置(前提是要会一点CSS),能够更好地控制显示效果(比如控制文字的大小,位置、字体等)。

缺点样式稍微复杂,需要懂更多的CSS样式,如果需要在按钮上加图标什么的就必须要加载背景图片了,单纯靠样式解决不了。

以上总结了两种方法的优缺点,可以说这两种方法可以相互取长补短,基本上运用好这两种方式就能够做出精美的按钮了,具体采样哪种方式就看自己如何选择了哈 O(∩_∩)O!



五、扩展

QPushButton{border-image: url(:/new/prefix1/image/showmodeimag/ok.png)}

如果我们使用如上样式,将会对所有的QPushButton进行设置样式,如果只需要给某一个则用以下格式:

“QPushButton#” + “按钮名称(objectName)”



参考:

Qt 之 自定义按钮 在鼠标 悬浮、按下、松开后的效果

图文讲解:QT样式表StyleSheet的使用与加载

Qt--样式表设置按钮样式