QSS的应用

盒子模型：

• margin  边距
• border   边框
• padding 内边距
• content  内容

 常用的一些属性：

background	背景
background-color	背景颜色
background-image	背景图片
background-position	对齐方式
border-（top、left、bottom、right）	边界
border-color-（top、left、bottom、right）	边界颜色
border-image	边框图像
border-radius	边框半径
border-style	边框样式
border-width	边框高度
color	文本颜色
font	字体
font-family	字体种类
font-size	字体大小
font-style	字体风格
font-weight	字体粗细
height	子控件的高度
width	子控件的宽度
top botton left  right	上下左右的偏移量
icon	图标
icon-size	图标大小
image	图片
image-position	图片位置
margin	边距
max-（height、width）	最大长度和宽度
min-（height、width）	最小长度和宽度
opacity	透明 0为透明255不透明
padding	内边距
position   relative|absolute	相对坐标  绝对坐标
selection-background-color	所选文本或项目的背景
selection-color	所选文本或项目的前景
spacing	间距
text-align	对齐方式

border-style

none	无样式
solid	实线
double	双线
dashed	虚线
inset	凹陷
outset	突出
dotted	点划线
groove	槽状

例一：盒子的使用

QPushButton
{
	background-color: rgb(161, 227, 255);//背景颜色
	font: 75 10pt "Arial";//字体
    border:1px;//边框大小
    border-style:solid;//边框风格
    border-color:rgb(255, 25, 217);//边框颜色
    min-height:200px;
    min-width:200px;
    margin:10px;//外边距
    padding:10px;//内边距
    
}

 例二：实现一个圆形控件

把一个QPushButton拖入ui界面中，设置控件大小为（100，100）

QPushButton
{
	background-color: rgb(244, 255, 140);//背景颜色
    border-radius:50%;//半径
}

 例三：伪状态的使用

QPushButton
{
	background-color: rgb(244, 255, 140);
    border-radius:50%;
}
QPushButton:hover
{
	background-color: rgb(95, 255, 87);
}
QPushButton:pressed
{
	background-color: rgb(255, 15, 19);
}

起始状态：

鼠标悬停：

 鼠标点击：

 

使用文件导入样式表

步骤为：

• 添加qss文件：  点击新建文件  选择 General  Empty File   创建qss文件
• 创建资源文件：点击新建文件  选择 Qt  QtResource File  创建资源文件
• 资源文件中添加qss文件：创建一个前缀，前缀中添加qss文件
• 获取该qss文件的路径：右键再资源文件中的qss文件 点击Copy Path，获取路径

1.首先右键点击项目：

 2.选择General   Empty File

3.文件名为 myqss.qss(前缀可以随意)

然后可以编写qss

在ui中添加一个QPushButton 控件

在myqss.qss中添加以下信息

4.然后再添加一个资源文件 

 文件名为resource

创建好后点击 Add Prefix

 前缀可以自己设置

 然后添加文件，点击Add Files，选择你的qss文件

 添加完后，点击左下角的构建项目，完成文件的添加

widget.h文件中添加

#include<QFile>//头文件


QFile *file=nullptr；//添加一个文件对象

在 widget.cpp中实现对myqss.qss的使用

获取myqss.qss的文件路径

    file=new QFile(":/qss/myqss.qss",this);
    file->open(QFile::ReadOnly);//只可读
    QString style=tr(file->readAll());//读取信息
    qApp->setStyleSheet(style);//设置样式
    file->close();//关闭文件

样式添加完成：效果和上面的伪状态的使用相同

不规则窗体

主要通过Qt中的mask（部件遮挡）来实现不规则窗体。

实现功能为，去除窗口边框，实现不规则窗体，使用鼠标左键可以移动窗体，点击右键关闭窗体

在widget中添加：

    void paintEvent(QPaintEvent *event);//画家事件
    void mousePressEvent(QMouseEvent *event);//鼠标点击事件
    void mouseMoveEvent(QMouseEvent *event);//鼠标移动事件
    QPoint point;//获得位置

在widget.cpp中添加：

//头文件
#include<QPixmap>
#include<QBitmap>
#include<QPainter>

添加资源文件：

 

构造函数中添加：

    QPixmap p(":/image/456.png");
    p=p.scaled(300,300);//重置图片大小
    resize(p.size());
    setMask(p.mask());
    setWindowFlags(Qt::FramelessWindowHint);//设置无窗口框架边界

 事件的实现：

void Widget::paintEvent(QPaintEvent *event)//画家事件
{
    QPainter painter(this);//创建一个画家
    painter.drawPixmap(0,0,QPixmap(":/image/456.png"));//绘制图片
}
void Widget::mousePressEvent(QMouseEvent *event)//鼠标点击事件
{
    if(event->button()==Qt::LeftButton)//左键
    {
        point=event->globalPos()-frameGeometry().topLeft();//获取位置差
        event->accept();
    }
    if(event->button()==Qt::RightButton)//右键
    {
        close();//关闭窗口
    }
}
void Widget::mouseMoveEvent(QMouseEvent *event)//鼠标移动事件
{
    if(event->buttons()&Qt::LeftButton)//左键移动的话
    {
        move(event->globalPos()-point);//移动窗体
        event->accept();
    }
}

效果