Qt控件的盒子模型,了解边距边线和内容区

这篇专门讲讲一个控件在绘制时的视觉样式。我们平常在对控件设置样式时,需要设置控件的一些外边距,内边距,边线,还有文字内容,贴上图片等。那么对于一个控件,到底怎么实现这些设置的呢?

先看下面这个图,这是一个标准的盒模型,也叫盒子模型。

这是一般控件的实际结构,比如QLabel,QPushbutton等,内部的结构实际都是这种样子。分为:外边距区域,边线区域,内边距区域,内容区域。

外边距区域:外边距区域通常是指标签内文本或图片与标签部件边界之间的空白区域。注意:一个控件的整个区域,是包含外边距区域的!

边线区域:边线区域,顾名思义,就是咱们平常看到的QLabel的边框占据的区域。边框可与是粗边框,可以是细边框,可以只有下边框或者其他某一边的边框线。都在这一区域绘制,当然你也可以将它设置为0px,就相当于取消了边框区域,给边框区域不留空间。

内边距区域:内边距区域‌是指控件内边线区域与内容之间的空间。你想要内容离上边框多点,离下边框近点,输了设置字体大小,就可以设置这个内边距区域。

内容区域:内容区就比较简单了,就是我们文字显示的区域。

再来说说,这块的样式设计。一般在样式表中,需要变哪些就设置哪些,比如你特意要文字左对齐,但又想离边线留个10px的距离,那么就可以设置左边内边距为10px;你想跟前面的另一个紧挨的控件留点距离,就可以设置外边距,当然,这种常见的需求,有很多中实现方式。下面贴一些常见的样式写法:

cpp 复制代码
QLabel{
//前景色
	color: qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 rgb(20, 220, 60),stop:1 rgb(30, 40, 240));
	//顶部边线透明
		border-top-color: transparent;
		//右边线透明
		border-right-color: transparent;
		//左边线透明
		border-left-color: transparent;
		//文字左右居中,上下也居中
		text-align: center center;
		//字体组,加粗,雅黑
		font: bold normal 18pt "Microsoft YaHei";
}
相关推荐
天天鸭14 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
江城开朗的豌豆39 分钟前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
阿蒙Amon41 分钟前
C#扩展方法全解析:给现有类型插上翅膀的魔法
开发语言·c#
江城开朗的豌豆1 小时前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了1 小时前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆1 小时前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
尘浮7281 小时前
60天python训练计划----day59
开发语言·python