给窗口设置一个外框
//包含头文件
#include <QGroupBox>
//内容窗口+内容布器
//和box窗口+布局器
//主窗口的+布局器
QGroupBox* m_box = new QGroupBox;
QHBoxLayout *boxLaout = new QHBoxLayout(m_box);
boxLaout->setSpacing(0);
boxLaout->setContentsMargins(0,0,0,0);
boxLaout->addWidget(allSpiliter);
QVBoxLayout * allLayout = new QVBoxLayout;
allLayout->addWidget(m_box);
allLayout->setSpacing(0);
allLayout->setContentsMargins(0,0,0,0);
this->setLayout(allLayout);
//②设置外框
m_box->setStyleSheet("QGroupBox { "
"border: 2px solid rgb(204,204,204); "
"border-color: #CCCCCC; "
"margin-top: 0px; "
"font-size: 14px; "
"border-top-left-radius: 2px; "
"border-top-right-radius: 2px; "
"border-bottom-left-radius: 2px; "
"border-bottom-right-radius: 2px;}");
第二种方式
m_menuWidget->setObjectName("widgetMain");
m_menuWidget->setStyleSheet("QWidget#widgetMain{border: 1px solid #000000; border-radius: 5px;}");
//绿色为#4DC86F
//黑色为:#000000
去除边框
m_fileTreeView->setStyleSheet("border:none");
将按钮设置地更圆润+设置颜色
//①包含库和FlatUI类的头文件
#include "ui/flatui.h"
//②给对应的按钮设置颜色
FlatUI::Instance()->setPushButtonQss(m_hideBotton, 3, 3, "#1ABC9C", "#E6F8F5", "#2EE1C1", "#FFFFFF", "#16A086", "#A7EEE6");//设置按钮颜色为绿色
FlatUI::Instance()->setPushButtonQss(m_styleBarBtn, 1, 4, "#1ABC9C", "#E6F8F5", "#2EE1C1", "#FFFFFF", "#16A086", "#A7EEE6");//设置为绿色,不设置圆润
FlatUI::Instance()->setPushButtonQss(m_TBotton, 3, 3, "#3498DB", "#FFFFFF", "#5DACE4", "#E5FEFF", "#2483C7", "#A0DAFB");//设置按钮颜色为蓝色
增加小竖线
uplayout->addWidget(new Utils::StyledSeparator);
表格的美化
//表格美化
m_fileTableView->setAlternatingRowColors(true);
QString strStyleSheet = "QHeaderView::section, QTableCornerButton::section {\
padding: 1px;\
border: none;\
border-bottom: 1px solid rgb(160, 160, 160);\
border-right: 1px solid rgb(160, 160, 160);\
border-bottom: 1px solid gray;\
background-color: qlineargradient(spread:reflect, \
x1:0, y1:0, x2:0, y2:1, \
stop:0 rgba(255, 255, 255, 255), \
stop:1 rgba(164, 164, 164, 255));\
}\
QTableView{background-color: rgb(230, 240, 250);"
"alternate-background-color: rgb(255, 255, 255);}";
QString nvscroll = "QScrollBar:vertical{" //垂直滑块整体
"background:#FFFFFF;" //背景色
"padding-top:20px;" //上预留位置(放置向上箭头)
"padding-bottom:20px;" //下预留位置(放置向下箭头)
"padding-left:1px;" //左预留位置(美观)
"padding-right:1px;" //右预留位置(美观)
"border-left:1px solid #d7d7d7;}"//左分割线
"QScrollBar::handle:vertical{"//滑块样式
"background:#dbdbdb;" //滑块颜色
"border-radius:1px;" //边角圆润
"min-height:80px;}" //滑块最小高度
"QScrollBar::handle:vertical:hover{"//鼠标触及滑块样式
"background:#d0d0d0;}" //滑块颜色
"QScrollBar::add-line:vertical{"//向下箭头样式
"background:url(:/core/images/darkarrowdown.png) center no-repeat;}"
"QScrollBar::sub-line:vertical{"//向上箭头样式
"background:url(:/core/images/darkarrowup.png) center no-repeat;}";
QString strhvar = "QScrollBar:horizontal{"
"background:#FFFFFF;"
"padding-top:1px;"
"padding-bottom:1px;"
"padding-left:10px;"
"padding-right:10px;}"
"QScrollBar::handle:horizontal{"
"background:#dbdbdb;"
"border-radius:1px;"
"min-width:80px;}"
"QScrollBar::handle:horizontal:hover{"
"background:#d0d0d0;}"
"QScrollBar::add-line:horizontal{"
"background:url("") center no-repeat;}"
"QScrollBar::sub-line:horizontal{"
"background:url("") center no-repeat;}";
QString tableStyle = "\
QTableView QTableCornerButton::section { \
/* background: red; \
border: 2px outset red;*/ \
color: red; \
background-color: rgb(64, 64, 64); \
border: 5px solid #f6f7fa; \
border-radius:0px; \
border-color: rgb(64, 64, 64); \
} \
\
QTableView { \
color: black; /*表格内文字颜色*/ \
gridline-color: black; /*表格内框颜色*/ \
background-color: rgb(242, 242, 242); /*表格内背景色*/ \
alternate-background-color: rgb(237, 237, 237); \
selection-color: white; /*选中区域的文字颜色*/ \
selection-background-color: rgb(204, 204, 204); /*选中区域的背景色*/ \
border: 0px groove rgb(204, 204, 204); \
border-radius: 0px; \
padding: 0px 0px; \
min-height:25px; \
} \
\
QHeaderView { \
color: #f6f7fa; \
font: bold 10pt; \
background-color: #f6f7fa; \
border:0px solid rgb(204,204,204); \
border-left-color: rgba(255, 255, 255, 0); \
border-top-color: rgba(255, 255, 255, 0); \
border-radius:0px; \
min-height:26px; \
} \
\
QHeaderView::section { \
color: white; \
background-color: rgb(102, 102, 102); \
border: 0px solid #f6f7fa; \
border-radius:0px; \
border-color: rgb(255, 255, 255); \
} ";
m_fileTableView->horizontalScrollBar()->setStyleSheet(strhvar);
m_fileTableView->verticalScrollBar()->setStyleSheet(nvscroll);
m_fileTableView->setStyleSheet(tableStyle);
m_fileTableView->setSelectionBehavior(QAbstractItemView::SelectRows);
m_fileTableView->verticalHeader()->setVisible(false);
m_fileTableView->setShowGrid(false);
m_fileTableView->horizontalHeader()->setStretchLastSection(true);
树表的美化
//--表格美化
m_fileTableView->setAlternatingRowColors(true);
QString strStyleSheet = "QHeaderView::section, QTableCornerButton::section {\
padding: 1px;\
border: none;\
border-bottom: 1px solid rgb(160, 160, 160);\
border-right: 1px solid rgb(160, 160, 160);\
border-bottom: 1px solid gray;\
background-color: qlineargradient(spread:reflect, \
x1:0, y1:0, x2:0, y2:1, \
stop:0 rgba(255, 255, 255, 255), \
stop:1 rgba(164, 164, 164, 255));\
}\
QTableView{background-color: rgb(230, 240, 250);"
"alternate-background-color: rgb(255, 255, 255);}";
QString nvscroll = "QScrollBar:vertical{" //垂直滑块整体
"background:#FFFFFF;" //背景色
"padding-top:20px;" //上预留位置(放置向上箭头)
"padding-bottom:20px;" //下预留位置(放置向下箭头)
"padding-left:1px;" //左预留位置(美观)
"padding-right:1px;" //右预留位置(美观)
"border-left:1px solid #d7d7d7;}"//左分割线
"QScrollBar::handle:vertical{"//滑块样式
"background:#dbdbdb;" //滑块颜色
"border-radius:1px;" //边角圆润
"min-height:80px;}" //滑块最小高度
"QScrollBar::handle:vertical:hover{"//鼠标触及滑块样式
"background:#d0d0d0;}" //滑块颜色
"QScrollBar::add-line:vertical{"//向下箭头样式
"background:url(:/core/images/darkarrowdown.png) center no-repeat;}"
"QScrollBar::sub-line:vertical{"//向上箭头样式
"background:url(:/core/images/darkarrowup.png) center no-repeat;}";
QString strhvar = "QScrollBar:horizontal{"
"background:#FFFFFF;"
"padding-top:1px;"
"padding-bottom:1px;"
"padding-left:10px;"
"padding-right:10px;}"
"QScrollBar::handle:horizontal{"
"background:#dbdbdb;"
"border-radius:1px;"
"min-width:80px;}"
"QScrollBar::handle:horizontal:hover{"
"background:#d0d0d0;}"
"QScrollBar::add-line:horizontal{"
"background:url("") center no-repeat;}"
"QScrollBar::sub-line:horizontal{"
"background:url("") center no-repeat;}";
QString tableStyle = "\
QTableView QTableCornerButton::section { \
/* background: red; \
border: 2px outset red;*/ \
color: red; \
background-color: rgb(64, 64, 64); \
border: 5px solid #f6f7fa; \
border-radius:0px; \
border-color: rgb(64, 64, 64); \
} \
\
QTableView { \
color: black; /*表格内文字颜色*/ \
gridline-color: black; /*表格内框颜色*/ \
background-color: rgb(242, 242, 242); /*表格内背景色*/ \
alternate-background-color: rgb(237, 237, 237); \
selection-color: white; /*选中区域的文字颜色*/ \
selection-background-color: rgb(204, 204, 204); /*选中区域的背景色*/ \
border: 0px groove rgb(204, 204, 204); \
border-radius: 0px; \
padding: 0px 0px; \
min-height:25px; \
} \
\
QHeaderView { \
color: #f6f7fa; \
font: bold 10pt; \
background-color: #f6f7fa; \
border:0px solid rgb(204,204,204); \
border-left-color: rgba(255, 255, 255, 0); \
border-top-color: rgba(255, 255, 255, 0); \
border-radius:0px; \
min-height:26px; \
} \
\
QHeaderView::section { \
color: white; \
background-color: rgb(102, 102, 102); \
border: 0px solid #f6f7fa; \
border-radius:0px; \
border-color: rgb(255, 255, 255); \
} ";
m_fileTableView->horizontalScrollBar()->setStyleSheet(strhvar);
m_fileTableView->verticalScrollBar()->setStyleSheet(nvscroll);
m_fileTableView->setStyleSheet(tableStyle);
m_fileTableView->setSelectionBehavior(QAbstractItemView::SelectRows);
m_fileTableView->verticalHeader()->setVisible(false);
m_fileTableView->setShowGrid(false);
m_fileTableView->horizontalHeader()->setStretchLastSection(true);
//表格美化部分结束
ui美化文件————————————————
flatui.h
#ifndef FLATUI_H
#define FLATUI_H
/**
* FlatUI辅助类 作者:feiyangqingyun(QQ:517216493) 2016-12-16
* 1:按钮样式设置
* 2:文本框样式设置
* 3:进度条样式
* 4:滑块条样式
* 5:单选框样式
* 6:滚动条样式
* 7:可自由设置对象的高度宽度大小等
* 8:自带默认参数值
*/
#include <QObject>
#include <QMutex>
class QPushButton;
class QLineEdit;
class QProgressBar;
class QSlider;
class QRadioButton;
class QCheckBox;
class QScrollBar;
class QComboBox;
class FlatUI : public QObject
{
Q_OBJECT
public:
explicit FlatUI(QObject *parent = 0);
static FlatUI *Instance()
{
static QMutex mutex;
if (!self) {
QMutexLocker locker(&mutex);
if (!self) {
self = new FlatUI;
}
}
return self;
}
private:
static FlatUI *self;
public:
//设置按钮样式
void setPushButtonQss(QPushButton *btn, //按钮对象
int radius = 5, //圆角半径
int padding = 8, //间距
const QString &normalColor = "#34495E", //正常颜色
const QString &normalTextColor = "#FFFFFF", //文字颜色
const QString &hoverColor = "#4E6D8C", //悬停颜色
const QString &hoverTextColor = "#F0F0F0", //悬停文字颜色
const QString &pressedColor = "#2D3E50", //按下颜色
const QString &pressedTextColor = "#B8C6D1"); //按下文字颜色
//设置文本框样式
void setLineEditQss(QLineEdit *txt, //文本框对象
int radius = 3, //圆角半径
int borderWidth = 2, //边框大小
const QString &normalColor = "#DCE4EC", //正常颜色
const QString &focusColor = "#34495E"); //选中颜色
//设置进度条样式
void setProgressBarQss(QProgressBar *bar,
int barHeight = 8, //进度条高度
int barRadius = 5, //进度条半径
int fontSize = 9, //文字字号
const QString &normalColor = "#E8EDF2", //正常颜色
const QString &chunkColor = "#E74C3C"); //进度颜色
//设置滑块条样式
void setSliderQss(QSlider *slider, //滑动条对象
int sliderHeight = 8, //滑动条高度
const QString &normalColor = "#E8EDF2", //正常颜色
const QString &grooveColor = "#1ABC9C", //滑块颜色
const QString &handleColor = "#1ABC9C"); //指示器颜色
//设置单选框样式
void setRadioButtonQss(QRadioButton *rbtn, //单选框对象
int indicatorRadius = 8, //指示器圆角角度
const QString &normalColor = "#D7DBDE", //正常颜色
const QString &checkColor = "#34495E"); //选中颜色
//设置滚动条样式
void setScrollBarQss(QScrollBar *scroll, //滚动条对象
int radius = 6, //圆角角度
int min = 120, //指示器最小长度
int max = 12, //滚动条最大长度
const QString &bgColor = "#606060", //背景色
const QString &handleNormalColor = "#34495E", //指示器正常颜色
const QString &handleHoverColor = "#1ABC9C", //指示器悬停颜色
const QString &handlePressedColor = "#E74C3C");//指示器按下颜色
void setComboBoxQss(QComboBox *combox);
};
#endif // FLATUI_H
#include "flatui.h"
#include "qpushbutton.h"
#include "qlineedit.h"
#include "qprogressbar.h"
#include "qslider.h"
#include "qradiobutton.h"
#include "qcheckbox.h"
#include "qscrollbar.h"
#include "qdebug.h"
#include <QComboBox>
FlatUI *FlatUI::self = 0;
FlatUI::FlatUI(QObject *parent) : QObject(parent)
{
}
void FlatUI::setPushButtonQss(QPushButton *btn, int radius, int padding,
const QString &normalColor, const QString &normalTextColor,
const QString &hoverColor, const QString &hoverTextColor,
const QString &pressedColor, const QString &pressedTextColor)
{
QStringList qss;
qss.append(QString("QPushButton{border-style:none;padding:%1px;border-radius:%2px;color:%3;background:%4;}")
.arg(padding).arg(radius).arg(normalTextColor).arg(normalColor));
qss.append(QString("QPushButton:hover{color:%1;background:%2;}")
.arg(hoverTextColor).arg(hoverColor));
qss.append(QString("QPushButton:pressed{color:%1;background:%2;}")
.arg(pressedTextColor).arg(pressedColor));
btn->setStyleSheet(qss.join(""));
}
void FlatUI::setLineEditQss(QLineEdit *txt, int radius, int borderWidth,
const QString &normalColor, const QString &focusColor)
{
QStringList qss;
qss.append(QString("QLineEdit{border-style:none;padding:1px;border-radius:%1px;border:%2px solid %3;}")
.arg(radius).arg(borderWidth).arg(normalColor));
qss.append(QString("QLineEdit:focus{border:%1px solid %2;}")
.arg(borderWidth).arg(focusColor));
txt->setStyleSheet(qss.join(""));
}
void FlatUI::setProgressBarQss(QProgressBar *bar, int barHeight, int barRadius, int fontSize,
const QString &normalColor, const QString &chunkColor)
{
QStringList qss;
qss.append(QString("QProgressBar{font:%1pt;background:%2;max-height:%3px;border-radius:%4px;text-align:center;border:1px solid %2;}")
.arg(fontSize).arg(normalColor).arg(barHeight).arg(barRadius));
qss.append(QString("QProgressBar:chunk{border-radius:%2px;background-color:%1;}")
.arg(chunkColor).arg(barRadius));
bar->setStyleSheet(qss.join(""));
}
void FlatUI::setSliderQss(QSlider *slider, int sliderHeight,
const QString &normalColor, const QString &grooveColor,
const QString &handleColor)
{
int sliderRadius = sliderHeight / 2;
int handleWidth = (sliderHeight * 3) / 2 + (sliderHeight / 5);
int handleRadius = handleWidth / 2;
int handleOffset = handleRadius / 2;
QStringList qss;
qss.append(QString("QSlider::groove:horizontal{background:%1;height:%2px;border-radius:%3px;}")
.arg(normalColor).arg(sliderHeight).arg(sliderRadius));
qss.append(QString("QSlider::add-page:horizontal{background:%1;height:%2px;border-radius:%3px;}")
.arg(normalColor).arg(sliderHeight).arg(sliderRadius));
qss.append(QString("QSlider::sub-page:horizontal{background:%1;height:%2px;border-radius:%3px;}")
.arg(grooveColor).arg(sliderHeight).arg(sliderRadius));
qss.append(QString("QSlider::handle:horizontal{width:%2px;margin-top:-%3px;margin-bottom:-%3px;border-radius:%4px;"
"background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5,stop:0.6 #FFFFFF,stop:0.8 %1);}")
.arg(handleColor).arg(handleWidth).arg(handleOffset).arg(handleRadius));
//偏移一个像素
handleWidth = handleWidth + 1;
qss.append(QString("QSlider::groove:vertical{width:%2px;border-radius:%3px;background:%1;}")
.arg(normalColor).arg(sliderHeight).arg(sliderRadius));
qss.append(QString("QSlider::add-page:vertical{width:%2px;border-radius:%3px;background:%1;}")
.arg(grooveColor).arg(sliderHeight).arg(sliderRadius));
qss.append(QString("QSlider::sub-page:vertical{width:%2px;border-radius:%3px;background:%1;}")
.arg(normalColor).arg(sliderHeight).arg(sliderRadius));
qss.append(QString("QSlider::handle:vertical{height:%2px;margin-left:-%3px;margin-right:-%3px;border-radius:%4px;"
"background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5,stop:0.6 #FFFFFF,stop:0.8 %1);}")
.arg(handleColor).arg(handleWidth).arg(handleOffset).arg(handleRadius));
slider->setStyleSheet(qss.join(""));
}
void FlatUI::setRadioButtonQss(QRadioButton *rbtn, int indicatorRadius,
const QString &normalColor, const QString &checkColor)
{
int indicatorWidth = indicatorRadius * 2;
QStringList qss;
qss.append(QString("QRadioButton::indicator{border-radius:%1px;width:%2px;height:%2px;}")
.arg(indicatorRadius).arg(indicatorWidth));
qss.append(QString("QRadioButton::indicator::unchecked{background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5,"
"stop:0.6 #FFFFFF,stop:0.7 %1);}").arg(normalColor));
qss.append(QString("QRadioButton::indicator::checked{background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5,"
"stop:0 %1,stop:0.3 %1,stop:0.4 #FFFFFF,stop:0.6 #FFFFFF,stop:0.7 %1);}").arg(checkColor));
rbtn->setStyleSheet(qss.join(""));
}
void FlatUI::setScrollBarQss(QScrollBar *scroll, int radius, int min, int max,
const QString &bgColor, const QString &handleNormalColor,
const QString &handleHoverColor, const QString &handlePressedColor)
{
//滚动条离背景间隔
int padding = 0;
QStringList qss;
//handle:指示器,滚动条拉动部分 add-page:滚动条拉动时增加的部分 sub-page:滚动条拉动时减少的部分 add-line:递增按钮 sub-line:递减按钮
//横向滚动条部分
qss.append(QString("QScrollBar:horizontal{background:%1;padding:%2px;border-radius:%3px;max-height:%4px;}")
.arg(bgColor).arg(padding).arg(radius).arg(max));
qss.append(QString("QScrollBar::handle:horizontal{background:%1;min-width:%2px;border-radius:%3px;}")
.arg(handleNormalColor).arg(min).arg(radius));
qss.append(QString("QScrollBar::handle:horizontal:hover{background:%1;}")
.arg(handleHoverColor));
qss.append(QString("QScrollBar::handle:horizontal:pressed{background:%1;}")
.arg(handlePressedColor));
qss.append(QString("QScrollBar::add-page:horizontal{background:none;}"));
qss.append(QString("QScrollBar::sub-page:horizontal{background:none;}"));
qss.append(QString("QScrollBar::add-line:horizontal{background:none;}"));
qss.append(QString("QScrollBar::sub-line:horizontal{background:none;}"));
//纵向滚动条部分
qss.append(QString("QScrollBar:vertical{background:%1;padding:%2px;border-radius:%3px;max-width:%4px;}")
.arg(bgColor).arg(padding).arg(radius).arg(max));
qss.append(QString("QScrollBar::handle:vertical{background:%1;min-height:%2px;border-radius:%3px;}")
.arg(handleNormalColor).arg(min).arg(radius));
qss.append(QString("QScrollBar::handle:vertical:hover{background:%1;}")
.arg(handleHoverColor));
qss.append(QString("QScrollBar::handle:vertical:pressed{background:%1;}")
.arg(handlePressedColor));
qss.append(QString("QScrollBar::add-page:vertical{background:none;}"));
qss.append(QString("QScrollBar::sub-page:vertical{background:none;}"));
qss.append(QString("QScrollBar::add-line:vertical{background:none;}"));
qss.append(QString("QScrollBar::sub-line:vertical{background:none;}"));
scroll->setStyleSheet(qss.join(""));
}
void FlatUI::setComboBoxQss(QComboBox *combox)
{
// QString strstyle =
// "QComboBox:hover{color:#FFFFFF;background:#2EE1C1;}"
// "QComboBox {combobox-popup: 0;}"
// "QComboBox{border:0px solid gray;padding:2px;border-radius:2px;background: #1ABC9C;font:15px;color:#FFFFFF;height: 15px;}"
// "QComboBox:editable{background:#ffffff;}"
// "QComboBox QAbstractItemView{border: 0px;outline:0px;selection-background-color: rgb(225,221,231);height:100px;background: rgb(243, 244, 245);font:22px;color:rgb(127,141,154);}"
// "QComboBox QAbstractItemView::item{height:50px;width:200px;}"
// "QComboBox QAbstractItemView::item:selected{background-color: rgb(255,255,255);}"
// "QComboBox::down-arrow{image:url(:/Resources/darkarrowdown.png);}"
// "QComboBox::drop-down{border:0px;}";
QString strstyle =
"QComboBox:hover{color:#FFFFFF;background:#2EE1C1;}"
"QComboBox {combobox-popup: 0;}"
"QComboBox{border:0px solid gray;padding:2px;border-radius:2px;background: #1ABC9C;color:#FFFFFF;height: 15px;}"
"QComboBox:editable{background:#ffffff;}"
"QComboBox QAbstractItemView{border: 0px;outline:0px;selection-background-color: rgb(225,221,231);height:100px;background: rgb(243, 244, 245);font:22px;color:rgb(127,141,154);}"
"QComboBox QAbstractItemView::item{height:50px;width:200px;}"
"QComboBox QAbstractItemView::item:selected{background-color: rgb(255,255,255);}"
"QComboBox::down-arrow{image:url(:/figureSet/Resources/darkarrowdown.png);}"
"QComboBox::drop-down{border:0px;}";
combox->setStyleSheet(strstyle);
}
QCombox美化
versionCombox->setStyleSheet("\
QComboBox::drop-down{subcontrol-origin: padding;subcontrol-position:top right;\
width:25px;border-left-width:0px;\
border-left-color:darkgray;\
border-left-style:solid;\
border-top-right-radius:3px;\
border-bottom-right-radius:3px;}\
QComboBox::down-arrow{image:url(:/PluginProtocolDB/META-INF/Resources/darkarrowdown.png);}\
");
【注:】
对Qt开发感兴趣的也可以观看我的文章:《一个 QT 程序带你入门图形界面开发》