当前位置：首页 > article >正文

Qt-界面优化控件样式设置(72)

article 2024/10/20 16:18:22

描述

QPushButton

自定义复选框

输入框

列表框

菜单

实现登入界面

设置背景图

改变样式表

描述

这里介绍一些控件的样式设置

QPushButton

相关属性

font-size	设置⽂字⼤⼩.
border-radius	设置圆⻆矩形. 数值设置的越⼤, ⻆就 "越圆".
background-color	设置背景颜⾊

本人设置的不好看

QPushButton {
	font-size: 20px;
	border: 2px soild rgb(120, 23, 255);
	border-radius:10px;
	background-color:rgb(0, 0, 0);
	color: rgb(0, 0, 255)
}
QPushButton:pressed {
	background-color: rgb(255, 0, 0)
}

自定义复选框

相关属性

要点	说明
::indicator	⼦控件选择器. 选中 checkbox 中的对钩部分.
:hover	伪类选择器.选中⿏标移动上去的状态

:pressed	伪类选择器. 选中⿏标按下的状态.
:checked	伪类选择器. 选中 checkbox 被选中的状态.
:unchecked	伪类选择器. 选中 checkbox 未被选中的状态.
width	设置⼦控件宽度. 对于普通控件⽆效 (普通控件使⽤ geometry ⽅式设定尺⼨).
height	设置⼦控件⾼度. 对于普通控件⽆效 (普通控件使⽤ geometry ⽅式设定尺⼨).
image	设置⼦控件的图⽚. 像 QSpinBox, QComboBox 等可以使⽤这个属性来设置⼦控件的图⽚.

创建⼀个 resource.qrc ⽂件, 并导⼊以下图⽚，可以去矢量图网站中下载，有很多的

使⽤⿊⾊作为默认形态.
使⽤蓝⾊作为 hover 形态.
使⽤红⾊作为 pressed 形态.

添加qrc资源

运行

可以使用添加资源的方式，来保证地址输入的正确

QCheckBox{
	font-size: 20px;
}
QCheckBox::indicator{
	width: 20px;
	height: 20px;
}
QCheckBox::indicator:unchecked {
	image: url(:/checkbox-off.png);
}
QCheckBox::indicator:unchecked:hover {
	image: url(:/checkbox_hover_off.png)
}
QCheckBox::indicator:unchecked:pressed {
	image: url(:/checkbox_pressed_off.png)
}
QCheckBox::indicator:checked {
	image: url(:/checkbox-on.png);
}
QCheckBox::indicator:hover {
	image: url(:/checkbox_hover_on.png);
}
QCheckBox::indicator:pressed {
	image: url(:/checkbox_pressed_on.png);
}

输入框

相关属性

属性	说明
border-width	设置边框宽度.
border-radius	设置边框圆⻆.
border-color	设置边框颜⾊.
border-style	设置边框⻛格.
padding	设置内边距.
color	设置⽂字颜⾊.
background	设置背景颜⾊.
selection-background-color	设置选中⽂字的背景颜⾊.

selection-color

设置选中⽂字的⽂本颜⾊.

使用

QLineEdit {
	border-width: 2px;
	border-color: rgb(56, 255, 53);
	border-style: solid;
	border-radius: 20px;
	padding-left: 10px;
	color: rgb(170, 255, 0);
	font-size: 24px;
	background-color: rgb(255, 255, 127);
	selection-color: rgb(85, 255, 255);
	selection-background-color: rgb(255, 85, 255);
}

列表框

相关属性

::item	选中 QListView 中的具体条⽬.
:hover	选中⿏标悬停的条⽬
:selected	选中某个被选中的条⽬.
background	设置背景颜⾊
border	设置边框.
qlineargradient	设置渐变⾊

QListWidget::item:hover {
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #FAFBFE, stop: 1 #DCDEF1);
}
QListWidget::item:selected {
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6a6ea9, stop: 1 #888dd9);
}

菜单

相关属性

QMenuBar::item

选中菜单栏中的元素.

QMenuBar::item:selected	选中菜单来中的被选中的元素.
QMenuBar::item:pressed	选中菜单栏中的⿏标点击的元素.
QMenu::item	选中菜单中的元素
QMenu::item:selected	选中菜单中的被选中的元素.
QMenu::separator	选中菜单中的分割线.

使用

代码

QMenuBar {
	background-color: #f0f0f0;
	spacing: 5px;
}
QMenuBar::item {
	border-radius: 10px;
	padding: 3px 10px;
	background-color: rgb(255, 255, 210);
}
QMenuBar::item:selected {
	background-color: rgb(170, 85, 0);
}
QMune:item {
	border: 2px solid transparent;
	padding: 2px 10px;
}
QMenu::item:selected {
	border: 2px solid red;
}
Qmenu::separator {
	height: 2px;
	background-color: green;
	nargin: 0 5px;
}

实现登入界面

首先拉取需要用到的控件，使用垂直布局管理器管理后，可以看到很不友好，我们需要设置一下它们的属性

因为使用了布局管理器，所以我们无法直接设置它们的高度和宽度

我们可以通过设置最小高度和最大高度来设置好控件的高度，当然宽度也可以这样设置

设置好之后，好看一些了

设置背景图

在 Qt 中我们无法直接在 QWidget 顶层窗口中去添加背景图

窗口背景设置方法

添加背景图

添加一层 Qframe

改变样式表

图片变扁扁的了

QFrame {
	border-image: url(:/cat.jpg);
}

QLineEdit {
	color: white;
	background-color: #405361;
	padding: 0 5px;
	font-size: 20px;
	border: none;
	border-radius: 10px;
}

QCheckBox {
	color: white;
	font-size: 18px;
}

QPushButton {
	font-size: 20px;
	color: white;
	background-color: #555;
	border-radius: 10px;
}

QPushButton:pressed {
	color: black;
	background-color: orange;
}