当前位置: 首页>前端>正文

wxpython 代码界面美化 pyqt5代码界面美化

PYQT5|Pyside2 QSS界面美化教程详解

QSS 概念

点击这里,边看视频讲解,边学习以下内容

前面,我们开发的程序界面有点简陋。

大家点击这里,下载一个白月黑羽实战班学员开发的程序界面代码,解压后,拖动里面的main.ui界面文件到Qt设计师里面。

像这样

wxpython 代码界面美化 pyqt5代码界面美化,wxpython 代码界面美化 pyqt5代码界面美化_样式属性,第1张

要让产品更好看一些,通常就是指定界面元素的 显示样式 。比如指定颜色、字体、间距。

像这样

wxpython 代码界面美化 pyqt5代码界面美化,wxpython 代码界面美化 pyqt5代码界面美化_CSS_02,第2张

Qt有种定义界面显示样式的方法,称之为 Qt Style Sheet ,简称 QSS

如果你学习过Web网页开发,就会发现这个名词和 CSS 特别的相似。

没错,它的 语法和用途 和 CSS 特别的相似。

我们来看上图对应的示例

如果在设计师界面上 最上层的 MainWindow 对象 styleSheet 属性指定如下的内容

QPushButton { 
    color: red ;
    font-size:15px;
}

就会发现,所有的按钮上的文字都变成了红色的,并且字体变大了。

注意这个指定界面元素 显示样式的 语法,由 selector 和 declaration 组成。

花括号前面的 部分,比如示例中的 QPushButton 称之为 selector。

花括号后面的 部分,比如示例中的

{ 
    color: red ;
    font-size:15px;
}

称之为 Properties (样式属性)

selector 选择器

点击这里,边看视频讲解,边学习以下内容

花括号前面的 部分称之为 selector(中文可以叫 选择器),用来 告诉Qt 哪些特征的元素 是你要设定显示效果的。

比如:QPushButton 选择所有类型为 QPushButton (包括其子类) 的界面元素 。

QSS selector语法 几乎 和 Web CSS 的 selector语法没有什么区别,了解CSS的朋友可以轻松掌握。

具体可以点击这里,参考官方文档中的说明

selector常见语法

Selector

示例

说明

Universal Selector

*

星号匹配所有的界面元素

Type Selector

QPushButton

选择所有 QPushButton类型 (包括其子类)

Class Selector

.QPushButton

选择所有 QPushButton类型 ,但是不包括其子类

ID Selector

QPushButton#okButton

选择所有 对象名为 okButton 的QPushButton类型

Property Selector

QPushButton[flat="false"]

选择所有 flat 属性值为 false 的 QPushButton类型。

Descendant Selector

QDialog QPushButton

选择所有 QDialog 内部 QPushButton类型

Child Selector

QDialog > QPushButton

选择所有 QDialog 直接子节点 QPushButton类型

Pseudo-States 伪状态

我们可以这样指定当鼠标移动到一个元素上方的时候,元素的显示样式

QPushButton:hover { color: red }

再比如,指定一个元素是disable状态的显示样式

QPushButton:disabled { color: red }

再比如,指定一个元素是鼠标悬浮,并且处于勾选(checked)状态的显示样式

QCheckBox:hover:checked { color: white }
优先级

如果一个元素的显示样式被多层指定了, 越靠近元素本身 的选择指定,优先级越高

样式属性

点击这里,边看视频讲解,边学习以下内容

QSS的样式属性和网页CSS非常相似。

QSS支持的具体样式,可以点击这里,查看Qt官方文档

我们这里介绍一些常见的样式属性

背景

可以指定某些元素的背景色,像这样

QTextEdit { background-color: yellow }

颜色可以使用红绿蓝数字,像这样

QTextEdit { background-color: #e7d8d8 }

也可以像这样指定背景图片

QTextEdit {
    background-image: url(gg03.png);
}
边框

可以像这样指定边框 border:1px solid #1d649c;

其中

1px 是边框宽度

solid 是边框线为实线, 也可以是 dashed(虚线) 和 dotted(点)

比如

*[myclass=bar2btn]:hover{
	border:1px solid #1d649c;
}

边框可以指定为无边框 border:none

字体、大小、颜色

可以这样指定元素的 文字字体、大小、颜色

*{	
	font-family:微软雅黑;
	font-size:15px;
	color: #1d649c;
}
宽度、高度

可以这样指定元素的 宽度、高度

QPushButton {	
	width:50px;
	height:20px;
}
margin、padding

见下图,根据视频讲解,理解margin、padding 的概念

wxpython 代码界面美化 pyqt5代码界面美化,wxpython 代码界面美化 pyqt5代码界面美化_wxpython 代码界面美化_03,第3张

可以这样指定元素的 元素的 margin

QTextEdit {
	margin:10px 11px 12px 13px
}

分别指定了元素的上右下左margin。

也可以使用 margin-top, margin-right, margin-bottom, margin-left 单独指定 元素的上右下左margin

比如

QTextEdit {
	margin:10px 50px;
	padding:10px 50px;
}

https://www.xamrdz.com/web/2ss1962358.html

相关文章: