QT中对于QPushButton样式的调整

文章目录

  • 前言
  • 1.QPushButton
    • 1.1 新建项目导入资源
    • 1.2 添加Push Button并定义样式
    • 1.3 调整样式
    • 1.4 实际需求情况
    • 1.5 背景色和边框
  • 2. 一些概念理解
    • 2.1 图片
    • 2.2 边距
  • 总结

前言

前段时间在调软件的样式,学到了些新的东西,也碰到了些问题,这里做一下记录。

这篇博客主要实现的目标就如标题所示。


1.QPushButton

1.1 新建项目导入资源

随便建一个项目,建一个资源包,导入一个资源图片。

在这里插入图片描述

1.2 添加Push Button并定义样式

在这里插入图片描述
在这里插入图片描述

这样我们想要的基本元素就有了,文字和按钮图标。


1.3 调整样式

因为我下载的图片元素比较大,所以我这里把图标拉大后进行调整。

这里假设需求是在250px*250px大小的按钮下进行样式调整。
在这里插入图片描述
我们可以看到这个背景图其实就像贴砖一样,一直贴。边上有些重复的。拉大后尤其明显。
在这里插入图片描述

这时候需要用到参数background-repeat,我们指向要一个图标,所以参数设置为no-repeat

在这里插入图片描述

在遇到这个的时候,更多的情况是不知道有什么参数可以设置,设置的值有哪些?这才是最大的问题。

多找一下帮助文档!

在这里插入图片描述

此时我们图片的位置在一个非常奇怪的位置,其实它是从左上角开始存放的。但是我们现在想让图片在中间,所以需要调整图片的位置。


接下来是文字,简单的就是文字放在按钮的最下边。

在这里插入图片描述

正常的话,好像这样就可以看了哈?但是其实我们正常做好看的UI,文字就要贴着这个按钮的图片。
这时候其实就是边距的调整了。
在这里插入图片描述

好像到这就实现了我们需要的效果了。
但是这只是我们学习的时候简单的调整样式,具体项目需求的时候,还是存在很大差异。


1.4 实际需求情况

这个小节就写一下,项目可能存在的情况。

比如我们在软件UI设计的时候,按钮就是就250px*250px这么大。这么设计的原因是用来布局占位,但是在实际的UI中,如果我们的图标也设计的和这个按钮的大小一样大的话,UI的整体就不协调。

这就有了新的需求:我按钮要占位,为了布局。但是UI要精小,为了美观协调。

出于上述的考虑,我们这里需要用到margin配置参数。

在这里插入图片描述

但是这样改了之后,我们的文字和这个图标的位置就错了。
所以这里就又是调整样式表。
这里我改了背景图标的位置,这个不是固定的,是根据需要灵活修改的。
在这里插入图片描述

background-image: url(:/059_设置.png);
background-repeat:no-repeat;
background-position:bottom;text-align:bottom;
padding-bottom:20px;
margin:40px 40px 40px 40px;/*上右下左*/

1.5 背景色和边框

对于按钮,我们可能不仅仅需要按钮的图标,可能还需要按钮的背景色和软件UI的底色协调同时在按钮的不同状态(选中和按下等情况)有对应不同的效果。

在这里插入图片描述


2. 一些概念理解

2.1 图片

我们在添加资源的时候出现三个选项
在这里插入图片描述

这里具体解释一下:
background-image:背景图片。这表示按钮最底层的背景的图片,它上面还可以有图片以及边框等。
border-image:边框图片。边框除了上面写到的定义颜色方式,还可以自定义图片。如果我们的边框颜色就是刚才我们设置的那个图片,那么其实它本质上不能称之为边框。所以在某些边距调整上存在不生效的问题。同时它也会覆盖背景色。
image:图片。这个就是在背景上面添加一个图片。

上面三个举个例子来说就是,一个按钮作为一个画布,那么background-color就是在画布上面印花,border-image就是在画布边上印边框,但是这个边框有可能是个图片,这就导致可能是给画布罩了一个罩子;最后一个image就是在画布上面贴花,画布颜色的改变不影响这个贴花,贴的花始终在画布上面。

2.2 边距

刚才对于边距的调整其实遇到了两变量控制参数:
padding:内边距。
margin:外边距。
这么讲又抽象起来了,不太理解。

举个例子:刚才讲到一个占位的概念。250px*250px。如果我不设置这个外边距margin,那么这个按钮不仅占位是250px,本身的大小也是250px。我们可以对按钮内部调整的大小也是250px。如果设置了外边距,这意味着,按钮占位的整体大小不变,但是显示出来的给我们自己操作样式的大小相对于外面的占位边框有一定的边距,这就是外边距。

再说这个内边距,我们的可以操作的这个控件样式其实就是内部样式了,那么内部样式里面可以控制的范围和内部边框之间也可以设置边距。相当于在可布置的样式中,保证布置样式的边框和底色等不变,改变在这个画布上面的可布置范围。

在这里插入图片描述

这里我图片名字是中文的,编译过不了,所以我后面改成了英文名,但是之前的图又截了,图片没有更换,这里要注意图片名称问题!。

总结

这篇博客主要对QPushButton的样式调整以及自己对一些样式概念的理解,其他的按钮控件也可以参考这个。
对于样式真的没什么统一的说法,不同需求,不同人的调法都不一样,需要自己去琢磨。这个比较费时间,但是确实好看啊。


澄澈i
用简单的语言记录自己走过的技术路

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/2777.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LC 239.滑动窗口最大值

239.滑动窗口最大值 给你一个整数数组 nums,有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口中的最大值 。 示例 1: 输入: nums [1,3,-…

4.26日学习记录

[湖湘杯 2021 final]Penetratable SUID提权 SUID是一种对二进制程序进行设置的特殊权限,可以让二进制程序的执行者临时拥有属主的权限 SUID具有一定的限制: 1.仅对于二进制有效; 2.执行者在程序中有可以执行的权限; 3.权限仅在程序…

Linux 深入理解Linux文件系统与日志分析

在Linux系统中,文件名和文件数据是分开存储的 文件数据包含 元信息(即不包含文件名的文件属性) 和 实际数据 文件元信息存储在 inode(索引节点)里, 文件实际数据存储在 block(块)里; 文件名存储在目录块里 查看文件的元信息 stat 文件名 [ro…

数据结构习题--回文链表

数据结构习题–回文链表 给你一个单链表的头节点 head ,请你判断该链表是否为回文链表。如果是,返回 true ;否则,返回 false 要求: 时间复杂度为O(n) 空间复杂度为O(1) 方法:反转后半链表 分析 因为要求…

【期末复习向】智能信息系统前4章梳理

第四章 不确定性推理 [了解即可]4.1 不确定性概述 不确定性推理概念 所谓推理,就是从已知事实出发,运用相关的知识(或规则)逐步推出结论或者证明某个假设成立或不成立的思维过程。 不确定性方法分类 1.模型方法 a&#xff0…

芒果YOLOv8改进组合161:动态标签分配ATSS+新颖轻量化非对称多级压缩LADH检测头组合改进,LADH作为原创可以发表SCI顶刊论文,小目标高效涨点

💡本篇内容:【芒果YOLOv8改进ATSS标签分配策略|第四集】芒果YOLOv8改进组合161:动态标签分配ATSS+新颖轻量化非对称多级压缩LADH检测头组合改进,小目标高效涨点 💡🚀🚀🚀本博客 标签分配策略ATSS改进+ 新颖轻量化非对称多级压缩LADH检测头组合改进,适用于 YOLOv…

Centos7系统下安装Nginx并配置域名转发实现域名访问

感谢李天健同学辛苦创作,对于Nginx配置未完成的同学请移步他的博客。 传送门:Centos7系统下安装Nginx并配置域名转发实现域名访问 传送门2:1.24.0

Ubuntu查看端口状态

完蛋了,好像动心了,近一周吃啥东西都索然无味,这可如何是好!!!不知道在期待什么,恐惧与窃喜—— 在Ubuntu系统中,查看某个端口是否被放行(即允许流量通过)&am…

C++左值引用与右值引用

首先,我们需要知道什么是值语义,什么是引用语义。 值语义: 值语义意味着对象在被传递、赋值或拷贝时,会复制其整个数据。当使用值语义时,对对象进行操作不会影响原始对象,因为操作会在副本上进行。传统的…

WIFISKY 7层流控路由器 confirm.php RCE漏洞复现

0x01 产品简介 WIFISKY-7层流控路由器是一款可用于家庭或办公环境的无线路由器,具备流控功能以优化网络流量和提供更稳定的网络连接。该路由器采用了7层流控技术,能够依据网络数据包的内容进行智能管理,从而实现对网络流量的精细化控制和优化。这种技术可以提升网络的整体性…

营业执照OCR接口在电商行业中的具体应用

在当今快速发展的电子商务时代,营业执照OCR接口技术的应用为电商行业带来了深远的影响。这项技术通过自动识别和提取营业执照图像中的文字信息,不仅极大提高了数据处理的速度和准确性,而且还为电商平台的风险管理和用户体验优化提供了强有力的…

#! /usr/bin/env node 命令与 npm link 建立项目间软连接(一)

#! /usr/bin/env node js 代码… 这条指令通常出现在Node.js脚本文件的开头,它的作用是用来指定该脚本文件使用 /usr/bin/env 来寻找并执行 node 解释器。这里的 node 即Node.js的执行环境。 #!/usr/bin/env node 是Unix/Linux系统(包括Mac OS X&…

分享一个由systemd管理tomcat的tomcat.service文件的编写

如果你有一个tomcat的二进制包你就可以使用以下.service文件直接套用,前提是你必须先停止现有的tomcat cat tomcat.service[Unit] Descriptiontomcat server daemon # 描述 Aftersyslog.target network.target remote-fs.target nss-lookup.target # 在那些服务之…

001 redis高并发减库存

文章目录 释放锁加lua脚本String lockValue(唯一标识符作为锁的值)lua脚本无String lockValue(唯一标识符作为锁的值)无Lua脚本加锁的过期时间防死锁无lockValue代码 lockValue加了lockValue无lua脚本代码加了lockValue加了lua脚本…

【Java | 多线程】LockSupport 的使用和注意事项

了解一下 LockSupport LockSupport是一个类,位于java.util.concurrent.locks包中,提供了基本的线程同步机制。 LockSupport的主要作用是挂起和唤醒线程。它提供了两个主要的静态方法:park()和unpark()。 park():用于挂起当前线…

Harmony专栏 TypeScript教程

TypeScript教程 TypeScript简介TypeScript安装使用vscode开发TypeScript应用TypeScript编译器TypeScript基本语法TypeScript变量TypeScript let const var区别TypeScript 常量TypeScript数据类型TypeScript数字类型numberTypeScript字符串类型stringTypeScript 字符串常用函数…

thsi指针用法总结

1 c类对象中的变量和函数是分开存储的 2 所以对象共用一份成员函数,类的大小是指非静态的成员变量; this 完成链式操作 const 修饰成员函数

图像空间(IS),高级特征空间(FS)和两阶段(TS)重采样

what is the 3 types :image space (IS), high-level feature space (FS) and two-stage (TS) resampling? what is the difference? pros and cons? 这三种类型:图像空间(IS),高级特征空间(FS)和两阶段…

Kafka 3.x.x 入门到精通(02)——对标尚硅谷Kafka教程

Kafka 3.x.x 入门到精通(02)——对标尚硅谷Kafka教程 2. Kafka基础2.1 集群部署2.1.1 解压文件2.1.2 安装ZooKeeper2.1.3 安装Kafka2.1.4 封装启动脚本 2.2 集群启动2.2.1 相关概念2.2.1.1 代理:Broker2.2.1.2 控制器:Controller …

【Linux 开发第一篇】如何在安装中完成自定义配置分区

安装配置自定义配置分区 在安装Centos的过程中,我们可以在安装位置部分手动配置分区 选择我要配置分区,点击完成: 我们自动分区分为三个分区:boot分区(引导分区),swap(交换分区&…