Qt-统一样式爬的坑（参考统一样式的思路）

写在前面

嗯…在后后面项目经验中，这是一份已经落后的文档了。 因为如果在一开始就持有保持统一的思想跟良好的设计原则，这些问题并不会出现。但也是一份经验教训吧。

样式标准（参考）

统一标准： 字体全部设为微软雅黑，11号 按钮统一大小93,28. 对话框统一： 标题栏需添加自定义标题栏（自定义标题栏的接口会给出，可能如MAP_GUI_MainWindowTitleBar或MAP_GUI_CustomTitleBar）（参加下图例子）设置icon和标题，同时要设置无边框； 对话框要设置边界，样式同下图，把界面里定义的Frame添加到QSS（TotalQSS.qss）中,同时界面都添加该QSS文件着色。 用一个例子详细说明： 如我们需要一个对话框Dialog（绝大多数我们只需要QMainWindow和Qdialog），那这个ui文件的组织形式应如下同： 第一级是新建的QDialog: SE_NZ_Dialog 第二级是一个Qframe用来装要使用的控件，目的是统一最后的界面样式。 第三级包括一个Layout布局和一个TitleBarWidget（这个即上面说的自定义标题栏，先拖一个Widget到顶部，然后提升为自定义标题栏的类即可）。 所有界面设计放到Layout布局中即可。

成品图： 其中各部分的布局的样式如下： SE_NZ_Dialog的布局： QFrame的布局： 自己的Layout的布局：

此外大部分界面通用的底部按钮： 由于标题栏都是统一的自定义风格，所以还要针对这个进行一些设置（自定义标题栏这里就不展示了） 说完ui文件的操作流程，说说cpp里面的通用操作： ui->m_titleBar三个函数见自定义标题栏的接口，主要是调整样式跟设置icon，text。 然后还要额外设置FrameLess（这样才能使用自定义标题栏）。 由于设置了FrameLess的界面是不能伸缩大小的了，所以如有这个需求可在ui里面勾选一个属性： 所有需要用的样式设计（如颜色，大小调整，背景等），都通过同一个（或者同一类）qss文件进行调整，然后加载设置。QSS会给与一份较为完整的，需要调整什么控件在里面找即可，语法同CSS。 通用，必须的添加则有： 如上面例子，添加的控件即m_normalFrame, 第二级的Qframe。

最后，除了标准通用的模板，要做出一个好看的界面还是需要耐心一遍遍的调整：） 希望有了这个通用的框架，能帮助更好的开发出非常好看的界面^_^.

下面是附赠的一份QSS 汇总（CSDN的资源附带是枕芯坑…（审核通过了，附带传送门，免费的））

/**********按钮**********/
QPushButton{
        border-radius: 4px;
        border: none;
        height: 30px;
}
QPushButton:enabled {
        background: rgb(0, 86, 135);
        color: white;
}
QPushButton:!enabled {
        background: rgb(120, 120, 120);
        color: rgb(200, 200, 200);
}

QPushButton:enabled:hover{
        background: rgb(76, 141, 174);
}

QPushButton:enabled:pressed{
        background: rgb(0, 51, 113);
}

QPushButton#m_MainWindowPropertyShowPtn,  
QPushButton#m_MainWindowSelectionShowPtn, 
QPushButton#m_MainWindowStructureShowPtn,
QPushButton#m_MainWindowCalculateShowPtn,
QPushButton#m_MainWindowDesignShowPtn,
QPushButton#m_MainWindowTopCalculateShowPtn,
QPushButton#m_MainWindowResultShowPtn,
QPushButton#m_MainWindowChartShowPtn,
QPushButton#m_MainWindowGeometryPropertyShowPtn,
QPushButton#m_MainWindowPropertyHelpPtn,  
QPushButton#m_MainWindowSelectionHelpPtn, 
QPushButton#m_MainWindowStructureHelpPtn,
QPushButton#m_MainWindowCalculateHelpPtn,
QPushButton#m_MainWindowDesignHelpPtn,
QPushButton#m_MainWindowTopCalculateHelpPtn,
QPushButton#m_MainWindowResultHelpPtn,
QPushButton#m_MainWindowChartHelpPtn,
QPushButton#m_MainWindowGeometryPropertyHelpPtn,
QPushButton#m_MainWindowPropertySettingPtn,  
QPushButton#m_MainWindowSelectionSettingPtn, 
QPushButton#m_MainWindowStructureSettingPtn,
QPushButton#m_MainWindowCalculateSettingPtn,
QPushButton#m_MainWindowDesignSettingPtn,
QPushButton#m_MainWindowTopCalculateSettingPtn,
QPushButton#m_MainWindowResultSettingPtn,
QPushButton#m_MainWindowChartSettingPtn,
QPushButton#m_MainWindowGeometryPropertySettingPtn,
QPushButton#m_SubWindowPropertyHelpPtn,
QPushButton#m_SubWindowSelectionHelpPtn,
QPushButton#m_SubWindowStructureHelpPtn,
QPushButton#m_SubWindowWeightHelpPtn,
QPushButton#m_weightRecommendPtn,
QPushButton#m_CalculateBottomNodeHelpPtn,
QPushButton#m_CalculateTopCalculateHelpPtn,
QPushButton#m_CalculateResultHelpPtn,
QPushButton#m_SubWindowGeometryHelpPtn,
QPushButton#m_synthesizeRecommendPtn,
QPushButton#m_CalculateHighValueHelpPtn,
QPushButton#m_SubWindowPropertyShowPtn,
QPushButton#m_SubWindowSelectionShowPtn,
QPushButton#m_SubWindowStructureShowPtn,
QPushButton#m_SubWindowWeightShowPtn,
QPushButton#m_CalculateBottomNodeShowPtn,
QPushButton#m_CalculateTopCalculateShowPtn,
QPushButton#m_CalculateResultShowPtn,
QPushButton#m_SubWindowGeometryShowPtn,
QPushButton#m_CalculateHighValueShowPtn,
QPushButton#m_CalculateTopStandardValuePtn,
QPushButton#m_CalculateTopLevelValuePtn,
QPushButton#m_CalculateBottomValuePtn,
QPushButton#m_CalculateBottomNodeNamePtn,
QPushButton#m_CalculateTopADCShowPtn,
QPushButton#m_CalculateVagueShowPtn,
QPushButton#m_CalculateSEAShowPtn,
QPushButton#m_CalculateTopADCValuePtn,
QPushButton#m_CalculateVagueValuePtn,
QPushButton#m_CalculateVagueHelpPtn,
QPushButton#m_CalculateSEAHelpPtn,
QPushButton#m_CalculateTopStandardShowLevelsPtn,
QPushButton#m_CalculateTopShowLevelsPtn,
QPushButton#m_CalculateTopsisSortPtn,
QPushButton#m_CalculateTopADCHelpPtn,
QPushButton#m_ModelInputShowBtn,
QPushButton#m_LearningShowBtn,
QPushButton#m_ParameterBtn,
QPushButton#m_ModelOutputShowBtn,
QPushButton#m_TestChoiceShowBtn,
QPushButton#m_VARecommendPtn,
QPushButton#m_ModelSaveShowBtn,
QPushButton#m_SetMatrixDialogAddButton,
QPushButton#m_SetMatrixDialogDeleteButton
QPushButton#pushButton_filePath {
        min-width: 0px;  
        min-height: 0px;  
        background-color: transparent;
}

QPushButton#m_FilePathBtn {
        background: rgb(180, 180, 180);
        border-radius: 0px;
        border: 2px;
}
QPushButton#m_FilePathBtn:hover {
        background: rgb(220, 220, 220);
        border-top: 2px solid rgb(76, 141, 174);
        border-left: 2px solid rgb(76, 141, 174);
        border-right: 2px solid rgb(76, 141, 174);
        border-bottom: 2px solid rgb(76, 141, 174);
}
QPushButton#m_FilePathBtn:pressed {
        background: rgb(76, 141, 174);
}

QPushButton#modelPathPreBtn,
QPushButton#modelPathBtn {
        background: none;
}

QPushButton#modelPathPreBtn:enabled:hover,
QPushButton#modelPathBtn:enabled:hover {
        background: rgb(76, 141, 174);
}

QPushButton#modelPathPreBtn:enabled:pressed,
QPushButton#modelPathBtn:enabled:pressed {
        background: rgb(0, 51, 113);
}

QPushButton#m_FilePtn {
        color: white;
        background: rgb(43, 87, 154);
        height: 28px;
        min-width: 85px;
}
QPushButton#m_FilePtn::menu-indicator {
        image: none;
}
QPushButton#m_FilePtn:hover {
        background: rgb(51, 102, 153);
}
QPushButton#m_FilePtn:hover {
        background: rgb(0, 86, 135);
}

/**********工具按钮**********/
QToolButton  { 
        border: none;
        color: rgb(0, 0, 0);
        background: transparent; 
}

QToolButton:enabled:hover{
        background: rgb(76, 141, 174);
        color: white;
}

QToolButton:enabled:pressed{
        background: rgb(0, 86, 135);
        color: white;
}

/**********菜单栏**********/
QMenuBar {
        background: rgb(0, 86, 135);
        border: none;
}
QMenuBar::item {
        padding: 5px 10px 5px 10px;
        background: transparent;
}
QMenuBar::item:enabled {
        color: rgb(227, 234, 242);
}
QMenuBar::item:!enabled {
        color: rgb(155, 155, 155);
}
QMenuBar::item:enabled:selected {
        background: rgba(255, 255, 255, 40);
}

/**********文本编辑框**********/
QTextEdit {
        border-radius: 2px;
        height: 25px;
        border: 1px solid rgb(100, 100, 100);
}
QTextEdit:enabled {
        color: rgb(0, 0, 0);
}
QTextEdit:enabled:hover, QLineEdit:enabled:focus {
        color: rgb(0, 0, 0);
}
QTextEdit:!enabled {
        color: rgb(155, 155, 155);
}
/**********输入框**********/
QLineEdit {
        border-radius: 2px;
        height: 25px;
        color: black;
        border: 1px solid rgb(100, 100, 100);
}
QLineEdit:enabled:focus {
        color: rgb(0, 0, 0);
}
QLineEdit:!enabled {
        color: rgb(155, 155, 155);
}

/**********导航表格**********/
QTreeWidget{
        background-color:rgba(245, 245, 245);
        color: black;
        border: none;
}
QTreeWidget::Item:hover {
        background: rgb(51, 102, 153); 
        color: rgb(252, 252, 252);
}
QTreeWidget::item:selected {
        background: rgb(0, 86, 135);
        color: rgb(252, 252, 252);
}

/**********下拉列表**********/
QComboBox {
        height: 25px;
        border-radius: 4px;
        border: 1px solid rgb(100, 100, 100);
        color: rgb(0, 0, 0);
}
QComboBox::drop-down {
        width: 10px;
        border: none;
        background: rgba(0, 86, 135);
        border-radius:3px;
}
QComboBox::drop-down:hover {
        background: rgba(76, 141, 174);
}
QComboBox QAbstractItemView {
        border: 3px solid rgb(200, 200, 200);
        background: rgb(245, 247, 248);
        outline: none;
        color: rgb(0, 0, 0);
}
QComboBox QAbstractItemView::item {
        height: 25px;
        color: rgb(175, 175, 175);
}
QComboBox QAbstractItemView::item:selected {
        background: rgba(0, 86, 135);
        color: rgb(242, 242, 242);
}

/**********表格**********/
QTableWidget {
        border: 1px solid rgb(45, 45, 45);
        background: rgb(245, 245, 245);
        alternate-background-color: white;
}

QTableView {
        border: 1px solid rgb(45, 45, 45);
        background: rgb(245, 245, 245);
        alternate-background-color: white;
}

/**********表头**********/
QHeaderView{
        border-bottom: 1px solid rgb(45, 45, 45);
        background: rgb(235, 235, 235);
}

QHeaderView::section:horizontal {
        background: rgb(235, 235, 235);
        border-bottom: 1px solid rgb(45, 45, 45);
}

QHeaderView::section:vertical {
        background: rgb(235, 235, 235);
        border-bottom: 1px solid rgb(45, 45, 45);
}

/**********左上角按钮**********/
QTableCornerButton::section{
        background: rgba(235, 235, 235);
}

/**********菜单**********/
QMenu{
		background: rgb(236, 237, 238);
}
QMenu::item:enabled {
        color:rgb(0, 0, 0);
}
QMenu::item:!enabled {
		color: rgb(155, 155, 155);
}
QMenu::item:enabled:selected {
		color:rgb(255,255,255);
		background: rgb(76, 141, 174);
}

/**********对话框**********/
QDialog {
		background: rgb(245, 245, 247);
}


/**********浮动窗口**********/
QDockWidget>QWidget{
        background: rgb(236, 237, 238); 
}

/**********日记列表**********/
QListWidget {
	border:1px solid gray; color:black; 
}
QListWidget::Item {
	padding-top:-2px; padding-bottom:-1px;
}
/*QListWidget::Item:hover {
	background:skyblue;padding-top:0px; padding-bottom:0px; 
}
QListWidget::item:selected {
	background:yellow; color:red;
}
QListWidget::item:selected:!active {
	border-width:0px;background:lightGray;
}*/

/**********微调器**********/
/*QSpinBox {
        border-radius: 4px;
        background: rgb(252, 252, 252);
}
QSpinBox:enabled {
        color: rgb(252, 252, 252);
}
QSpinBox:enabled:hover, :enabled:focus {
        color: rgb(255, 255, 255);
}
QSpinBox:!enabled {
        color: rgb(65, 65, 65);
        background: transparent;
}
QSpinBox::up-button {
        width: 18px;
        height: 12px;
        border-top-right-radius: 4px;
        background: transparent;
        border-image: url(:/new/icon/icon/arrow up.png);
}
QSpinBox::up-button:!enabled {
        border-left: 1px solid gray;
        background: transparent;
}
QSpinBox::up-button:enabled:hover {
        background: rgb(76, 141, 174);
}
QSpinBox::down-button {
        width: 18px;
        height: 12px;
        border-bottom-right-radius: 4px;
        border-image: url(:/new/icon/icon/arrow down.png);
}
QSpinBox::down-button:!enabled {
        border-left: 1px solid gray;
        background: transparent;
}
QSpinBox::down-button:enabled:hover {
        background: rgb(76, 141, 174);
}*/

/**********主页面**********/
QMainWindow {
        background: rgb(225, 225, 225);
}

/**********主窗体**********/
QGraphicsView {
        background: rgb(200, 200, 200);
}

/**********状态栏**********/
QStatusBar {
        background: rgb(241, 241, 241);
}

/**********属性栏**********/
QFrame#m_SubWindowPropertyFrame,
QFrame#m_SubWindowSelectionFrame,
QFrame#m_SubWindowStructureFrame,
QFrame#m_SubWindowWeightFrame,
QFrame#m_SubWindowGeometryFrame,
QFrame#m_CalculateTopCalculateFrame,
QFrame#m_CalculateTopADCFrame,
QFrame#m_CalculateVagueFrame,
QFrame#m_CalculateSEAFrame,
QFrame#m_CalculateBottomNodeFrame,
QFrame#m_CalculateResultFrame,
QFrame#m_CalculateHighValueFrame,
QFrame#m_TestChoiceFrame,
QFrame#m_ParameterFrame,
QFrame#m_LearningFrame,
QFrame#m_ModelOutputFrame,
QFrame#m_ModelInputFrame,
QFrame#m_ModelSaveFrame {
         background: rgba(210, 210, 210);
}

QFrame#m_SubWindowProperty,
QFrame#m_SubWindowPropertyWidget,
QFrame#m_SubWindowSelectionWidget,
QFrame#m_SubWindowStructureWidget,
QFrame#m_SubWindowWeightWidget,
QFrame#m_SubWindowGeometryWidget,
QFrame#m_CalculatePropertyFrame,
QFrame#m_CalculateTopCalculateWidget,
QFrame#m_CalculateTopADCWidget,
QFrame#m_CalculateBottomNodeWidget,
QFrame#m_CalculateResultWidget,
QFrame#m_CalculateHighValueWidget,
QFrame#m_TestChoiceWidget,
QFrame#m_ParameterWidget,
QFrame#m_LearningWidget,
QFrame#m_ModelOutputWidget,
QFrame#m_ModelInputWidget,
QFrame#m_ModelSaveWidget {
         background: rgba(245, 245, 245);
}

/************普通Frame***********/
QFrame#SE_DLG_DatabaseWizardImport,
QFrame#SE_DLG_DatabaseWizardImportDataTable,
QFrame#SE_DLG_DatabaseWizardSetting,
QFrame#SE_DLG_ImportFromTXT_Step1,
QFrame#SE_DLG_ImportFromTXT_Step2,
QFrame#SE_DLG_ImportFromTXT_Step3,
QFrame#SE_DLG_MessageBoxFrame {
    border: 0.5px solid rgb(43, 57, 157);
    background: rgb(235, 235, 235);
}
/**********bannerPixmap**********/
QFrame#bannerPixmap2 {
        border: none;
        background: rgb(225, 225, 225);
}

QFrame#SQLFrame {
        background: rgb(240, 240, 240);
}

/********所有对话框的border设置*************/
QFrame#m_newProjectFrame,
QFrame#m_addDataBaseFrame,
QFrame#m_openDataBaseFrame,
QFrame#m_editDataBaseFrame,
QFrame#m_newDataTableFrame,
QFrame#m_editDataTableFrame,
QFrame#m_overViewFrame,
QFrame#m_AHPFrame,
QFrame#m_expertFrame,
QFrame#m_ChainFrame,
QFrame#m_CriticFrame,
QFrame#m_SubObjectiveFrame,
QFrame#m_normalFrame,
QFrame#m_levelSettingFrame,
QFrame#m_ppFrame,
QFrame#m_matrixFrame,
QFrame#m_recommendManageFrame,
QFrame#m_recommendPrePocessFrame,
QFrame#m_subjectiveFrame,
QFrame#m_linearInterFrame,
QFrame#m_vagueFrame,
QFrame#m_standardLevelFrame,
QFrame#m_powerFrame,
QFrame#m_ADCFrame,
QFrame#m_distributionPlotFrame,
QFrame#m_nodeViewConfigFrame,
QFrame#m_reportFrame,
QFrame#m_ganttFrame {
        border-left: 2px solid rgb(43, 57, 157);
        border-right: 2px solid rgb(43, 57, 157);
        border-bottom: 2px solid rgb(43, 57, 157);
        background: rgb(236, 237, 238);   
}

/**********弹出对话框*********/
QFrame#bottomFrame {
        border: none;
        background: rgb(225, 225, 225);
}

/**********进度条**********/
/*QProgressBar::chunk {
        color: rgb(255, 255, 255);
        background: rgb(30, 144, 255);
}*/

/**********页签项**********/
QTabWidget::pane {
        border: none;
        background: rgb(236, 237, 238);
}
QTabWidget::tab-bar {
        border: none;
}
QFrame#m_RibbornBar {
        border: none;
        background: rgb(43, 87, 154);
        height: 10px;
}
QTabBar#m_RibbornTab::tab {
        border: none;
        color: white;
        background: rgb(43, 87, 154);
        height: 28px;
        min-width: 75px;
        padding-left: 5px;
        padding-right: 5px;}
        QTabBar#m_RibbornTab::tab:hover {background: rgb(51, 102, 153);}
        QTabBar#m_RibbornTab::tab:selected {color:rgb(43, 87, 154);
        background: rgb(225, 225, 225);
}

/*********抽象模板********/
QAbstractItemView::item {
        height: 25px;
        color: rgb(0, 0, 0);
}
QAbstractItemView::item!enabled {
        height: 25px;
        color: rgb(175, 175, 175);
}

/**********工具栏********/
QToolBar {
         spacing: 10px;
}
QToolBar::separator
{
         background: rgb(200, 200, 200);
         width: 2px;
}
QToolButton[popupMode="1"] {
    padding-right: 2px;
}

/**********表格**********/
QTableWidget {
        border: 1px solid rgb(45, 45, 45);
        background: rgb(245, 245, 245);
        alternate-background-color: white;
}