首页 > 其他分享 >【Qt】样式属性

【Qt】样式属性

时间:2024-09-14 23:26:19浏览次数:13  
标签:Qt 样式 margin 边框 设置 10px border 属性

样式属性

QSS 中的样式属性⾮常多, 不需要都记住. 核⼼原则还是⽤到了就去查.

⽂档的 Qt Style Sheets Reference 章节详细介绍了哪些控件可以设置属性, 每个控 件都能设置哪些属性等.

在样式属性中有一个“盒子模型需要重点介绍”

盒子模型

在⽂档的 Customizing Qt Widgets Using Style Sheets 的 The Box Model 章节介绍了盒模型.

⼀个遵守盒模型的控件, 由上述⼏个部分构成.

  • Content 矩形区域: 存放控件内容. ⽐如包含的⽂本/图标等.
  • Border 矩形区域: 控件的边框.
  • Padding 矩形区域: 内边距. 边框和内容之间的距离.
  • Margin 矩形区域: 外边距. 边框到控件 geometry 返回的矩形边界的距离

默认情况下, 外边距, 内边距, 边框宽度都是 0。

可以通过⼀些 QSS 属性来设置上述的边距和边框的样式.

QSS属性说明

margin

设置四个⽅向的外边距. 复合属性.

padding

设置四个⽅向的内边距. 复合属性.

border-style

设置边框样式

border-width

边框的粗细

border-color

边框的颜⾊

border

复合属性, 相当于 border-style + border-width + border-color

复合属性:

margin 可以拆成四个属性:

  • margin-left
  • margin-right
  • margin-top
  • margin-bottom

假设:margin: 10px; 表示四个方向都是10px的外边距。

           margin: 10px 20px; 表示上下 10px; 左右 20px;

           margin: 10px 20px 30px 40px; 表示上右下左(顺时针)

同理padding 也是可以拆成四个属性的。

例子:设置内边距

(1)在界面上设置一个label

(2)在main.cpp文件中设置全局样式

  • border: 5px solid red 相当于 border-style: solid; border-width: 5px; border-color: red; 三个属性的简写形式.
  • padding-left: 10px; 是给左侧设置内边距

例子:设置外边距

(1)在widget.cpp文件中设置一个按钮

(2)设置外边距

【注意】这里的按钮看起来变小了,但是实际上使用qDebug()打印其大小是没有变化的,是因为当前按钮的边框被外边距挤的缩⼩了。

标签:Qt,样式,margin,边框,设置,10px,border,属性
From: https://blog.csdn.net/dab112/article/details/142001932

相关文章

  • 关于鸿蒙开发框架,页面搭建样式语法总结
    鸿蒙中的变量/常量创建采用了ts语法我们在声明变量的同时需要指定变量类型,定义变量时也是要遵守变量命名规范:    1.只能包含数字、字母、下划线、$,不能以数字开头…重点    2.不能使用内置关键字或保留字,比如let、const    3.严格区分大小写1.变......
  • QTreeView+QStyledItemDelegate实现编辑名称功能
    1.需求描述点击编辑按钮,进入编辑状态,点击确认和取消按钮退出编辑状态(1)  重写代理createEditor函数这个函数是代理触发编辑信号后,自动创建编辑界面的widget对象,覆盖在item上;EmptyTreeItem就是我们自定义的编辑控件,包括输入框,确认和取消按钮;QWidget*TreeTaskDelegate::......
  • QTreeView置顶排序功能实现
    1.需求描述QTreeView先插入的排在上面,并支持手动置顶进行排序,取消置顶;2.实现方案(1)定义排序角色给每一个插入的QStandardItem对象设置一个排序角色,我们用插入时间来设置这个值;enum CustomRole{   QOrderRole=Qt::UserRole+1};构造函数中设置model的排序角色m_......
  • QStandardItem先设置图标再插入QTreeView会影响插入性能
    所有的界面显示都交代理去绘制,否则会影响插入性能;一开始打算将类型图标通过QStandardItem创建时传给QStandardItem,在插入到model中,后来发现这样会降低插入的性能;pItem=newQStandardItem(QIcon(":/foldericon.svg"),info.value("name").toString());改成用代理QStyledItemDel......
  • QTreeView实现搜索功能并且关键字标红
    1、需求描述实现组织树搜索,关键字红色显示;搜索规则,名称匹配显示,没有匹配不显示,子节点匹配,父节点即使没有匹配也显示;2.实现方法(1)top节点名称匹配关键则显示,否则隐藏voidTreeTaskList::SlotFilterChanged(QStringstrText){m_TreeDelegate->setProperty("FilterString"......
  • QTreeView代理QStyledItemDelegate实现按钮的鼠标hover移动和点击响应
    1.需求描述QStyledItemDelegate实现按钮的点击和响应功能,鼠标移动到按钮上,也会显示tooltip提示信息2.实现方法(1)重写editorEvent函数,根据type类型触发不同的响应函数为了实现按钮的响应,需要重写QStyledItemDelegate类的editorEvent函数,并根据插入时设置进去的type类型,判断是......
  • QTreeView代理QStyledItemDelegate实现按钮、图标的绘制
    1.需求描述代理实现按钮图标状态的绘制实现方法(1)重写paint函数,根据type类型绘制案件、文件夹、监控点、视频任务; 为了实现不同的item的样式,需要继承QStyledItemDelegate类型实现TreeTaskDelegate。重写paint函数,根据不同的类型type去绘制不同的按钮和状态;voidTreeTaskD......
  • -webkit-box-reflect属性与倒影效果的实现
    -webkit-box-reflect是一个非标准的CSS属性,主要用于在WebKit浏览器(如Chrome和Safari)中创建元素的倒影效果。这个属性并不是CSS规范的一部分,但在实践中经常被用来实现简单而有趣的视觉效果。基本语法-webkit-box-reflect:[direction][offset][mask-image];direction:......
  • 同样实用的CSS剪裁属性clip-path
    clip-pathCSS属性是一个强大的工具,它允许你创建复杂的形状来剪裁元素的可视区域。这意味着你可以指定一个元素仅显示其形状内的部分,其余部分则不可见。这在创建独特的设计效果时特别有用,比如按钮、图片、文本或其他任何HTML元素。基本用法clip-path属性可以接受多种类型的值,包括......
  • 【CSS】mask-image属性的详细介绍
    mask-image属性是CSS中一个用于指定元素遮罩图像的属性。它允许开发者通过图像来遮罩元素的背景或其他图像内容,实现复杂的视觉效果。以下是对mask-image属性的详细介绍:一、属性定义mask-image属性定义了一个图像的遮罩层,该遮罩层将应用于元素的内容上。只有遮罩图像的非透明部分才......