Qt自定义按钮，实现图片、文字内容位置任意布局（上图下文字、左图又文字），以及样式表设置（鼠标滑过、单击效果）

最新推荐文章于 2024-05-15 07:12:20 发布
最新推荐文章于 2024-05-15 07:12:20 发布
阅读量5.8k 收藏 20
点赞数 6
分类专栏： Qt工程应用 文章标签： Qt 文字 自定义 按钮 图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/naibozhuan3744/article/details/102536188
版权

本文主要总结在一个自定义的按钮。该按钮可以任意摆放图片和文字位置和距离，同时可以用QSS设置按钮内图片、文字、整个按钮的样式表效果，也就是说，可以实现鼠标划过、鼠标选中等样式表，跟原来QPushbutton的样式表效果一模一样！

效果图

源代码下载地址：https://download.csdn.net/download/naibozhuan3744/11860062

 

全文主要分为两大部分，分别为原理讲解和效果代码实现。

一、原理讲解

1.1该自定义按钮主要继承QPushbutton，然后在子类中添加两个QLabel（imageLbl、textLbl），分别显示图片和文字，用水平布局连接起来。

1.2实现布局内控件不影响父类控件背景：只需要将布局内所有控件背景色设为跟随背景色transparent，用QSS一句代码搞定。

1.3设置图片：可以设置一个函数获取全局变量imageLbl句柄，然后通过该句柄操作图片，同时该句柄可以设置任意QSS效果；可以设置图片大小和位置等。或者直接设置一个函数

最低0.47元/天 解锁文章
三公子Tjq
关注
  • 6
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Qt之使用QSS设置QPushButton图标和文本的位置
草上爬的博客
08-11 8285
Qt之使用QSS设置QPushButton图标和文本的位置，本文将演示如何使用样式表控制按钮中的图标和本文。
Qt自定义按钮，实现图片、文字内容位置任意布局（上图下文字、左图又文字），以及样式表设置（鼠标滑过、单击效果）.zip
10-13
总结在一个自定义的按钮。该按钮可以任意摆放图片和文字位置和距离，同时可以用QSS设置按钮内图片、文字、整个按钮的样式表效果，也就是说，可以实现鼠标划过、鼠标选中等样式表，跟原来QPushbutton的样式表效果一模一样！博客原理详解和效果图地址：https://blog.csdn.net/naibozhuan3744/article/details/102536188。编译环境为：Qt5.9.4+QtCreator4.5.0+MinGW32
QPushbutton设置按钮文字位置（上图下字），有些版本text-align:bottom不生效
starfire_hit的博客
09-20 5049
QPushbutton修改样式，使文字显示在底部，上面显示图标。有些版本里text-align:bottom存在bug，text-align:bottom不生效，text-align:bottom不正常。
C C++最新利用QSS自由控制QPushButton中图片和文字的位置_qss 文字位置，2024年最新C C++开发知识点
最新发布
2401_84973664的博客
05-15 819
*利用padding-left和padding-top来控制image的位置*/小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！/*下面两个属性控制图片的对齐方式和间距*//*或者通过水平和垂直对齐方式来控制*/
QT设置按钮QPushButton上图片加文字
weixin_44084447的博客
03-03 7290
如何把一个Button的图标设置为图片加文字呢？ 首先，我们在QTdesigner上放置一个Qpushbutton，按钮名btnLive，并设置其样式表： QPushButton { background-color:#1E90FF;//背景蓝色 border-radius: 10px; //圆角弧度 } 效果如图所示： 然后我们在构造函数中加入如下代码： //new两个Label，一个放置图片，一个放置文本 QLabel* labLiveIMG = new QLabel();
Qt中QPushButton设置按钮的文本位置
肩上风骋的博客
10-18 3419
按钮文本位置设置无效。
QPushButton设置Icon和text后，实现左字右图
weixin_51034082的博客
04-25 2399
自己在设置按钮样式的时候，想要实现字体在左边，图标在右边，网上找到的比较简单的方法是直接调用QPushButton::setLayoutDirection(Qt::LayoutDirection direction);但是自己在使用这种方法的时候发现图还在但是字不见了。可以通过设置样式表来改变。
Qt之按钮左边图标右边文字
我是黄同学博客
11-30 3276
一.前言 软件开发过程中，会遇到这样的需求，一个按钮要携带图标和文字，且图标在左，文字在右，以此来增强这个按钮的功能指向，这个样式在移动端还是蛮常见的，最典型就是搜索栏。 二、在Qt中有两种方式可以实现需求 方式一：代码方式 1.核心代码 ui->pushButton->setIcon(QIcon(":/buttonIcon.png")); ui->pushButton->setLayoutDirection(Qt::LeftToRight); ui->pushButto
QT实现ListWidget排列图片
bureau123的博客
12-26 1521
最近工作遇到了要将点线面符号排列在控件上的问题，采用QListWidget实现： ui->listWidgetCommon->setViewMode(QListWidget::IconMode);//设置内容为图片 ui->listWidgetCommon->setIconSize(QSize(50, 50));//设置图片的大小 ui->listWidgetCommon->setSpacing(10);//设置每个item之间的间隔大小 ui->listWidge
自定义按钮，鼠标移入、移出、摁下，分别改变按钮图标样式原理和代码总结（上图标下文字、hover、QSS样式表、QPushbutton）1.zip
10-22
可以任意设置图片中文字和图片位置、以及鼠标移入、移出、摁下按钮时要在自定义按钮中显示的图片。编译环境是Qt5.9.4+MinGW32+Creator4.5.0。下面博客是对源代码的原理讲解和代码运行效果图文示例讲解：...
Qt实现聊天小程序，发送文字以及图片并显示
10-11
创建服务器保存客户信息以及客户的IP以及UDP、TCP端口号 客户端实现发送聊天信息以及图片的功能并有消息提示的图标，客户端可以向多个人发送消息
QT下实现图片的自适应显示、缩放（以鼠标位置为中心进行缩放）、拖动、以及重置并截图保存
12-22
可自适应显示图片，以鼠标位置为中心进行缩放，按住鼠标左键进行图片拖动，可添加截图方框并截图保存，可载入显示大部分tif格式的图，可显示伪彩，灰度图
Qt自定义鼠标点击样式
11-08
Qt自定义鼠标点击样式。具体详情可看：https://blog.csdn.net/automoblie0/article/details/102981764
QPushButton上文字位置的设置（Qt4）
热门推荐
guyansrg的专栏
09-25 1万+
最近在Qt中文论坛上看到这么一个提问，如题。自己简单测试了一下，对于靠左、靠右的设定可以这么做： 左对齐qApp->setStyleSheet("QPushButton{text-align : left;}");右对齐qApp->setStyleSheet("QPushButton{text-align : right;}");或者是：//左对齐pushButton.setS
【QT5 实现“上图下文”，带图标的按键样式-toolbutton-学习笔记-记录-基础样例】实现方式之一
qq_22146161的博客
01-16 1720
最近想做个上图下文的按键，尝试了很多方式，都不是很符合需求，在大佬的指点下，自己一尝试果然可以，并且做了对比测试，决定将这种方式记录下来。另外需要做一些说明的是，我认为这是实现的一种方式，有其他实现途径，并且你决定这种方式是你需求情况下，实验代码和细节也需要注意些。细节还是挺多的，建议多尝试吧，自己也是尝试了很多。
QPushButton自定义样式 调整字体对齐方式 同时显示图片和文字 调整图片文字位置
gz9456的博客
04-15 1万+
QPushButton自定义样式介绍： 基本样式： setStyleSheet("QPushButton{" "border: 1px solid black;"//边框宽度和颜色 "border-radius: 5px;"//边框圆角 "background-color:#083590; "//背景颜色 "color:red; ...
Qt : 简单介绍五种界面布局方式！（非常简单）
weixin_49297121的博客
09-16 4596
Qt提供了方便快捷的界面布局方式，包括水平布局，垂直布局，网格布局，表单布局，以及分组布局的方式，避免了手动排布的繁琐，能够覆盖大部分设计需要；
Qt通过QSS设置QPushButton的样式
u013932564的专栏
08-09 1378
为了美化界面，有时候需要修改QPushButton的样式，让一个QPushButton上面既要显示图标，又要显示文字内容。通过qss样式便可以在一个QPushButton上面，左边显示图标，右边显示文字。QPushButton上面既显示文字又显示图标的需要。
py qt 设置QSpinBox上下按钮样式，添加图片
06-01
可以通过CSS样式表来设置QSpinBox的上下按钮样式，同时可以添加图片。下面是一个简单的例子，演示了如何使用CSS样式表来设置QSpinBox上下按钮样式和添加图片： ```python import sys from PyQt5.QtCore import Qt from PyQt5.QtGui import QPixmap from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QSpinBox class MainWindow(QWidget): def __init__(self): super().__init__() # 创建QSpinBox self.spin_box = QSpinBox() self.spin_box.setRange(0, 100) # 设置QSpinBox的上下按钮样式和添加图片 style_sheet = """ QSpinBox::up-button { border-image: url(./up_arrow.png); width: 20px; height: 20px; } QSpinBox::down-button { border-image: url(./down_arrow.png); width: 20px; height: 20px; } """ self.spin_box.setStyleSheet(style_sheet) # 创建垂直布局 layout = QVBoxLayout() layout.addWidget(self.spin_box) # 设置窗口布局 self.setLayout(layout) if __name__ == "__main__": app = QApplication(sys.argv) # 加载图片 app_icon = QPixmap("./up_arrow.png") app_icon = app_icon.scaled(50, 50, Qt.KeepAspectRatio, Qt.SmoothTransformation) app.setWindowIcon(app_icon) # 创建窗口 window = MainWindow() window.show() sys.exit(app.exec_()) ``` 在这个例子中，我们首先创建了一个QSpinBox，并设置了范围。然后，我们使用CSS样式表来设置QSpinBox的上下按钮样式。我们使用border-image属性来设置按钮的背景图像，并设置了按钮的宽度和高度。最后，我们将样式表设置为QSpinBox的样式表。 在加载图片时，我们将窗口图标设置为up_arrow.png的图像，并使用scaled函数将其缩放为50x50大小。这只是一个简单的例子，你可以根据需要修改样式表和图片。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三公子Tjq

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值