本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

西门费雪

1594

文章

923310

访问

+关注

分类

暂无分类

日期归档

2023-05(4)

2023-06(2)

偷偷学习qt 样式，然后写出惊艳所有人的界面

发布于2021-04-09 07:17 阅读(405) 评论(0) 点赞(13) 收藏(5)

QT样式表

qt样式表主要受到css的启发，通过调用QWidget:: setStyleSheet() 或 QApplication::setStyleSheet()来设置样式，也可以在界面的样式表中直接填写。

盒子模型（the Box Model）

学习样式之前我们要先了解盒子模型，也是最基本的样式：

content 为最内部的矩形，通常是绘制文子、图片的地方。
padding 负责指定填充操作，主要是窗口部件内容，与边缘线（border）之间的空隙，它可以用top 、right、bottom、left 设置它的大小。
border 认为是窗口的外边框、你可把它当成门框。
margin 最外边的矩形，主要负责边缘区域，与窗口部分的距离。

如果没有指定它们四个，默认是4个重合在一起。

我们来使用最简单布局，看看效果。

对应样式表：


QLineEdit
{
	border:5px solid gray;
	border-radius: 10px;
	padding: 10 10 10 20px;
	background: yellow;
    selection-background-color: blue;
}

这里先可以不要理解其它的东西，后面会有对应表，上图中我们选中的字体，就是content 内容，padding 部分就是参数上，右，底，左的方式，简单记住顺时针方式。border，就是上面灰色部分，我们可以修改 padding最后一个参数为30，看看效果。

我们可以看到明显的向右移动内容。这下有关盒子模型基本都了解了吧，

QSS基本写法：

selector {property: value}

举例：


QLineEdit
{
	background:yellow;
}

多个选择器可以并列使用，它们之间用逗号隔开。

QPushButton,QLineEdit, QComboBox{ color: red }

如果是指定莫个选择器中的单独一个控件：


QLineEdit#lineEdit
{
	background:yellow;
}

其中 lineEdit 是对应的一个对象，我们常用# 加对象名字。

对应状态：

selector：status {property: value}

举例,当鼠标移动button上时候，颜色变成红色：


QPushButton:hover
{
    color:red;
}

子控件，当控件里面有子控件可以这样用：


QComboBox::drop-down
{
    
}

下面是常用的属性表：

属性	说明
background	在一个声明中设置所有的背景属性
background-color	设置元素的背景颜色。
background-image	用于背部图片，可用于background-color添加透明度，QFrame{background-image: url(:/images/xxx.png); }
background-repeat	无论是否指定重复的填充背景图片，用于盒模式，在没有指定的时候会（x,y）方向开始重复，使用方式 background-repeat：repeat-y; 延Y的背景图片。
background-position	在盒子模型中指定位置图片的开始，background-position:bottom left; 显示在左下角开始显示
background-attachment	描述背景图片是否在QAbstractScrollArea 的区域跟滚动条滚动，fixed是图片不跟滚动条
background-clip	规定背景的绘制区域。
background-origin	规定背景图片的定位区域。
background-size	规定背景图片的尺寸。

常见的border 属性：

border	设置部件的外框线
border-top	简单设计部件上部的外框线
border-right	简单设计部件右部的外框线
border-bottom	简单设计部件底部的外框线
border-left	简单设计部件左部的外框线
border-color	设计部件外框线的颜色
border-top-color	设计部件上部的外框线颜色
border-right -color	设计部件右部的外框线颜色
border-bottom-color	设计部件底部的外框线颜色
border-left-color	设计部件左部的外框线颜色
border-image	设置4个角位置的image
border-radius	外框线的角度
border-top-left-radius	左上角的弧度
border-top-right-radius	右上角的弧度
border-bottom-left-radius	左下角的弧度
border-bottom-right-radius	右下角的弧度
border-style	设置四条边框的样式。
border- top-style	这里top 可以写成 left bottom right，表示对应部分的样式
border-width	设置边框的宽度值

常用的font属性：

font	在一个声明中设置所有字体属性。
font-family	字体集
font-size	文本字体大小
font-style	文本样式
font-weight	文本字体的磅数

目前暂时记录到这里，后期有时间给大家继续更新，qt样式，让我们写出来更加漂亮的界面。

window属性：controllers

2022年最受欢迎的8大编程语言

为什么都说程序员找不到女朋友，但是身边程序猿的却没一个单身的

30岁以上你还死磕技术，别说拿高薪，可能你连饭碗都会保不住

程序员被开除，老板：“有你参与的项目全黄了！”

笑话：一个测试工程师走进一家酒吧

趣图：程序员头疼的4种原因

笑话：面试官：请拿出一段体现你水平的代码。我： sudo rm -rf /*面试官：这体现了你哪方面能力？

网友说：做开发，不被领导喜欢怎么办？

前端精选：在 WPF 中实现融合效果

所属网站分类: 技术文章 > 博客