zoukankan      html  css  js  c++  java
  • Qt样式表之三:实现按钮三态效果的三种方法

    按钮的三态,指的是普通态、鼠标的悬停态、按下态。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--样式表设置按钮样式


  • 相关阅读:
    UVa 1349 (二分图最小权完美匹配) Optimal Bus Route Design
    UVa 1658 (拆点法 最小费用流) Admiral
    UVa 11082 (网络流建模) Matrix Decompressing
    UVa 753 (二分图最大匹配) A Plug for UNIX
    UVa 1451 (数形结合 单调栈) Average
    UVa 1471 (LIS变形) Defense Lines
    UVa 11572 (滑动窗口) Unique Snowflakes
    UVa 1606 (极角排序) Amphiphilic Carbon Molecules
    UVa 11054 Wine trading in Gergovia
    UVa 140 (枚举排列) Bandwidth
  • 原文地址:https://www.cnblogs.com/linuxAndMcu/p/11039814.html
Copyright © 2011-2022 走看看