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--样式表设置按钮样式


  • 相关阅读:
    day4
    day3
    day2
    day1
    结对开发
    开课博客
    个人课程总结
    学习进度条-第八周
    学习进度条-第七周
    Fooks 电梯演讲
  • 原文地址:https://www.cnblogs.com/linuxAndMcu/p/11039814.html
Copyright © 2011-2022 走看看