20210508(qss总结)

20210508(qss总结)

1、测试布局

没意义(暂时)

2、场景一

还是和提升貌似有关先了解以下提升

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QzLZvs9l-1620493133057)(C:\Users\11066\AppData\Roaming\Typora\typora-user-images\1620487381450.png)]

函数入口很简单

#include "widget.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget w;
    w.show();


    return a.exec();
}
tips:若始终不能自由设置大小,建议查看fix策略

使用场景1

在主窗口resizesmallWidget的大小

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Fy9RdCf-1620493133060)(C:\Users\11066\AppData\Roaming\Typora\typora-user-images\1620488236568.png)]

前两个是将主窗口中widget直接变形为smallWidget
最底下的哪个是直接new的对象
原理机制其实是一样的。
然后再试试本身操控
经测试，如果

若大小限制

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TBTgyd5i-1620493133062)(C:\Users\11066\AppData\Roaming\Typora\typora-user-images\1620488709811.png)]

经测试，若对象本身的最大最小值设置之后

布局间隙

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HVpWuO0s-1620493133064)(C:\Users\11066\AppData\Roaming\Typora\typora-user-images\1620488925552.png)]

一般制作会要求清空间隙

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KY1vX6D4-1620493133066)(C:\Users\11066\AppData\Roaming\Typora\typora-user-images\1620489175845.png)]

布局完全不留间隙

需要计算横向和纵向所有控件的值

然后设置父类控件的大小

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MV5y2foR-1620493133068)(C:\Users\11066\AppData\Roaming\Typora\typora-user-images\1620489854969.png)]

计算之后的结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cXaOInWi-1620493133069)(C:\Users\11066\AppData\Roaming\Typora\typora-user-images\1620489883461.png)]

另外边框线条可能占一个像素

需要计算在内

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uj7DyE1J-1620493133069)(C:\Users\11066\AppData\Roaming\Typora\typora-user-images\1620490023669.png)]

前人总结qss

QLabel#label
{
	border:0px solid;
	border-top-width:1px;
	border-top-style:solid;
	border-top-color:red;
	background-color:transparent;
	alternate-background-color:black;
	min-height:36px;
	max-height:36px;
font-family: Microsoft YaHei;
font-size: 12px;
color: red;
text-align: right;
	min-width:100px;
	max-width:100px;
}

控制图片和文字的位置

QPushButton#btn_set
{
	background-color:#60c171;
	background-image: url(:/_20200307224253.jpg);
	background-origin: top;
/*这俩玩意控制对齐方式和间距*/
	background-position: top;
	padding-top: 2px;
	background-repeat: no-repeat;
	min-height:300;
	max-height:300;
	min-width:300;
	max-width:300;
}

QPushButton#pushButton_1 {
    background-color: #60C171;
    background-image: url(:/images/home_small.png);
    background-origin: content;
    background-position: top;
    /*表明位置起始点*/
    padding-top: 20px;
    background-repeat: no-repeat;
}

QPushButton#pushButton_2 {
    background-color: #60C171;
    background-image: url(:/images/home_small.png);
    background-origin: content;
    background-position: left;
    padding-left: 2px;
    background-repeat: no-repeat;
}

QPushButton#pushButton_3 {
    background-color: #60C171;
    background-image: url(:/images/home_small.png);
    background-origin: content;
    background-position: left bottom;
    padding-left: 2px;
    padding-bottom: 2px;
    background-repeat: no-repeat;
}

QPushButton#pushButton_4 {
    background-color: #60C171;
    background-image: url(:/images/home_small.png);
    background-origin: content;
    background-position: right top;
    padding-right: 2px;
    padding-top: 2px;
    background-repeat: no-repeat;
}

QPushButton#pushButton_5 {
    background-color: #60C171;
    text-align: top;
    padding-top: 8px;
    font-size: 12px;
    color: #FFFFFF;
}

QPushButton#pushButton_6 {
    background-color: #60C171;
    text-align: left;
    padding-left: 8px;
    font-size: 12px;
    color: #FFFFFF;
}

QPushButton#pushButton_7 {
    background-color: #60C171;
    text-align: left top;
    padding-left: 2px;
	padding-top: 2px;
    font-size: 12px;
    color: #FFFFFF;
}

QPushButton#pushButton_8 {
    background-color: #60C171;
    text-align: right bottom;
    padding-right: 2px;
	padding-bottom: 2px;
    font-size: 12px;
    color: #FFFFFF;
}

QPushButton#pushButton_9 {
    background-color: #60C171;
    background-image: url(:/images/home_small.png);
    background-origin: content;
    background-position: left top;
    padding-left: 2px; /*利用padding-left和padding-top来控制image的位置*/
    padding-top: 2px;
    background-repeat: no-repeat;

    background-color: #60C171;
    text-align: right bottom;
    padding-right: 2px; /*利用padding-right和padding-bottom来控制文字的位置，这样不至于属性被覆盖*/
    padding-bottom: 2px;
    font-size: 12px;
    color: #FFFFFF;
}

QPushButton#pushButton_10 {
    background-color: #60C171;
    background-image: url(:/images/home_small.png);
    background-origin: content;
    background-position: right bottom;
    padding-right: 2px;
    padding-bottom: 2px;
    background-repeat: no-repeat;

    background-color: #60C171;
    text-align: left top;
    padding-left: 2px;
    padding-top: 2px;
    font-size: 12px;
    color: #FFFFFF;
}

QPushButton#pushButton_11 {
    background-color: #60C171;
    background-image: url(:/images/home_small.png);
    background-origin: content;
    background-position: top;
    padding-top: 2px;
    background-repeat: no-repeat;

    background-color: #60C171;
    text-align: bottom;
    padding-bottom: 2px;
    font-size: 12px;
    color: #FFFFFF;
}

QPushButton#pushButton_12 {
    background-color: #60C171;
    background-image: url(:/images/home_small.png);
    background-origin: content;
    background-position: left;
    padding-left: 2px;
    background-repeat: no-repeat;

    background-color: #60C171;
    text-align: right;
    padding-right: 2px;
    font-size: 12px;
    color: #FFFFFF;
}

;
background-origin: content;
background-position: left;
padding-left: 2px;
background-repeat: no-repeat;

background-color: #60C171;
text-align: right;
padding-right: 2px;
font-size: 12px;
color: #FFFFFF;

}