前言
在我们的开发过程中，使用控件通常通过样式来实现的，下面的几个控件就是使用样式来实现的。
QComboBox /* 未下拉时，QComboBox的样式 */ QComboBox { border: 1px solid gray; /* 边框 */ border-radius: 5px; /* 圆角 */ padding: 1px 18px 1px 3px; /* 字体填衬 */ color: white; font: normal normal 24px "Microsoft YaHei"; background:rgb(54,54,54); } /* 下拉后，整个下拉窗体样式 */ QComboBox QAbstractItemView { outline: 0px solid gray; /* 选定项的虚框 */ border: 1px solid yellow; /* 整个下拉窗体的边框 */ color: rgb(250,251,252); background-color: rgb(70,80,90); /* 整个下拉窗体的背景色 */ selection-background-color: lightgreen; /* 整个下拉窗体被选中项的背景色 */ } /* 下拉后，整个下拉窗体每项的样式 */ /* 项的高度（设置pComboBox->setView(new QListView(this));后该项才起作用） */ QComboBox QAbstractItemView::item { height: 50px; } /* 下拉后，整个下拉窗体越过每项的样式 */ QComboBox QAbstractItemView::item:hover { color: rgb(90,100,105); background-color: lightgreen; /* 整个下拉窗体越过每项的背景色 */ } /* 下拉后，整个下拉窗体被选择的每项的样式 */ QComboBox QAbstractItemView::item:selected { color: rgb(12, 23, 34); background-color: lightgreen; } /* QComboBox中的垂直滚动条 */ QComboBox QAbstractScrollArea QScrollBar:vertical { width: 13px; background-color: #d0d2d4; /* 空白区域的背景色*/ } QComboBox QAbstractScrollArea QScrollBar::handle:vertical { border-radius: 5px; /* 圆角 */ background: rgb(60,60,60); /* 小方块的背景色深灰lightblue */ } QComboBox QAbstractScrollArea QScrollBar::handle:vertical:hover { background: rgb(90, 91, 93); /* 越过小方块的背景色yellow */ } /* 设置为可编辑（setEditable(true)）editable时，编辑区域的样式 */ QComboBox:editable { background: green; } /* 设置为非编辑（setEditable(false)）!editable时，整个QComboBox的样式 */ QComboBox:!editable { background: rgb(54,54,54); } /* 设置为可编辑editable时，点击整个QComboBox的样式 */ QComboBox:editable:on { background: rgb(54,54,54); } /* 设置为非编辑!editable时，点击整个QComboBox的样式 */ QComboBox:!editable:on { background: rgb(54,54,54); } /* 设置为可编辑editable时，下拉框的样式 */ QComboBox::drop-down:editable { background: rgb(54,54,54); } /* 设置为可编辑editable时，点击下拉框的样式 */ QComboBox::drop-down:editable:on { background: rgb(54,54,54); } /* 设置为非编辑!editable时，下拉框的样式 */ QComboBox::drop-down:!editable { background: rgb(54,54,54); } /* 设置为非编辑!editable时，点击下拉框的样式 */ QComboBox::drop-down:!editable:on { background: rgb(54,54,54); image: url(:/resources/up.png); /* 显示上拉箭头 */ } /* 下拉框样式 */ QComboBox::drop-down { subcontrol-origin: padding; /* 子控件在父元素中的原点矩形。如果未指定此属性，则默认为padding。 */ subcontrol-position: top right; /* 下拉框的位置（右上） */ width: 32px; /* 下拉框的宽度 */ border-left-width: 1px; /* 下拉框的左边界线宽度 */ border-left-color: darkgray; /* 下拉框的左边界线颜色 */ border-left-style: solid; /* 下拉框的左边界线为实线 */ border-top-right-radius: 3px; /* 下拉框的右上边界线的圆角半径（应和整个QComboBox右上边界线的圆角半径一致） */ border-bottom-right-radius: 3px; /* 同上 */ image: url(:/resources/down.png); } /* 越过下拉框样式 */ QComboBox::drop-down:hover { background: rgb(80, 75, 90); } /* 下拉箭头样式 */ QComboBox::down-arrow { width: 32px; /* 下拉箭头的宽度（建议与下拉框drop-down的宽度一致） */ background: rgb(54,54,54); /* 下拉箭头的的背景色 */ padding: 0px 0px 0px 0px; /* 上内边距、右内边距、下内边距、左内边距 */ image: url(:/resources/down.png); } /* 点击下拉箭头 */ QComboBox::down-arrow:on { image: url(:/resources/up.png); /* 显示上拉箭头 */ } QC
