
✨✨ 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; 
  }


















