Qt通过QSS设置QPushButton的样式

这篇具有很好参考价值的文章主要介绍了Qt通过QSS设置QPushButton的样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

同时设置QPushButton的文字样式和图标的方法

  1. 为了美化界面,有时候需要修改QPushButton的样式,让一个QPushButton上面既要显示图标,又要显示文字内容

    • 起初我的做法是重写QPushButton,这样做可以实现,但是有几个问题
      • 实现比较繁琐
      • 每次使用UI编辑器设计界面的时候,对每一个QPushButton都要做一次提升
    • 为了解决上面的问题,就使用QSS的方式实现
  2. QPushButton上面既显示文字又显示图标的需要

    • 通过qss样式便可以在一个QPushButton上面,左边显示图标,右边显示文字

    • 效果图
      Qt通过QSS设置QPushButton的样式,qt,开发语言

    • 具体代码实现如下:文章来源地址https://www.toymoban.com/news/detail-649717.html

QPushButton#btnUpdate{
	font: 9pt ".萍方-简";
	font-style: normal;
	font-size: 12px;
	line-height: 20px;
	border-radius: 4px;
	background: rgb(0, 142, 250);
	color: #FFFFFF;
	text-align: right;
    padding-right: 16px;
	background-image: url(:/UpdateLauncher/Source/Check.png);
    background-origin: content;
    background-position: left;
    padding-left: 16px;
    background-repeat: no-repeat;
}
QPushButton#btnUpdate:hover{
	font: 9pt ".萍方-简";
	font-style: normal;
	font-size: 12px;
	line-height: 20px;
	border-radius: 4px;
	background: rgb(0, 100, 250);
	color: #FFFFFF;
	text-align: right;
    padding-right: 16px;
	background-image: url(:/UpdateLauncher/Source/Check.png);
    background-origin: content;
    background-position: left;
    padding-left: 16px;
    background-repeat: no-repeat;
}
QPushButton#btnUpdate:pressed{
	font: 9pt ".萍方-简";
	font-style: normal;
	font-size: 12px;
	line-height: 20px;
	border-radius: 4px;
	background: rgb(0, 142, 250);
	color: #FFFFFF;
	text-align: right;
    padding-right: 16px;
	background-image: url(:/UpdateLauncher/Source/Check.png);
    background-origin: content;
    background-position: left;
    padding-left: 16px;
    background-repeat: no-repeat;
}

到了这里,关于Qt通过QSS设置QPushButton的样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • QT各种控件常用样式表qss示例

    目录 1、表格控件QTableWidget和QTableView 2、滚动条QScrollBar 这个控件比较复杂,里面包含了滑动条、表头(又细分为内容区/空白区)、表格、整体、左上角按钮等多种不同的元素,他们之间有复杂的叠层关系。需要通过各种“选择器”来指定样式的作用范围。 本文由【暴躁的野

    2024年02月16日
    浏览(45)
  • qt 系列(二)---qt designer通过设置控件样式表进行背景颜色设置

    1. 前言 一般Layouts不可以进行改变样式表,当我们想修改背景样式表,同时又不改变其他控件的颜色时,可以选择List View 控件改变背景颜色。 2. 设置背景 (1)配置 .qrc 文件 新建mypicture.qrc文件,记事本打开 (2)右键选择项目–添加–现有项,选择建立的.qrc文件,此时,项

    2024年02月06日
    浏览(58)
  • 【QT】 QTabWidget&QTabBar控件样式设计(QSS)

    很高兴在雪易的CSDN遇见你 ,给你糖糖 欢迎大家加入 雪易社区-CSDN社区云   本文分享QT控件QTabWidgetQTabBar的样式设计,介绍两者可以自定义的内容,以及如何定义,希望对各位小伙伴有所帮助! 感谢各位小伙伴的点赞+关注,小易会继续努力分享,一起进步! 你的点赞就是我

    2024年01月18日
    浏览(54)
  • 01_1_Qt工程实践_Qt样式表Qss(什么是QSS;基本语法;setStyleSheet函数;样式表的属性值;利用QtCreate实现样式切换;样式表实现皮肤改变实例)

    本篇介绍什么是样式表,讨论如何使用Qt样式表Qss修改应用程序外观,并通过实例进行讲解。 了解HTML的同学都知道,一般在HTML中我们把样式表叫做CSS,在Qt中我们称之为QSS。QSS和CSS并不完全等同,语法完全类似,定义上存在一些差别。 QSS是Qt程序界面中用来设置控件的背景图

    2024年02月16日
    浏览(44)
  • QT界面设计:深入理解QSS样式表设计

    本文详细介绍了QT界面设计中的QSS样式技术,包括QSS样式表的语法、用法、selector设置以及属性列表等内容,帮助你提升审美,打造出令人羡慕的软件界面。

    2024年02月13日
    浏览(48)
  • 【QT入门】 Qt自定义控件与样式设计之QPushButton实现鼠标悬浮按钮弹出对话框

    往期回顾: 【QT入门】 Qt自定义控件与样式设计之qss选择器-CSDN博客 【QT入门】 Qt自定义控件与样式设计之QLineEdit的qss使用-CSDN博客 【QT入门】Qt自定义控件与样式设计之QPushButton常用qss-CSDN博客 鼠标悬浮弹出对话框的功能:最终要实现纯代码设计出一个音量按钮,当鼠标悬浮

    2024年04月23日
    浏览(41)
  • [QT编程系列-39]:用户界面UI - 样式表QSS与样式文件快速入门

    目录 1. 概述 2. CSS 3. QSS示例 4. QT样式表文件使用方法与步骤 5. QT内置样式 6. QT常见基本样式 Qt提供了一种称为Qt样式表(Qt Style Sheets)的机制,可以用于 自定义和美化Qt应用程序的用户界面(UI) 。 使用Qt样式表,你可以通过类似 CSS 的语法来定义UI元素的外观和布局,包括颜

    2024年02月04日
    浏览(48)
  • QT通过styleSheet样式表设置按钮背景图片自适应大小

    默认按钮效果   鼠标移动到按钮上的效果     鼠标按住不放的效果      1.添加背景图片资源

    2024年02月11日
    浏览(71)
  • 【QT】史上最全最详细的QSS样式表用法及用例说明

    Qt样式表支持各种属性、伪状态和子控件,可以自定义小部件的外观。 Widget 如何设置 QWidget 只支持 background , background-clip 和 background-origin 属性。 如果你继承于QWidget,那么你需要为你自定义的QWidget提供一个paintEvent,如下所示: 如果没有进行QSS样式表设置,上面的代码就是一

    2024年02月03日
    浏览(53)
  • qt设置控件的风格样式

    设置tablewidget 设置表头样式 设置Lineedit样式 设置GroupBox样式 设置CheckBox的样式 设置PushButton的样式 设置RadioButton的样式 设置ComboBox的样式 设置Label的样式

    2024年02月14日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包