✨✨ Rqtz 个人主页 : 点击✨✨
🌈Qt系列专栏:点击
🎈PyQt系列专栏:点击🎈
🎈Qt智能车上位机专栏: 点击🎈
🎈Qt串口助手专栏:点击🎈
💫宗旨:共享IT之美,共创机器未来
目录
界面效果展示
Qt Desginer布局方式参数设置
伪状态大全（来自Qt助手）
控件子选择器大全（来自Qt助手）
Qt相关控件的样式（持续更新中）
编辑
QLineEdit样式1
QLineEdit样式2
QLineEdit补充
QFrame样式
Qcombobox样式
QComboBox补充
QCheckBox样式
QProgressBar样式
QScrollBar样式
QSlider样式
Qt作为一个强大的GUI开发框架，为开发者提供了丰富的UI控件来设置GUI界面，但是传统的控件样式显得不是很美观，因为它们是最初的形态，没有添加任何的样式，因此给人的视觉感受不是很优雅，但是对于Qt来讲，他们 显然考虑到了这一点。
为了使得GUI界面显得更加的美观，Qt官方提出了Qt stylesheet,也就是QSS,他利用的CSS2的一些属性和方法，来用于对Qt控件的美化，我们可以借助Qt desginer来设计界面并美化，同时可以借助Qt提供的帮助文档来查看相关QSS样式的用法。
对于Qt的初学者而言，可能认为Qt widgets做出来的界面非常丑，没有什么观赏性，所以为了作出更加精美的页面，从而转向的更易于实现优美界面的qml上面，其实，如果你能够灵活运用样式表的话，你同样可以做出优美的界面的！
那么接下来，我将给大家介绍如何使用Qt widgets ,QSS和Qt Desginer 来做出一个Macos风格的一个UI界面。
界面效果展示
Qt Desginer布局方式参数设置
想要界面做到简洁，美观，首先控件的排版布局一定要规整，所以这里有必要讲以下如何利用Qt desginer右侧工具栏来设置布局相关的参数。
1)首先向一个Qstackedwidget控件中加入4个Qframe，如图所示(没有布局)
2)对Qstackedwidget使用网格布局
树状图如上图所示
使用网格布局后发现，四个QFrame分布在四个区域，且均匀分布，但是如果拿这样的界面来使用的话，显然很不美观。
3)下面通过右侧工具栏来调整参数来美化
如图所示，layout一栏中有多个参数
这些属性与CSS中的盒模型是一样的。
- layoutleftmargin:布局中左侧的外边距
- layoutTopmargin:布局中上侧的外边距
- layoutRightmargin:布局中右侧的外边距
- layoutBottommargin:布局中下侧的外边距
- layouthorizon:布局中控件水平间隔
- layoutVericals:布局中控件垂直间隔
- layoutRowStretch:布局中纵向控件的长度比值
- layoutColumStretch:布局中横向控件的长度比值
1-6全部设为50的结果为
很明显，控件之间的间距被等距离的隔开了。
当我们把layoutRowStretch设为1，2时，发现纵向排列的控件比值发生变化
当我们再把layoutColumStretch设为1，2时，发现横向排列的控件比值发生变化
4)添加圆角和背景
首先就是添加样式表，#fame_45是对象名称(id选择器)，剩余部分就是一些CSS属性了。
#frame_45{
background-color: rgb(50, 50, 50);
border-radius:30px;
margin:20px;
color: rgb(88, 255, 106);
font:10 15pt "Vemana2000";
font-weight:bold;
}
伪状态大全（来自Qt助手）
控件子选择器大全（来自Qt助手）
Qt相关控件的样式（持续更新中）
这种图标的添加使用的QPushbutton和Qicon来用的.
添加图标
切换到右侧工具栏，搜索icon,如上图所示，找到那个倒三角，点击添加资源文件-->点击小齿轮-->新建资源文件-->添加前缀-->添加文件即可。
接下来将图标加入进去，注意按钮上的Qpushbutton这些字符要删掉，这样就只有一个图标了，像这样
但是这样图标太小了，而且按钮也不好看。
图标大小可以用下面的iconsize来修改。
Qpushbutton样式1
QPushButton{
border:none;
padding:7px;
color: rgb(211, 215, 207);
font: 75 17pt "Yrsa";}
QPushButton:hover{border-right: 3px solid rgb(255, 0, 0);background-color: rgb(50, 50, 50);
}
Qpushbutton样式2
QPushButton{border:none;padding-top:7px;color: rgb(0, 0, 0);font: 75 16pt "Ubuntu Condensed";font-weight:bold;}
QLineEdit样式1
QLineEdit{
color:white;
padding:10px;
padding-left:20px;
border-radius:15px;
background-color: rgb(38, 35, 30);
}
QLineEdit样式2
QLineEdit{border:none;font: 75 17pt "Ubuntu Condensed";font-weight:bold;background-color: rgb(208, 224, 246);border-bottom:2px solid black;padding-top:5px;padding-left:70px;
}
黑色底边框
QLineEdit补充
#selection-background-color置了当用户选中文本时，选中部分的背景颜色为深灰色。QLineEdit {selection-background-color: darkgray;}#设置了密码模式下（即输入时显示圆点或星号代替实际字符）的QLineEdit控件中，实际字符被替换为Unicode字符9679（即一个圆点
QLineEdit[echoMode="2"]
{ lineedit-password-character: 9679;
}
#设置了只读状态下样式
QLineEdit:read-only {background: lightblue;
}其他Unicode字符可以用作密码替代字符
- 星号（*）：U+002A
- 井号（#）：U+0023
- 空格：U+0020
- 下划线（_）：U+005F
- 感叹号（！）：U+0021
- 问号（？）：U+003F
- 波浪号（~）：U+007E
- 美元符号（$）：U+0024
- 百分号（%）：U+0025
- 和号（&）：U+0026
QFrame样式
#frame{
border-radius:25px;
padding:6px;
padding-left:20px;
padding-right:20px;
background-color: rgb(208, 224, 246);
}QFrame（底），Qpushbutton（左），QLineEdit（右）配合使用得到以下效果
Qcombobox样式
QComboBox{color: rgb(211, 215, 207);padding:3px;padding-left:55px;font: 75 13pt "Waree";font-weight:bold;border-radius:10px;margin-right:20px;background-color: rgb(0, 0, 0);
}
QComboBox:drop-down{image: url(:/image/H5-向下移动菜单.png);
width:13px;
height:13px;
margin:15px;
margin-right:20px;}
QComboBox QAbstractItemView {background-color: rgb(32, 74, 135);
}
非展开与展开效果
QComboBox补充
#设置可编辑状态的样式QComboBox:editable {background: white;}
#设置Qcombobox和下拉箭头不可编辑状态的样式QComboBox:!editable, QComboBox::drop-down:editable {background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);}
#设置当QComboBox处于打开状态时的样式QComboBox:on { padding-top: 3px;padding-left: 4px;}
#设置下拉箭头样式，自定义下拉按钮的背景、边框、位置等属性QComboBox::drop-down {subcontrol-origin: padding;subcontrol-position: top right;width: 15px;border-left-width: 1px;border-left-color: darkgray;border-left-style: solid; /* just a single line */border-top-right-radius: 3px; /* same radius as the QComboBox */border-bottom-right-radius: 3px;}
#设置下拉箭头样式，箭头图标的图像、大小、位置等QComboBox::down-arrow {image: url(/usr/share/icons/crystalsvg/16x16/actions/1downarrow.png);}QCheckBox样式
#设置指示器大小QCheckBox::indicator {width: 13px;height: 13px;}
#设置指示器没有被勾选样式QCheckBox::indicator:unchecked {#Qss样式}
#设置指示器没有被勾选但是鼠标悬浮样式QCheckBox::indicator:unchecked:hover {#Qss样式}
#设置指示器没有被勾选但是鼠标点击样式QCheckBox::indicator:unchecked:pressed {#Qss样式}
#设置指示器有被勾选样式QCheckBox::indicator:checked {#Qss样式}
#设置指示器有被勾选，鼠标悬浮样式QCheckBox::indicator:checked:hover {#Qss样式}
#设置指示器有被勾选，鼠标点击样式QCheckBox::indicator:checked:pressed {#Qss样式}
#设置指示器不确定被勾选，鼠标悬浮样式QCheckBox::indicator:indeterminate:hover {#Qss样式}
#设置指示器大小不确定被勾选，鼠标点击样式QCheckBox::indicator:indeterminate:pressed {#Qss样式}
QProgressBar样式
#置了进度条中每个块的样式QProgressBar::chunk {background-color: #05B8CC;width: 20px;}
QScrollBar样式
#设置水平滚动条的样式
QScrollBar:horizontal {border: 2px solid grey;background: #32CC99;height: 15px;margin: 0px 20px 0 20px;}
#设置水平滚动条滑块的样式QScrollBar::handle:horizontal {background: white;min-width: 20px;}
#设置水平滚动条增加按钮的样式QScrollBar::add-line:horizontal {border: 2px solid grey;background: #32CC99;width: 20px;subcontrol-position: right;subcontrol-origin: margin;}
#设置水平滚动条减少按钮的样式QScrollBar::sub-line:horizontal {border: 2px solid grey;background: #32CC99;width: 20px;subcontrol-position: left;subcontrol-origin: margin;}QSlider样式
#设置了垂直滑块槽的样式QSlider::groove:vertical {background: red;position: absolute; left: 4px; right: 4px;}
#设置了垂直滑块手柄的样式QSlider::handle:vertical {height: 10px;background: green;margin: 0 -4px; }
)
