1.3 QT界面美化
文章目录
- 给窗口设置一个外框
- 去除边框
- 将按钮设置地更圆润+设置颜色
- 增加小竖线
- 表格的美化
- 树表的美化
- ui美化文件————————————————
- 【注：】
给窗口设置一个外框
//包含头文件
#include 第二种方式
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 #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 【注：】
对Qt开发感兴趣的也可以观看我的文章：《一个 QT 程序带你入门图形界面开发》