qt QSS border-image
Qt Image border QSS
2023-09-27 14:21:18 时间
例如由美工提供左边的按钮背景图,我们需要实现右边的效果,并且背景随着按钮的大小自动变化:
圆角按钮背景
圆角按钮效果
前面我们学习过的和修改背景相关的知识有 background-image,如果背景图和按钮一样大时使用 background-image 没有任何问题,但是当按钮和背景图不一样大时,背景图要么显示不全,要么重复平铺到按钮上,显然满足不了这里的需求。不过 QSS 也支持 border-image
,使用 border-image
就能很快的做出上面的效果:
.QPushButton {
border-width: 12px 12px 12px 12px;
border-image: url(:/img/round-button.png) 12 12 12 12 repeat stretch;
min-height: 24px; /* 避免按钮太小 */
padding: -10px 0 -10px 0; /* 调整文字与边界的距离 */
}
border-width
后面的四个数字按顺序分别为:
border-top
的高 12pxborder-right
的宽 12pxborder-bottom
的高 12pxborder-left
的宽 12px
border-image
后面的参数按顺序分别为:
- 背景图的路径,可以是绝对路径,相对路径,资源文件里的路径
- 四个数字按顺序分别为
- 背景图中
最上面的 12px 高的图像
填充到 Widget 的border-top
- 背景图中
最右边的 12px 宽的图像
填充到 Widget 的border-right
- 背景图中
最下边的 12px 高的图像
填充到 Widget 的border-bottom
- 背景图中
最左边的 12px 宽的图像
填充到 Widget 的border-left
- 背景图中
- 数字后面的第一个参数 repeat|round|stretch 指定
水平方向的缩放或者平铺
- 数字后面的第二个参数 repeat|round|stretch 指定
垂直方向的缩放或者平铺
注意
:border-width
后的数字有单位border-image
后的数字没有单位min-height
和padding
不是必须的,这里用来细微的调节按钮的效果
Border-Image 从名字上看,像是用来图片来设置 border 的,其实是用图片来设置整个 widget 的背景的,我曾经就被这个名字迷惑过
Border-Image 原理
下图是理解 Border-Image 的核心,又称为九宫格,看懂这个图,也就能理解 Border-Image 了:
背景图
Widget
相关文章
- QT creator 常用快捷键
- qt中解决QString中文乱码问题方法
- C++中运行一个程序的内存分配情况及qt中的内存管理机制
- 基于QT(C++)的个人通讯录管理系统【100010761】
- 基于QT(C++)+Oracle实现的(界面)教务管理系统【100010664】
- Qt音视频开发43-采集屏幕桌面并推流(支持分辨率/矩形区域/帧率等设置/实时性极高)
- Qt编写的项目作品31-PDF阅读器(雨田哥作品)
- QT就是别人好心帮你做一些枯燥,并且很重复的代码编写工作,让你更好的把精力投入到你界面的逻辑和功能的实现的功能库(否则写了上万行代码了,才写出个BUG一大堆的毛坯)
- 翻译 | Qt研发副总裁分享2018年工作计划
- Qt Linguist介绍
- Qt ------ stylesheet 样式
- win10 下 protobuf 与 qt
- 【转】QT中QDataStream中浮点数输出问题