Qt StyleSheet 控件的几种风格设计

    今天来分享一下我在项目里面画界面的时候用到的几种Qt库控件的stylesheet，Qt的UI之所以好看控件的风格设计很重要，以下面的主界面为例，我分享一下各个控件如QPushbutton，QToolbox等的风格，在我看来还是挺好看的（自夸一下。。呵呵）

一、标题栏上

1、最小化，最大化，关闭，皮肤按钮（QToolButton)

QToolButton[objectName="minisize"]{
border-width: 0px;
border-style: solid;
padding: 0px;
padding-left: 0px;
padding-right: 0px;
min-width: 28px;
max-width: 28px;
min-height: 20px;
max-height: 20px;
background-image: url(:/AnyMeeting/Resources/btn_mini_normal.png);
}
QWidget[objectName="minisize"]:hover{background-image: url(:/AnyMeeting/Resources/btn_mini_highlight.png);}
QWidget[objectName="minisize"]:pressed{background-image: url(:/AnyMeeting/Resources/btn_mini_down.png);}
QToolButton[objectName="maxsize"]{
border-width: 0px;
border-style: solid;
padding: 0px;
padding-left: 0px;
padding-right: 0px;
min-width: 28px;
max-width: 28px;
min-height: 20px;
max-height: 20px;
background-image: url(:/AnyMeeting/Resources/btn_restore_normal.png);
}
QWidget[objectName="maxsize"]:hover{background-image:url(:/AnyMeeting/Resources/btn_restore_highlight.png);}
QWidget[objectName="maxsize"]:pressed{background-image: url(:/AnyMeeting/Resources/btn_restore_down.png);}
QToolButton[objectName="close"]{
border-width: 0px;
border-style: solid;
padding: 0px;
padding-left: 0px;
padding-right: 0px;
min-width: 39px;
max-width: 39px;
min-height: 20px;
max-height: 20px;
background-image: url(:/AnyMeeting/Resources/btn_close_normal.png);
}
QWidget[objectName="close"]:hover{background-image:url(:/AnyMeeting/Resources/btn_close_highlight.png);}
QWidget[objectName="close"]:pressed{background-image: url(:/AnyMeeting/Resources/btn_close_down.png);}
QToolButton[objectName="skin"]{
border-width: 0px;
border-style: solid;
padding: 0px;
padding-left: 0px;
padding-right: 0px;
min-width: 27px;
max-width: 27px;
min-height: 20px;
max-height: 20px;
background-image: url(:/AnyMeeting/Resources/btn_skin_normal.png);
}
QWidget[objectName="skin"]:hover{background-image: url(:/AnyMeeting/Resources/btn_skin_highlight.png);}
QWidget[objectName="skin"]:pressed{background-image: url(:/AnyMeeting/Resources/btn_skin_down.png);}

2、功能菜单按钮同样是QToolButton

QToolButton[objectName="menusys"]{
font: 9pt "微软雅黑";
border-width: 0px;
border-style: solid;
min-height: 18px;
max-height: 18px;
color: gray;
}
QWidget[objectName="menusys"]:hover{color: rgb(0, 0, 255);}
QWidget[objectName="menusys"]:pressed{color: rgb(0, 0, 255);}
QToolButton[objectName="menulayout"]{
font: 9pt "微软雅黑";
border-width: 0px;
border-style: solid;
min-height: 18px;
max-height: 18px;
color: gray;
}
QWidget[objectName="menulayout"]:hover{color: rgb(0, 0, 255);}
QWidget[objectName="menulayout"]:pressed{;}
QToolButton[objectName="menusetting"]{
font: 9pt "微软雅黑";
border-width: 0px;
border-style: solid;
min-height: 18px;
max-height: 18px;
color: gray;
}
QWidget[objectName="menusetting"]:hover{color: rgb(0, 0, 255);}
QWidget[objectName="menusetting"]:pressed{;}
QToolButton[objectName="menuhelp"]{
font: 9pt "微软雅黑";
border-width: 0px;
border-style: solid;
min-height: 18px;
max-height: 18px;
color: gray;
}

3、logo 是QLabel

QWidget[objectName="menuhelp"]:hover{color: rgb(0, 0, 255);}
QWidget[objectName="menuhelp"]:pressed{;}

二、窗体部分

1、窗体左边部分是由一个Tab页面加载Listwidget组成，他们的风格可以设计如下

QWidget{font: 9pt "微软雅黑";}
QToolBox[objectName="peopleinfo"]::tab { 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); 
border-radius: 3px;background-color: rgb(246, 255, 251);}
QToolBox[objectName="peopleinfo"]::tab:selected {background:lightblue;font: italic; color: blue;}
QToolBox > QScrollArea > QWidget > QWidget{background-color: rgb(246, 255, 251);}
QListWidget[objectName="listpeople"] {show-decoration-selected: 1;background-color: rgb(255, 255, 255);}               QListWidget[objectName="listpeople"]::item{ min-height : 48; max-width = 177;}               QListWidget[objectName="listpeople"]::item:selected {background-color: rgb(252, 234, 166);color: rgb(0, 0, 0);}               QListWidget[objectName="listpeople"]::item:hover {background-color: rgb(194, 226, 248);}
QTabWidget::pane { /* The tab widget frame */     border-top: 1px solid #C2C7CB ; }
QTabWidget::tab-bar { left: 0px; /* move to the right by 5px */ }
QTabBar::tab {     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 0,
                                 stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
                                 stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
     border: 1px solid  #C2C7CB; /* same as the pane color */
     border-bottom-color: #C2C7CB; /* same as the pane color */
     border-top-left-radius: 2px;
     border-top-right-radius: 2px;
     min-width: 8ex;
     padding: 2px; }
QTabBar::tab:selected, QTabBar::tab:hover { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,                                 stop: 0 #fafafa, stop: 0.4 #f4f4f4,stop: 0.5 #e7e7e7, stop: 1.0 #fafafa); }
QTabBar::tab:selected {     border-color: #9B9B9B;     border-bottom-color: rgb(0, 0, 255); }
QTabBar::tab:!selected {    margin-top: 2px; }

2、边框拉伸的控件实际就是一个widget,只需要设置其最大最小长宽，然后加载图片即可

QWidget[objectName="lineright"]{
border: 1px solid  #C2C7CB;
border-left-color: #C2C7CB; 
border-right-color: #C2C7CB; 
border-top-color: rgb(255,255,255);
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}

三、状态栏部分

状态栏部分主要是QToolButton组成，只需设置每个每个按钮的风格是实体无边框就行，然后加载背景图片

border-width: 0px;
border-style: solid;

其他的Label只需设置一下颜色和字体就行了。

做一个好看的界面其实不难，只要用心就好，其实做其他事情都一样，认真就能成功！