• QPushButton样式设置



    原文链接

    QPushButton {
    	border: 1px solid #298DFF; /* QPushButton边框的宽度、样式和颜色 */
    	border-radius: 5px; /* 边框圆角 */
    	background-color: #62a6ea; /* 背景颜色 */
    	color: white; /* 文本颜色 */
    	font-family: "Microsoft YaHei"; /* 文本字体族 */
    	font-size: 14pt; /* 文本字体大小 */
    }
    /*鼠标悬停在按钮*/
    QPushButton:hover
    {
        background-color: #e6c17a; 
        border:2px solid rgb(6,168,255); 
    }
    /*鼠标按下按钮*/
    QPushButton:pressed
    {
        background-color: #20793e; 
        border:2px solid rgb(6,168,255); 
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    RGB颜色查找表

    https://tool.oschina.net/commons?type=3

    在这里插入图片描述

    阿里巴巴矢量图标库

    https://www.iconfont.cn/

    在这里插入图片描述

    Chapter1 QPushButton样式设置

    无样式的按钮

    在这里插入图片描述

    改变字体颜色

    color:#ff0000;
    
    • 1

    在这里插入图片描述

    改变字体

    font-family:Microsoft Yahei;
    
    • 1

    在这里插入图片描述

    改变字号

    font-size:15pt;
    
    • 1

    在这里插入图片描述

    改变背景颜色

    background-color:#c3e9e5;
    
    • 1

    在这里插入图片描述

    设置上边框为2个像素,样式为实线,颜色为黑色

    border-top:2px solid #000000;
    
    • 1

    在这里插入图片描述

    设置所有边框为2个像素,样式为实线,颜色为黑色

    border:2px solid #000000;
    
    • 1

    在这里插入图片描述

    设置左上角圆角为:10px

    border-top-left-radius:10px;
    
    • 1

    在这里插入图片描述

    设置圆角都为:10px

    border-radius:10px;
    
    • 1

    在这里插入图片描述

    设置上内边距为:8px;文字向下移动

    padding-top:8px;
    
    • 1

    在这里插入图片描述

    文字左对齐

    text-align:left;
    
    • 1

    在这里插入图片描述

    给文字加,下划线

    text-decoration:underline;
    
    • 1

    在这里插入图片描述

    给文字加,删除线

    text-decoration:line-through;
    
    • 1

    在这里插入图片描述

    加图标

    image:url(":/delete.png");
    
    • 1

    在这里插入图片描述

    加背景图标

    background-image:url(":/delete.png");
    
    • 1

    在这里插入图片描述

    设置轮廓样式

    outline: 1px solid #0000ff;/*设置轮廓样式*/
    background-color: #cccccc;
    color: #ff0000;
    border-radius: 4px;
    padding: 2px;
    
    • 1
    • 2
    • 3
    • 4
    • 5

    在这里插入图片描述

    按钮禁用时,设置样式

    QPushButton:disabled {
      /*设置禁用时按钮的样式*/
    }
    
    • 1
    • 2
    • 3

    按钮选中时,设置样式

    QPushButton:checked:disabled {
      /*设置选中并且禁用时按钮的样式*/
    }
    
    • 1
    • 2
    • 3

    点击按钮时,设置样式

    QPushButton:pressed {
      /*设置点击按钮时按钮的样式*/
    }
    
    • 1
    • 2
    • 3

    鼠标悬浮在按钮上时,设置样式

    QPushButton:hover {
    
    }
    
    • 1
    • 2
    • 3

    问题,设置QPushButton:checked无效果
    需要先设置按钮checkable属性为true,然后样式设置checked

    如果要设置互斥,需要设置setAutoExclusive为true

    Chapter2 qss样式表之QPushButton

    原文链接:https://blog.csdn.net/aiwangtingyun/article/details/94462976

    先来个示例

    QPushButton {
        font-family: "Microsoft YaHei";
        font-size: 16px;
        color: #BDC8E2;
        background-color: #2E3648;
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    效果图如下:
    在这里插入图片描述
    上面的例子是基本的样式设置,下面我们将探讨 QPushButton 各种样式设置:


    字体样式

    font-family: "Microsoft YaHei";
    font-size: 14px;
    font-style: italic;
    font-weight: bold;
    color: #BDC8E2;
    font: bold italic 18px "Microsoft YaHei";
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    font-family 为设置字体类型,标准形式需要加双引号,不加也可能会生效,具体看系统是否支持,中英文都支持,但要保证字体编码支持,一般程序编码为"utf-8"时没问题。

    font-size 为设置字体大小,单位一般使用 px 像素

    font-style 为设置字体斜体,italic 为斜体, normal 为不斜体

    font-weight 为设置字体加粗,bold 为加粗, normal 为不加粗

    font 为同时设置字体 style weight size family 的样式,但是 style 和 weight 必须出现在开头,size 和 family 在后面,而且 size 必须在 family 之前,否则样式将不生效,font 中不能设置颜色,可以单独设置 style weight 和 size,不能单独设置 family

    color 为设置字体颜色,可以使用十六进制数表示颜色,也可以使用某些特殊的字体颜色:red, green, blue 等,或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 来设置,其中 r、g、b、a 值为0~255,如果想不显示颜色可以设置值为透明 transparent

    注意:字体颜色用的是 color 属性,没有 font-color 这个属性的


    文字位置

    text-align: left center;
    padding-left: 10px;
    padding-top: 8px;
    padding-right: 7px;
    padding-bottom: 9px;
    
    • 1
    • 2
    • 3
    • 4
    • 5

    text-align 为设置文字位置,只支持 left right top bottom center;值 left right center 为设置水平位置,值 top bottom center 为设置垂直位置

    padding-left 为设置文字距离左边边界的距离

    padding-top 为设置文字距离顶边边界的距离

    padding-right 为设置文字距离右边边界的距离

    padding-bottom 为设置文字距离底边边界的距离

    Tip: 特殊的位置可以使用 text-align 来设置,如果要精确设置位置只能通过 padding 来设置,一般 padding-left 相当于 x 坐标,padding-top 相当于 y 坐标,设置这两个就可以显示任意位置显示了(默认情况下文字是上下左右都居中显示的)


    边框样式

    border-style: solid;
    border-width: 2px;
    border-color: red;
    border: 2px solid red;
    
    • 1
    • 2
    • 3
    • 4

    border-style 为设置边框样式,solid 为实线, dashed 为虚线, dotted 为点线, none 为不显示(如果不设置 border-style 的话,默认会设置为 none)

    border-width 为设置边框宽度,单位为 px 像素

    border-color 为设置边框颜色,可以使用十六进制数表示颜色,也可以使用某些特殊的字体颜色:red, green, blue 等,或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 来设置,其中 r、g、b、a 值为0~255,如果想不显示颜色可以设置值为透明 transparent

    border 为同时设置 border 的 width style color 属性,但值的顺序必须是按照 width style color 来写,不然不会生效!

    也可以单独设置某一条边框的样式

    border-top-style: solid;
    border-top-width: 2px;
    border-top-color: red;
    border-top: 2px solid red;
    
    border-right-style: solid;
    border-right-width: 3px;
    border-right-color: green;
    border-right: 3px solid green;
    
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-bottom-color: blue;
    border-bottom: 2px solid blue;
    
    border-left-style: solid;
    border-left-width: 3px;
    border-left-color: aqua;
    border-left: 3px solid aqua;
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    border-top-style 为设置顶部边框样式

    border-top-width 为设置顶部边框宽度

    border-top-color 为设置顶部边框颜色

    border-top 为设置顶部边框 width style color 的属性,原理和 border 一致

    其它三个边框:right bottom left 边框的设置都相同

    设置边框半径

    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-radius: 20px;
    
    • 1
    • 2
    • 3
    • 4
    • 5

    border-top-left-radius 为设置左上角圆角半径,单位 px 像素

    border-top-right-radius 为设置右上角圆角半径,单位 px 像素

    border-bottom-left-radius 为设置左下角圆角半径,单位 px 像素

    border-bottom-right-radius 为设置右上角圆角半径,单位 px 像素

    border-radius 为设置所有边框圆角半径,单位为 px 像素,通过圆角半径可以实现圆形的 PushButton


    背景样式

    background-color: #2E3648;
    background-image: url("./image.png");
    background-repeat: no-repeat; 
    background-position: left center;
    background: url("./image.png") no-repeat left center #2E3648;
    
    • 1
    • 2
    • 3
    • 4
    • 5

    background-color 为设置背景颜色,可以使用十六进制数表示颜色,也可以使用某些特殊的字体颜色:red, green, blue 等,或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 来设置,其中 r、g、b、a 值为0~255,如果想不显示颜色可以设置值为透明 transparent

    background-image 为设置背景图片,图片路径为 url(image-path)

    background-repeat 为设置背景图是否重复填充背景,如果背景图片尺寸小于背景实际大小的话,默认会自动重复填充图片,可以设置为 no-repeat 不重复,repeat-x 在x轴重复,repeat-y 在y轴重复

    background-position 为设置背景图片显示位置,只支持 left right top bottom center;值 left right center 为设置水平位置,值 top bottom center 为设置垂直位置

    background 为设置背景的所有属性,color image repeat position 这些属性值出现的顺序可以任意


    下面是一个综合示例

    QPushButton {
        font-family: "Microsoft YaHei";
        font-size: 16px;
        color: #BDC8E2;
        font-style: italic;
        font-weight: bold;
    
        text-align: left center;
        padding-left: 25px;
        padding-top: 0px;
    
        border-style: solid;
        border-width: 2px;
        border-color: aqua;
        border-radius: 20px;
    
        background-color: #2E3648;
        background-image: url("./image.png");
        background-repeat: no-repeat;
        background-position: left center;
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    在这里插入图片描述


    接下来,我们对 QPuahButton 进行动态样式设置

    鼠标悬浮时的样式

    QPushButton:hover{
    	color: red;
    	border-color: green;
        background-color: aqua;
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5

    鼠标点击时的样式

    QPushButton:pressed{
    	color: green;
    	border-color: blueviolet;
        background-color: black;
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5

    按钮禁止时的样式

    QPushButton:disabled{
    	color: blue;
    	border-color: brown;
        background-color: aqua;
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5

    下拉菜单

    对于 QPushButton,可以给它设置添加一个下拉菜单,这需要调用 QPushButton 的 setMenu() 方法,当菜单设置成功后,QPushButton 就会默认添加一个 menu-indicator 下拉菜单指示器图标,我们可以对这个菜单图标进行样式修改

    QPushButton::menu-indicator {
        image: url(myindicator.png);
        subcontrol-position: right center;
        subcontrol-origin: padding;
        right: 10px;
        top: 15px;
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    image 为设置菜单指示器图标

    subcontrol-position 为设置菜单指示器图标的位置,如果不设置的话会默认放在右下角处

    subcontrol-origin 为设置菜单指示器图标与按钮之间的停靠位置,默认为 padding

    right top left bottom 为设置菜单指示器图标距离按钮四个位置的距离

    当然下拉菜单指示器图标也有动态样式

    QPushButton::menu-indicator:hover {
        image: url(./image1.png)
    }
    
    QPushButton::menu-indicator:pressed{
        image: url(./image2.png)
    }
    
    QPushButton::menu-indicator:open{
        image: url(./image2.png)
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    对于 menu-indicator 来说 pressed 和 open 原理相同

    Chapter3 使用Qss设置QPushButton图标和显示文本的位置

    原文链接

    一、背景

    ​ 在开发中,经常使用到按钮作为一种输入部件,然而很多时候按钮又有不同的开发设计需求,本文重点分享:如何使用Qss来设置按钮的图标和按钮文本的位置,从而实现预期的开发效果。
    【效果】
    在这里插入图片描述
    在这里插入图片描述

    二、Css样式表

    (2-1)常用的QPushButton样式表模板

    QPushButton{
        background-color: #2786ba;				/* 背景颜色 */
        border-radius:5px;					    /* 按钮边框的圆角设置 */
        
        /* 按钮背景图标设置 */
        background-image: url(:/configIcon.png);  /* 背景图片 */
        background-origin: content;
        background-position: center;			/* 背景图片的位置 */
        padding-right: 40px;				    /* 背景图标的padding参数 */
        padding-bottom: 2px;					/* 背景图标的padding参数 */
        background-repeat: no-repeat;			/* 设置背景图像的平铺模式 */
    
        /* 按钮文本设置 */
        text-align: top;						/* 文本的位置 */
        padding-left: 2px;						/* 文本的padding参数 */		
        padding-top: 2px;
        font-size: 12px;
        color: #FFFFFF;							/* 文本颜色 */
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    background-origin属性参考Url:https://www.runoob.com/cssref/css3-pr-background-origin.html

    (2-2)图标在上/文本在下

    QPushButton#pushButton
    {
        background-image: url(:/configIcon.png);
        background-origin: content;
        background-position: top;
        padding-top: 0px;
        background-repeat: no-repeat;
    
        text-align: bottom;
        padding-bottom:-50px;
        font-size: 12px;
        color: #FFFFFF;
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    (2-3)图标在下/文本在上

    QPushButton#pushButton_2
    {
        background-image: url(:/configIcon.png);
        background-origin: content;
        background-position: bottom;
        background-repeat: no-repeat;
    
        text-align: top;
        padding-top:5px;
    
        font-size: 12px;
        color: #FFFFFF;
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    (2-4)图标在左/文本在右

    QPushButton#pushButton_3
    {
        background-image: url(:/configIcon.png);
        background-origin: content;
        background-position: left;
        background-repeat: no-repeat;
    
        text-align: right;
        padding-right:5px;
    
        font-size: 12px;
        color: #FFFFFF;
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    (2-5) 图标在右/文本在左

    QPushButton#pushButton_4
    {
        background-image: url(:/configIcon.png);
        background-origin: content;
        background-position: right;
        background-repeat: no-repeat;
    
        text-align: left;
        padding-left:5px;
    
        font-size: 12px;
        color: #FFFFFF;
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    三、特别说明

    ​ 1、在设置QPushButtom的图标和文本位置时有两个Css属性特别重要:

    1、background-position  -----  设置图标的位置
    2、text-align-------------设置文本的位置			
    
    • 1
    • 2

    2、然后使用Padding盒子模型进行位置设置了:

    padding-left
    padding-bottom
    padding-top
    padding-right
    
    • 1
    • 2
    • 3
    • 4

    padding属性参考Url:https://www.w3school.com.cn/cssref/pr_padding.asp
    注意:以上四个padding参数一定要设置合适,才能调整图标和文本的位置。

    Chapter4 [Qt 教程之Widgets模块] —— QPushButton普通按钮控件

    原文链接:https://blog.csdn.net/maizousidemao/article/details/127018985

    QPushButton按钮,是Qt常用的控件之一,提供普通的按钮功能。

    通过信号槽机制接收触发信号并执行对应动作。

    一、创建QPushButton

    它有三个构造函数:

    // 空对象
    QPushButton(QWidget *parent = nullptr);
    // 指定QPushButton显示的文字
    QPushButton(const QString &text, QWidget *parent = nullptr);
    // 指定QPushButton背景图片和显示的文字
    QPushButton(const QIcon& icon, const QString &text, QWidget *parent = nullptr);
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    最常用的创建方法为:QPushButton(QWidget *parent = nullptr); 并且把它的父对象指定为它所在的窗口对象。

    二、信号

    它通过信号来接收特定的操作,信号包括:
    在这里插入图片描述
    这些信号在QAbstractButton中定义,也就是说继承于QAbstractButton的按钮类都可以使用这些信号。

    由于QPushButton使用最多的操作是点击触发某个行为,所以它常用的信号为pressed和released, 当然也可以使用其他信号实现一些特殊功能。

    三、使用

    最常用的点击触发某个行为:

    创建一个widget空窗口项目,

    首先,切换到ui设计界面,拖动添加一个Push Button按钮,

    在这里插入图片描述
    可以在右侧修改按钮对象的名称,也可以使用默认的pushButton。

    然后,回到widget.cpp文件,连接信号与槽,并实现槽函数(点击按钮要实现的动作)。
    在这里插入图片描述
    其中,connect(ui->pushButton, &QPushButton::clicked, this, &Widget::btnClicked);用于连接按钮信号与其槽函数(关于connect见Qt 学习(四) —— 信号和槽)

    void Widget::btnClicked()是其槽函数,按键clicked信号触发的动作实现在这个函数里。

    这里点击按钮后会在QtCreator的Application OutPut窗口打印button is clicked,如下图:

    在这里插入图片描述
    以上是pushbutton按钮的使用方法,可以把信号换成pressed或released试一下。

    四、按钮样式

    4.1 按钮文字

    通常我们通过按钮上的文字说明按钮的功能,可以使用setText()函数设置按钮文字。

    ui->pushButton->setText("按钮");
    
    • 1

    如果想获取一个按钮的文字,可以使用text()函数:

    QString btnText = ui->pushButton->text();
    
    • 1

    4.2 按钮大小

    使用setGeometry函数可以设置按钮的大小及位置,setGeometry接收一个QRect矩形对象,用以指定按钮大小及位置,如下:

    pushButton->setGeometry(QRect(140, 140, 231, 71));
    
    • 1

    其中前两个参数指定位置(x, y),后两个参数指定大小(height, width)。
    在这里插入图片描述
    另外还可以使用resize函数单独设置按钮的大小:

    ui->pushButton->resize(80, 80);
    
    • 1

    4.3 其他样式

    其他样式主要使用void setStyleSheet(const QString& styleSheet); 函数设置样式表。

    该函数传入QString类型的参数,是遵循 qss 语法的编码字符串。

    qss 语法和 css 语法基本相同。

    比如基本常用的设置按钮的背景色、按钮字体、矩形按钮圆角等。

    ui->pushButton->setStyleSheet("QPushButton {"
                                  "background-color: green;" // 按钮背景色
                                  "font: bold 20px;"	// 按钮字体
                                  "border-width: 1px;"	// 按钮边框线宽
                                  "border-radius: 16px;" // 按钮边框圆角半径
                                  "color: white;" 	// 按钮文字颜色
                                  "}");
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    效果如下:
    在这里插入图片描述
    合理配合大小与圆角的设置,还可以画出圆形按钮:

    ui->pushButton->resize(80, 80);
    ui->pushButton->setStyleSheet("QPushButton {"
                                  "background-color: green;" // 按钮背景色
                                  "font: bold 20px;"	// 按钮字体
                                  "border-width: 1px;"	// 按钮边框线宽
                                  "border-radius: 40px;" // 按钮边框圆角半径
                                  "color: white;"      // 按钮文字颜色
                                  "}");
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    效果如下:
    在这里插入图片描述

    Chapter5 QSS 自定义QPushButton

    原文链接:https://blog.csdn.net/Staranywhere/article/details/107094580

    简述

    本文将通过简单示例介绍QPushButton样式如何自定义。

    常用属性、子控件和伪状态

    QPushButton常用属性如下:

    • border
    • border-radius
    • margin
    • padding
    • background
    • color
    • font
    • border-image
      其中有些属性可细分,如border-color、border-width、border-top、border-top-color、border-top-width、border-top-radius;margin-top;padding-top等等,可根据需要进行多样化定制。
      属性分类,请参考QSS系列:属性类型集合
      QPushButton子控件如下:

    menu-indicator
    子控件分类,请参考QSS系列:子控件集合

    QPushButton常用伪状态如下:

    • default
    • hover
    • checked
    • pressed
    • disabled
      伪状态分类,请参考QSS系列:伪状态集合

    QPushButton支持伪状态链,比如:

    • pressed:checked
    • hover:unchecked

    效果图

    简单定义QPushButton在Normal、Checked、Disabled、有菜单状态和有图片下的样式。

    在这里插入图片描述

    QSS

    如何使用样式表,请参考QSS系列:设置样式表

    * {
    	outline: none; /* 去掉有焦点时的虚线 */
    }
    
    QDialog {
    	background: #D6DBE9; /* 对话框背景色 */
    }
    
    QPushButton {
    	border: 1px solid #298DFF; /* QPushButton边框的宽度、样式和颜色 */
    	border-radius: 3px; /* 边框圆角 */
    	background-color: #F2F2F2; /* 背景颜色 */
    	color: #298DFF; /* 文本颜色 */
    	font-family: "Microsoft YaHei"; /* 文本字体族 */
    	font-size: 10pt; /* 文本字体大小 */
    }
    
    QPushButton:hover {	/* 鼠标悬浮在QPushButton上时的状态 */
    	background-color: #298DFF;
    	color: #F2F2F2;
    }
    
    QPushButton:checked { /* QPushButton可选中时的状态 */
    	border: 1px solid #FF5242;
    	background-color: #F2F2F2;
    	color: #FF5242;
    }
    
    QPushButton:pressed { /* 鼠标按压在QPushButton上时的状态 */
    	background-color: #257FE6;
    }
    
    QPushButton:checked:pressed { /* QPushButton处于可选中且鼠标按压在QPushButton上时的状态 */
    	background-color: #F2F2F2;
    }
    
    QPushButton:disabled { /* QPushButton禁用时的状态 */
    	border: 1px solid #CDCDCD;
    	background-color: #CDCDCD;
    	color: #B4B4B4;
    }
    
    QPushButton#ImageButton { /* 定义图片按钮,ImageButton为对象名,在QSS中为特定对象定制样式 */
    	border-image: url(":/Resource/border_image"); /* 使用border-image可以自适应按钮大小 */
    	background-color: transparent; /* 不需要背景时可设为透明 */
    }
    
    QPushButton#ImageButton:hover {
    	border-image: url(":/Resource/border_image_hover");
    }
    
    QPushButton#ImageButton:pressed {
    	border-image: url(":/Resource/border_image");
    }
    
    QPushButton:menu-indicator { /* QPushButton带有菜单时的菜单指示器 */
    	subcontrol-origin:padding; /* 菜单指示器的起始点 */
    	subcontrol-position: center right; /* 菜单指示器的位置,处于水平靠右且垂直居中 */
    	image: url(:/Resource/down_arrow_normal); /* 菜单指示器的图像 */
    }
    
    QPushButton:menu-indicator:hover, QPushButton:menu-indicator:open { /* 鼠标悬浮在菜单指示器上和菜单指示器启用时的状态 */
    	position: relative;
    	top: 2px;
    	left: 2px;
    	image: url(:/Resource/down_arrow_hover);
    }
    
    QMenu { /* 简单定义菜单样式 */
    	border: 1px solid gray;
    	border-radius: 3px;
    	background-color: #F2F2F2;
    }
    
    QMenu::item { /* 菜单项的样式 */
    	padding: 0px 0px 0px 40px;
    	border: 0px solid transparent;
    	background-color: transparent;
    	color: #298DFF;
    	min-width: 108px; /* 菜单项最小宽度,108+40+1*2=150,使得菜单宽度和QPushButton宽度保持一致 */
    	min-height: 30px; /* 菜单项的最小高度 */
    }
    
    QMenu::item:selected { /* 菜单项处于选中时的状态 */
    	background-color: #298DFF;
    	color: #F2F2F2;
    }
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88

    源码

    main.cpp

    #include "MainWindow.h"
    #include 
    #include 
    
    int main(int argc, char *argv[])
    {
        QApplication a(argc, argv);
    
    	//全局加载样式表
    	QFile styleFile(":/Resource/DefaultTheme");
    	if (styleFile.open(QIODevice::ReadOnly))
    	{
    		QString string = styleFile.readAll();
    		qApp->setStyleSheet(string);
    	}
    
        MainWindow w;
        w.show();
        return a.exec();
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    在这里插入图片描述

  • 相关阅读:
    从js和json中引入数据的区别
    Golang入门笔记(3)—— 运算符
    浅谈 MySQL 连表查询
    Dubbo SpringBoot 实战
    计算机毕业设计Java大型商场应急预案管理系统(源码+系统+mysql数据库+lw文档)
    51种企业应用架构模式详解
    LightDB23.4 支持双引号+字段名大写兼容oracle数据库
    ruby语言怎么写个通用爬虫程序?
    云服务器和CDN有什么区别?
    Docker基础:Docker 常用命令梳理
  • 原文地址:https://blog.csdn.net/m0_46577050/article/details/134087253