1、效果如下
2、源码
2.1 widget.cpp
#include "widget.h"
#include <QApplication>
/*
**QSS常用属性
** 4.1 字体
大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD
样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)
行高 {line-height: normal;}(正常) 单位：PX、PD、EM
粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常)
变体 {font-variant: small-caps;}(小型大写字母) normal
大小写 {text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)
修饰 {text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
字体名：
微软雅黑：
Microsoft YaHei
宋体：SimSun
黑体：SimHei
仿宋： FangSong
楷体： KaiTi
隶书：LiSu
幼圆：YouYuan
华文细黑：STXihei
华文楷体：STKaiti
华文宋体：STSong
华文中宋：STZhongsong
华文仿宋：STFangsong
方正舒体：FZShuTi
方正姚体：FZYaoti
华文彩云：STCaiyun
华文琥珀：STHupo
华文隶书：STLiti
华文行楷：STXingkai
华文新魏：STXinwei
举例：
{font: 16px;font-family: SimSun}// 字体:大小 名称
4.2 颜色
17种标准色：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,olive, orange, purple, red, silver, teal, white, yellow
colo:rgb(255,255,255);
color: #F5F5F5; // 前景(文本)颜色
color: qlineargradient(); // 前景(文本)颜色:线性渐变
color: qradialgradient(); // 前景(文本)颜色:辐射渐变
color: qconicalgradient(); // 前景(文本)颜色:梯形渐变
4.3 外边距
margin: 14px 18px 20px 18px; //外边距 顺序上右下左
margin-top: 14px;
margin-right: 18px;
margin-bottom: 20px;
margin-left: 18px;
4.4 边框
border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;
border-width:; 边框宽度
border-color:#;
简写方法border：width style color; //简写
border: 1px solid #FDBC03; // 边框:宽度 颜色
border-image:url(boder.png) 4 8 12 16; //边界图 切线
border-radius: 4px; //角弧度
border-top-left-radius: ; //角弧度:左上角
border-top-right-radius: ; //角弧度:右上角
border-bottom-left-radius: ; //角弧度:左下角
border-bottom-right-radius: ; //角弧度:右下角
4.5 内边距
padding: 4px; //文字边距
padding-left: 5px; //文字左边距
padding-right: 10px; //文字右边距
padding-top: 3px; //文字顶边距
padding-bottom: 3px; //文字底边距
4.6 宽高
width:12px; //设置宽度 单位像素
height:40px //设置高度
min-width:65px; //最小宽度 设置width无效可以尝试设置min-width
min-height:12px; //最小高度
max-width:12px;
max-height:12px;
五：QSS伪状态与子控件
伪状态列表
:checked //button部件被选中
:unchecked //button部件未被选中
:disabled //部件被禁用
:enabled //部件被启用
:focus //部件获得焦点
:hover //鼠标位于部件上
:indeterminate //checkbox或radiobutton被部分选中
:off //部件可以切换，且处于off状态
:on //部件可以切换，且处于on状态
:pressed //部件被鼠标按下
子部件列表
::down-arrow //combo box或spin box的下拉箭头
::drop-down //combo box的下拉箭头
::indicator //checkbox、radio button或可选择group box的指示器
::item //menu、menu bar或status bar的子项目
::menu-indicator //push button的菜单指示器
::title //group box的标题
::down-button //spin box的向下按钮
::up-arrow //spin box的向上箭头
::up-button //spin box的向上按钮
* 1、可以针对整个窗体或者某个子类或者某个部件
* qApp->setStyleSheet("QLineEdit { background-color: yellow }");
* myDialog->setStyleSheet("QLineEdit { background-color: yellow }");
* myDialog->setStyleSheet("QLineEdit#nameEdit { background-color: yellow }");
* lineEdit3->setStyleSheet(qssList.at(2));//单独都某个lineEdit设置
*/
//转义符 " --> \"
Widget::Widget(QWidget *parent)
: QWidget(parent)
{
initform();
this->resize(900,800);
}
Widget::~Widget()
{
}
void Widget::initform()
{
//1、方式1，针对整个窗体
// qApp->setStyleSheet("QLineEdit{background-color:yellow}");//整个app QLineEdit背景色为黄色;
QWidget *widget1 = new QWidget(this);
//2、方式2，针对某个子类
// widget1->setStyleSheet("QLineEdit{color:blue;background-color:red}");
ledit1 = new QLineEdit(widget1);
ledit1->setMinimumWidth(500);
//3、方式3，针对某个部件
ledit1->setStyleSheet("QLineEdit{color: blue;background-color: red}");
ledit1->setText("ledit1->setStyleSheet(\"QLineEdit{color:blue;background-color:red}\")");
ledit2 = new QLineEdit(widget1);
ledit2->setMinimumWidth(500);
ledit2->setStyleSheet("QLineEdit{color:red;background-color: green}");
ledit2->setText("ledit2->setStyleSheet(\"QLineEdit{color:red;background-color:green}\")");
//4、方式4，组合拳
ledit3 = new QLineEdit(widget1);
ledit3->setObjectName("ledit_3");
ledit3->setMinimumWidth(500);
ledit3->setText("1234567890");
ledit3->setStyleSheet("color: blue;"
"background-color: yellow;"
"selection-color: red;"
"selection-background-color: blue;");
//5、针对部件objName即ID，每一个均可以设置
ledit4 = new QLineEdit(widget1);
ledit4->setObjectName("ledit_4");
ledit4->setText("0987654321");
this->setStyleSheet("#ledit_3{color: blue;background-color: red}"
"#ledit_4{color: blue;background-color: red}");
QVBoxLayout *verticalLayout_0 = new QVBoxLayout(widget1);
verticalLayout_0->addWidget(ledit1);
verticalLayout_0->addWidget(ledit2);
verticalLayout_0->addWidget(ledit3);
verticalLayout_0->addWidget(ledit4);
//6、基本颜色
QString color1="black";
QString color2="white";
QStringList standcolor;
standcolor<<"aqua";standcolor<<"black";standcolor<<"blue";standcolor<<"fuchsia";standcolor<<"gray";standcolor<<"green";
standcolor<<"lime";standcolor<<"maroon";standcolor<<"navy";standcolor<<"olive";standcolor<<"orange";standcolor<<"purple";
standcolor<<"red";standcolor<<"silver";standcolor<<"teal";standcolor<<"white";standcolor<<"yellow";
QWidget *widget2 = new QWidget(this);
QGridLayout *gridLayout = new QGridLayout(widget2);
for(uint8_t i=0;i<17;i++)
{
QLabel *lab = new QLabel(standcolor.at(i));
lab->setStyleSheet(QString("QLabel{color: %1;background-color: %2;font-weight:bold}").arg(color1).arg(standcolor.at(i)));
lab->setAlignment(Qt::AlignCenter);
gridLayout->addWidget(lab,i/6,i%6,1,1);
}
//线性渐变
QLabel *lab_Linear = new QLabel("线性渐变{color: qlineargradient(x1:0,y1:0,x2:1,y2:0 ,stop:0 red,stop:1 green)}");
lab_Linear->setStyleSheet("QLabel{background-color: qlineargradient(x1:0,y1:0,x2:1,y2:0 ,stop:0 red,stop:1 green);font-weight:bold;}");
//辐射渐变
//以圆心为中心显示渐变。(cx, cy)是中点，半径(radius)是以中点为圆心的圆的半径，(fx, fy)是渐变的起点。
QLabel *lab_qradialgradient = new QLabel("辐射渐变{color: qradialgradient(...)}");
lab_qradialgradient->setStyleSheet("QLabel{background-color: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5,\
stop:0 rgba(0, 0, 0, 255),\
stop:0.19397 rgba(0, 0, 0, 255),\
stop:0.202312 rgba(122, 97, 0, 255),\
stop:0.495514 rgba(76, 58, 0, 255),\
stop:0.504819 rgba(255, 255, 255, 255),\
stop:0.79 rgba(255, 255, 255, 255),\
stop:1 rgba(255, 158, 158, 255))}");
//梯形渐变
QLabel *lab_qconicalgradient = new QLabel("线性渐变{color: qconicalgradient(...)}");
lab_qconicalgradient->setStyleSheet("QLabel{background-color: qconicalgradient(cx:0.5, cy:0.5, angle:0,\
stop:0 rgba(255, 255, 255, 255), stop:0.373979 rgba(255, 255, 255, 255),\
stop:0.373991 rgba(33, 30, 255, 255), stop:0.624018 rgba(33, 30, 255, 255),\
stop:0.624043 rgba(255, 0, 0, 255), stop:1 rgba(255, 0, 0, 255));font-weight:bold;}");
gridLayout->addWidget(lab_Linear,3,0,1,6);
gridLayout->addWidget(lab_qradialgradient,4,0,1,6);
gridLayout->addWidget(lab_qconicalgradient,5,0,1,6);
QWidget *widget3 = new QWidget(this);
widget3->setStyleSheet("background-color:silver");
QPushButton *btn1 = new QPushButton("btn1");
btn1->setObjectName("btn1");
QVBoxLayout *widget3Layout = new QVBoxLayout(widget3);
QString qss3;
qss3.append("#btn1{background-color:olive; color:red; font:16px; font-family:SimHei}");
qss3.append("#btn1{margin:100px}");//外边距 等价与==>"#btn1{margin-left:50px;margin-top:50px;margin-right:50px;margin-bottom:50px}"
qss3.append("#btn1{border:1px dotted red;border-radius:10px}");//边框:宽度、样式、颜色;角弧度
qss3.append("#btn1{padding:50px}");//内边距:文字边距
qss3.append("#btn1{min-width:1px;min-height:1px}");//宽高
// qss3.append("#btn1{border-image:url(:/1.png)}");//设置图片
btn1->setStyleSheet(qss3);
// btn1->setIcon(QIcon(":/new/prefix1/1724480111069.jpg"));
widget3Layout->addWidget(btn1);
//7、基本字体
QStringList fontTypeList;
QStringList fontNameList;
fontNameList<<"微软雅黑:" <<"宋体:" <<"黑体:";
fontTypeList<<"Microsoft YaHei"<<"SimSun"<<"SimHei";
fontNameList<<"仿宋:" <<"楷体：" <<"隶书：";
fontTypeList<<"FangSong" <<"KaiTi" <<"LiSu";
fontNameList<<"幼圆：" <<"华文细黑：" <<"华文楷体：";
fontTypeList<<"YouYuan" <<"STXihei" <<"STKaiti";
fontNameList<<"华文宋体：" <<"华文细黑：" <<"华文仿宋：";
fontTypeList<<"STSong" <<"STZhongsong"<<"STFangsong";
fontNameList<<"方正舒体：" <<"方正姚体：" <<"华文彩云：";
fontTypeList<<"FZShuTi" <<"FZYaoti" <<"STCaiyun";
fontNameList<<"华文琥珀：" <<"华文隶书：" <<"华文行楷：";
fontTypeList<<"STHupo" <<"STLiti" <<"STXingkai";
fontNameList<<"华文新魏：";
fontTypeList<<"STXinwei";
QWidget *widget4 = new QWidget(this);
QGridLayout *gridLayoutFont = new QGridLayout(widget4);
for(uint8_t j=0;j<19;j++)
{
QLabel *labFont = new QLabel(fontNameList.at(j));
QLabel *labType = new QLabel("中国China");
gridLayoutFont->addWidget(labFont,j/3,2*(j%3),1,1);
gridLayoutFont->addWidget(labType,j/3,2*(j%3)+1,1,1);
labType->setStyleSheet(QString("QLabel{font: 16px;font-family: %1}").arg(fontTypeList.at(j)));//字体大小，字体
}
QVBoxLayout *verticalLayout = new QVBoxLayout(this);
verticalLayout->setContentsMargins(10,10,10,10);
verticalLayout->addWidget(widget1);
verticalLayout->addWidget(widget2);
verticalLayout->addWidget(widget3);
verticalLayout->addWidget(widget4);
verticalLayout->setSpacing(10);
}
2.2 widget.h
#ifndef WIDGET_H
#define WIDGET_H
#include
#include
#include
#include
#include
#include
#include
#include
class Dialog;
class Widget : public QWidget
{
Q_OBJECT
public:
Widget(QWidget *parent = 0);
~Widget();
private:
void initform(void);
QLineEdit *ledit1;
QLineEdit *ledit2;
QLineEdit *ledit3;
QLineEdit *ledit4;
};
#endif // WIDGET_H
扫一扫
3619
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
