Qt实战案例(13)

您所在的位置:网站首页 qt服务机器人界面 Qt实战案例(13)

Qt实战案例(13)

2023-07-27 19:24| 来源: 网络整理| 查看: 265

目录 一、Qt风格1.1 对风格进行预览1.2 风格使用 二、Qt样式表2.1 使用代码设置样式表2.2 在设计模式中设置样式表2.3 Qt样式表的语法2.4 子控件(Sub-Controls)2.5 伪状态(Pseudo-States)2.6 继承2.7 qss2.8 代码示例 三、特殊效果窗体四、总结

一、Qt风格

Qt中的各种风格是一组继承自QStyle的类。QStyle类是一个抽象基类,封装了一个GUI的外观,Qt的内建(built-in)部件使用它来执行几乎所有的绘制工作,以确保它们看起来像各个平台上的本地部件一样。QStyleFactory类可以创建一个QStyle对象,首先通过keys()函数获取可用的风格,然后使用create()函数创建一个QStyle对象。一般windows风格和fusion风格是默认可用的,而有些风格旨在特定的平台上才有效,如windowsxp风格、windowsvista风格、gtk风格和macintosh风格。

1.1 对风格进行预览

对风格进行预览的步骤如下: 点击ui进入UI界面——>工具——>Form Editor——>Preview in 如下图所示: 在这里插入图片描述 这里列出了三种可用的风格,选择“Fusion风格”,预览效果如下图所示。 在这里插入图片描述

1.2 风格使用

如果想使用不同的风格来运行程序,只需要调用QApplication的setStyle()函数来指定要使用的风格即可。打开main.cpp文件,添加头文件包含#include,然后在添加如下代码:

a.setStyle(QStyleFactory::create("fusion"));

如下: 在这里插入图片描述 这时运行程序便会使用Fusion风格。

如果不想在整个应用程序中都使用相同的风格,可以调用部件的setStyle()函数来指定该部件的风格。在mainwindow.cpp文件中,先添加头文件包含#include,然后在构造函数中添加如下代码:

ui->progressBar->setStyle(QStyleFactory::create("fusion"));

这时再次运行程序,其中仅有进度条部件变为fusion风格了。

二、Qt样式表

Qt样式表是一个可以自定义部件外观的十分强大的机制,Qt样式表的相关概念都受到了HTML的层叠样式表(Cascading Style Sheets,CSS)的启发,不过与CSS不同的是,Qt样式表应用于部件的世界。

样式表可以使用QApplication::setStyleSheet()函数将其设置到整个应用程序上,也可以使用QWidget::setStyleSheet()函数将其设置到一个指定的部件(还有它的子部件)上。

2.1 使用代码设置样式表

代码示例:

//设置pushbutton的背景为黄色 ui->pushButton->setStyleSheet("background:yellow"); //设置groupBox的背景为蓝色 ui->groupBox->setStyleSheet("background:blue");

这样就设置了两个部件的背景色,可以运行程序查看效果: 在这里插入图片描述 如果想对所有的相同部件都使用相同的样式表,那么可以在它们的父部件上设置样式表。代码如下:

setStyleSheet("QPushButton{background:yellow}QGroupBox{background:blue}");

运行结果: 在这里插入图片描述 这样,所有的QPushButton部件和QGroupBox部件的背景色都会改为指定的颜色。

2.2 在设计模式中设置样式表

先注释掉上述代码,在UI界面中右击选择“改变样式表”, 在这里插入图片描述 这时会出现编辑样式表对话框,在其中输入如下代码:

QPushButton{ }

然后光标在括号中间,单击“添加颜色”,手动选择对应的颜色样式,点击ok。 在这里插入图片描述 这样可以很便捷直观的设置样式表。

2.3 Qt样式表的语法

Qt样式表的语法和CSS基本相同。每个样式规则由选择器(selector)和声明(declaration)组成,例如:

QPushButton{color:red}

在这个样式规则中,QPushButton是选择器,{color:red}是声明。其中color是属性,red是值。这个规则制定了QPushButton和它的子类应该使用红色作为前景色。Qt样式表不区分大小写。 一些选择器可以指定相同的声明,使用逗号隔开,例如:

QPushButton,QLineEdit,QComboBox{color:red}

【注】:我们可以在Qt帮助中输入Qt Style Sheets Reference然后选择List of Properties 项查看Qt控件支持的所有状态。 在这里插入图片描述

2.4 子控件(Sub-Controls)

对于一些复杂的部件修改样式,可能需要访问它们的子控件,如QComboBox的下拉按钮,还有QSpinBox的向上和向下箭头等。选择器可以包含子控件来对部件的特定子控件应用规则,如:

QComboBox::drop-down{image:url(dropdown.png)}

这样可以改变所有QComboBox部件的下拉按钮的样式。

【注】:我们可以在Qt帮助中输入Qt Style Sheets Reference然后选择List of Sub-Controls 项查看Qt控件支持的所有状态。

在这里插入图片描述

2.5 伪状态(Pseudo-States)

选择器可以包含伪状态来限制规则在部件的指定状态上应用。伪状态出现在选择器之后,用冒号隔开,如:

QPushButton:hover{color:white}

这个规则表示当鼠标悬停在一个QPushButton部件上时才被应用。伪状态可以使用感叹号来表示否定,例如,要当鼠标没有悬停在一个QRadioButton上时才应用规则,则可以写为:

QRadioButton:!hover{color:red}

伪状态也可以多个连用,如当鼠标悬停在一个被选中的QCheckBox上时才应用规则:

QCheckBoc:hover:checked{color:white}

也可以使用逗号来表示逻辑或操作,如:

QCheckBoc:hover,QCheckBox:checked{color:white}

当然,伪状态也可以和其他子控件联合使用:

QComboBox::drop-down:hover{image:url(dropdown.png)}

【注】:我们可以在Qt帮助中输入Qt Style Sheets Reference然后选择List of Pseudo-States 项查看Qt控件支持的所有状态。 在这里插入图片描述

2.6 继承

当使用Qt样式表时,部件并不会自动从父部件中继承字体和颜色样式,如对QGroupBox设置样式表:

setStyleSheet("QGroupBox{color:red;}");

但没有对其内部的QPushButton设置样式表,这时QPushButton会使用系统颜色,而不会继承QGroupBox的颜色,如果要将QGroupBox的颜色应用于其子部件,可以这样设置样式:

setStyleSheet("QGroupBox,QGroupBox * {color:red;}"); 2.7 qss

Qt样式表可以存放在一个以.qss为后缀的文件中,这样就可以在程序中调用不同的.qss文件实现换肤的功能。qss的详细功能这里就不进行介绍了,有兴趣的可以自行查阅相关资料。

【注】:我们可以在Qt帮助中输入Qt Style Sheets Examples查看样式表的一些应用规范。

2.8 代码示例

下面是QSpinBox部件的样式表代码:

QSpinBox { padding-right: 15px; /* make room for the arrows */ border-image: url(:/images/frame.png) 4; border-width: 3; } QSpinBox::up-button { subcontrol-origin: border; subcontrol-position: top right; /* position at the top right corner */ width: 16px; /* 16 + 2*1px border-width = 15px padding + 3px parent border */ border-image: url(:/images/spinup.png) 1; border-width: 1px; } QSpinBox::up-button:hover { border-image: url(:/images/spinup_hover.png) 1; } QSpinBox::up-button:pressed { border-image: url(:/images/spinup_pressed.png) 1; } QSpinBox::up-arrow { image: url(:/images/up_arrow.png); width: 7px; height: 7px; } QSpinBox::up-arrow:disabled, QSpinBox::up-arrow:off { /* off state when value is max */ image: url(:/images/up_arrow_disabled.png); } QSpinBox::down-button { subcontrol-origin: border; subcontrol-position: bottom right; /* position at bottom right corner */ width: 16px; border-image: url(:/images/spindown.png) 1; border-width: 1px; border-top-width: 0; } QSpinBox::down-button:hover { border-image: url(:/images/spindown_hover.png) 1; } QSpinBox::down-button:pressed { border-image: url(:/images/spindown_pressed.png) 1; } QSpinBox::down-arrow { image: url(:/images/down_arrow.png); width: 7px; height: 7px; } QSpinBox::down-arrow:disabled, QSpinBox::down-arrow:off { /* off state when value in min */ image: url(:/images/down_arrow_disabled.png); } 三、特殊效果窗体

特殊效果窗体将在下一节进行介绍,可参考:https://blog.csdn.net/didi_ya/article/details/122005117

四、总结

要想为软件设计一个漂亮的界面,需要灵活使用Qt样式表,不过这需要一定的CSS功底,还需要有美工经验。加油~

以上便是本文的全部内容了,如果对你有所帮助,记得点个赞哟~



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3