QtUI界面美化

在属性编辑器中设置stylesheet来修改界面

1.QRadioButton

QRadioButton{  
    spacing: 5px;  
}  
  
QRadioButton::indicator{  
    width: 45px;  
    height: 30px;  
}  
  
QRadioButton::indicator:unchecked{  
    image:url(:/RoomService/switch_off.png);
}  
  
QRadioButton::indicator:checked{  
    image:url(:/RoomService/switch_on.png);
}  
  
QRadioButton::indicator:checked:disabled{  
    image:url(:/RoomService/switch_off.png);
}    

/** style2**/
QRadioButton{
	margin: 6px 4px 6px 4px;
}

QRadioButton:unchecked{
	border-image: url(:/tools/tools/pick-normal.png);
}

QRadioButton:checked{
	border-radius: 2px;
	background-color:#33000000;
	border-image: url(:/tools/tools/pick-press.png);
}

QRadioButton::indicator {
    width: 28px;
    height: 24px;
	image: none;
	border-image: url(:/tools/tools/eraser-normal.png);
}

QRadioButton::indicator:hover {
	border-image: url(:/tools/tools/eraser-hover.png);
}

2.QSlider

QSlider::groove:horizontal {
border: 1px solid #999999;
height: 5px;
border-radius: 9px;
margin: 0px;  
left : 9px;
right: 9px;         
}

QSlider::handle:horizontal {
width: 18px;
background-image: url(:/RoomService/slider.png);
margin: -7px -7px -7px -7px;  
}

QSlider::add-page:qlineargradient {
background: lightgrey;
border-top-right-radius: 9px;
border-bottom-right-radius: 9px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}

QSlider::sub-page:qlineargradient {
background: #006eff;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 9px;
border-bottom-left-radius: 9px;
}

3.Qbutton

QPushButton {
	border: none;
	background:  #006eff;
	color: #ffffff;
	font: 10pt "Microsoft YaHei";
}

QPushButton:hover {
	background:  #0068f2;
}

QPushButton:pressed {
	background:  #0062e5;
}

QPushButton:disable {
	border: 1px solid #d5d5d5;
	color: #bbbbbb;
	background:  #f2f2f2;
}
/**close btn**/
QPushButton{
	font: 10pt "Microsoft YaHei";
	border: none;
	image: url(:/RoomService/close-button.png);
	background-position: center;
}
QPushButton:hover{
	background-color: rgb(255, 99, 71);
}
QPushButton:pressed{
	background-color: rgb(255, 99, 71);
}

 4.QTabWidget

#tabWidget{
	background-color: #ffffff;
} 

QTabWidget::pane { /* The tab widget frame */
	top: 0px;
	border-top: 1px solid #dddddd;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom:0px;
}
/* Style the tab using the tab sub-control. Note that
    it reads QTabBar _not_ QTabWidget */
QTabBar::tab {
	margin-top: 16px;
	margin-left: 2px;
    padding-left:0px;
	padding-right:0px;
	height:18px;
	width: 84px;
}

QTabBar::tab:selected {
	font: bold 11pt "Microsoft YaHei";
	color: #006eff;
    background: #ffffff;
	border-bottom: 2px solid #006eff;
}

QTabBar::tab:!selected {
    margin-top: 16px; /* make non-selected tabs look smaller */
	font: 11pt "Microsoft YaHei";
	color: #444444;
    background: #ffffff;
}

CustomTextEdit

#tb_msg{
	border: none;
	background: #f2f2f2;
	font: 9pt "Microsoft YaHei";
	color: #bbbbbb;
}
/**dd**/
QWidget {
background-color: rgb(229, 240, 255);
border-style: solid;
border-width: 1px;
border-color: rgb(151, 199, 255);
}

4.QCheckBox

QCheckBox{
	margin: 6px 4px 6px 4px;
}

QCheckBox:unchecked{
	border-image: url(:/tools/tools/pick-normal.png);
}

QCheckBox:checked{
	border-radius: 2px;
	background-color:#33000000;
	border-image: url(:/tools/tools/pick-press.png);
}

QCheckBox::indicator {
	background-color: #0075ff;
	margin:5px;
    width: 18px;
    height: 14px;
	image: none;
}

eg:运行效果

eg:设计效果 class QMdiArea

 2.

eg:资源图片