Qt之可视化QSS生成器(初探)

简述

QSS是Qt的样式表,类似于CSS,目前主要支持CSS2。

写代码调样式非常不直观,因此需要一个所见即所得的可视化样式生成器,网上有很多CSS样式生成器,最适合网页开发人员的10款CSS代码生成器里面介绍了一些常用的CSS样式生成器,但是CSS和QSS毕竟不完全一样,所以生成的代码需要修改,这些修改的工作量也是不小的。Qt大神刘典武先生写了一个皮肤生成器,该生成器可以快速地生成整套皮肤,着实方便,但只有那几种皮肤,而且不开源,只能作为外观设计参考。CSDN博主hustlei写的QssStyleSheet在QssEditor的基础上增加了属性提示以及定义变量的功能,而且是开源的,挺好用的,可以了解一下。其它一些广为人知的qss编辑器如QssEditorRizek Qss Editor等都有这样或那样的缺点,不太好用。

前面介绍的都是Qss编辑器,也就是需要手写样式表,我打算开发一个可视化QSS生成器,效果如下所示:

上面展示了阴影效果的可视化设计。Qt默认是不支持box-shadow效果的,上面的按钮是自定义的,如何自定义见Qt之QGraphicsDropShadowEffect

软件框架

顶层

Widget内部放置了两个控件,QListWidget用于展示各个控件种类标签,QStackedWidget用于展示每个标签所对应的页面。

大概效果就像这样:

这是Qt Creator中的options面板。

QStackedWidget层

在该层中,QStackedWidget会包含很多自定义的Tab控件,如ButtonsTab,ContainersTab,InputWidgetsTab,DisplayWidgetsTab等等。每一个Tab都是一个继承自QTabWidget的自定义TabWidget。

ButtonsTabWidget层

以ButtonsTabWidget为例,该TabWidget包含了一系列TabPage,如下所示:

每一个TabPage页用来生成一个具体的控件样式。例如,PushButtonPage用来生成PushButton样式。

PushButtonTabPage层

PushButtonTabPage中包含一个MyPushButton自定义按钮和一个PushBtnStyleTabWidget,后者用来输出按钮样式表字符串。在PushButtonTabPage的构造函数中用connect将PushBtnStyleTabWidget的样式字符串信号连接到MyPushButton的样式表设定函数,如下所示:

connect(styleTab, &PushBtnStyleTabWidget::styleChanged, pushBtn, &MyPushButton::setQSS);

每当用户进行参数调整,都会触发PushBtnStyleTabWidget的styleChanged信号。

PushBtnStyleTabWidget层

控件样式分为不同状态下的样式,以PushButton为例,有正常状态、按下状态、悬浮状态以及选中状态。每种状态的样式都需要分别设计,所以就需要多个页面。

每一个页面都有相应的信号函数用来发送样式字符串,需要在PushBtnStyleTabWidget种将这些信号与相应的槽连接起来以处理并形成总的按钮样式字符串,并触发styleChanged信号来传递样式字符串。

NormalStyleTabPage层

NormalStyleTabPage种包含着各种样式调整控件。在用户进行调整动作时,这些控件会发出相应的样式字符串信号。通过信号槽绑定,NormalStylePage中的槽函数会处理这些信号并合成一个正常状态的样式字符串,同时触发normalStyleChanged信号来传递样式字符串。

把上面的内容连起来如下图:

最终效果图

源码地址

https://github.com/YinShiJiaX/QSSGenerator

总结

上面以PushButton为例介绍了整个软件的基本框架。样式修改的动作流程大概是这样的:样式控件发出最小样式字符串,NormalStylePage将这些最小样式字符串收集起来组成正常状态样式字符串并发给PushBtnStyleTabWidget,PushBtnStyleTabWidget将各种状态样式字符串收集起来并发给按钮用于设置样式。

### 回答1: PyQt QSS生成器是一种工具,可以帮助开发者快速创建自定义的QSS样式表。QSS可以简单地理解为Qt样式表,用于定义和控制Qt应用程序中各种UI元素的外观和风格。PyQT QSS生成器基于简单易用的图形用户界面,用户可以通过简单的拖放操作和选项设置来自定义界面、控件和元素的样式,并生成QSS样式表代码。 PyQt QSS生成器提供了大量的选项和控制,以满足各种开发需要和设计要求。例如,用户可以更改窗口的背景颜色、文本颜色、字体样式、边框和图标,设置按钮的悬停和选中状态,自定义选项卡和菜单的外观,以及其他UI元素的各种属性。 此外,PyQt QSS生成器还具有实时预览功能,可以让用户在实际运行应用程序之前,预览和调整样式表的各个方面,以确保其符合需求和期望。最终,用户可以将生成的QSS样式表应用到其Qt应用程序中,从而创建出与众不同的界面效果和用户体验。 总之,PyQt QSS生成器是一款功能强大、易于使用的工具,使开发人员可以快速创建自定义的Qt样式表,从而为其应用程序提供独特的外观和风格。 ### 回答2: PyQt QSS生成器是一款基于PyQt框架的工具,可以帮助用户快速生成QT样式表(QSS)文件。 QSS是一种用于Qt界面设计的样式表语言,类似于CSS。使用QSS可以实现Qt的界面美化,使得应用程序更加美观和易于使用。 PyQt QSS生成器提供了简单易用的用户界面,用户可以通过拖拽、复制、粘贴等方式快速创建QSS文件。同时,该工具还提供了丰富的样式模板、颜色选择器、字体选择器等功能,可以帮助用户快速定制界面样式。 此外,PyQt QSS生成器还支持实时预览功能,用户可以随时查看当前的修改效果,方便用户快速调整样式。 总之,PyQt QSS生成器是一款非常实用的工具,可以帮助QT界面设计者快速创建精美的QSS样式表。 ### 回答3: pyqt qss生成器是一种用于快速创建Qt样式表的工具。Qt样式表是一种基于CSS样式表语法的文件,用于自定义Qt界面控件的外观和行为。 使用pyqt qss生成器可以在用户友好的界面中轻松创建和修改Qt样式表。它提供了各种控件的样式属性和示例,用户可以通过简单的拖放来更改各个属性的值。还可以通过内置的预览功能立即查看更改后的控件外观。 pyqt qss生成器还提供了一些其他的实用功能,例如导出生成的样式表文件、快速恢复到默认样式、导入其他人的样式表等。 使用pyqt qss生成器,开发者可以轻松创建和修改Qt界面的样式表,从而使他们的应用程序界面更加美观、易于使用,并提供了更好的用户体验。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值