qt5系统教程(一)实现自定义用户样式
发布日期:2021-05-27 01:23:48 浏览次数:25 分类:精选文章

本文共 1306 字,大约阅读时间需要 4 分钟。

窗口自定义用户样式

要想让你软件界面更加个性化,你可以借助CSS样式表进行自定义。以下是具体步骤指引:

找到样式表的位置

方法一:从 toolbar(工具栏)右键点击,选择"Modify Style"(更改样式)。

方法二:打开样式表文件(通常位于窗口右下角,默认文件名为style.xul)。

然后,复制下列代码到样式表文件中,点击确定后,新打开的窗口会显示黄色背景框架。

border: 2px solid gray;border-radius: 10px;padding: 0 8px;background: yellow;

添加三个按钮并尝试更改其样式

从 left toolbar(左侧工具栏)拖拽三个按钮到界面上,右侧对象栏会显示每个按钮的默认名称和类别。

批量应用样式:在主页面,右键点击并选择"Modify Style",然后在样式编辑器中输入以下代码:

QPushButton {    border: 2px solid gray;    border-radius: 10px;    padding: 0 8px;    background: yellow;}

这样所有按钮都会继承相同的样式。

仅对部分按钮应用样式

如果需要为某个特定按钮设置不同的样式,可以直接对其进行修改。你可以手动选择特定按钮,或者在主样式表中输入更具体的选择器。

QPushButton#pushButton_3 {    border: 2px solid gray;    border-radius: 10px;    padding: 0 8px;    background: yellow;}

应用多个样式

为了进一步个性化,你可以对同一个元素应用多种样式。例如,可以对所有元素设定基础样式,然后针对特定元素进行调整。

* {    background: qradialgradient(cx: 0.3, cy: -0.4, fx: 0.3, fy: -0.4, radius: 1.35, stop: 0 #fff, stop: 1 #888);    color: rgb(255, 255, 255);    border: 1px solid #ffffff;}QPushButton {    color: red;    border: 0px;    padding: 0 8px;    background: white;}QPushButton#pushButton_2 {    border: 1px solid red;    border-radius: 10px;}QPushButton#pushButton_3 {    border: 2px solid gray;    border-radius: 10px;    padding: 0 8px;    background: yellow;}

注意事项

  • 如果需要取消样式设置,可以直接删除样式表中的代码。
  • 某些样式会影响所有控件,请根据需要调整。

通过以上步骤,你可以根据需求个性化地设计软件界面样式。

上一篇:QT5系列教程二---基于qcustomplot的QT5 GUI串口收发绘图软件实现
下一篇:win10 + vscode + qt5 开发环境初探与开始第一个例程

发表评论

最新留言

很好
[***.229.124.182]2025年05月03日 03时00分37秒