首页 > 其他分享 >使用QSS美化qt界面

使用QSS美化qt界面

时间:2023-12-14 11:48:30浏览次数:29  
标签:qss Qt QSS QPushButton border 选择器 美化 qt

Qt官方文档详细讲述了QSS文件的编辑格式和编辑方法:样式表语法 |Qt 4.8版本

而询问chatGPT也可以得到如下示例(参照官方文档进行了修改):

/* 注释:这是QSS文件的注释 */

QWidget {
    background: gray /* 设置所有QWidget的背景颜色 */
    color: #333; /* 设置文字颜色 */
    font-family: Arial, sans-serif; /* 设置字体 */
}

QPushButton {
    background: rgba(100,100,100,150); /* 设置QPushButton的背景颜色 */
    color: white; /* 设置按钮文字颜色 */
    border: 2px solid #4CAF50; /* 设置按钮边框 */
    border-radius: 5px; /* 设置按钮边框的圆角半径 */
    padding: 5px 10px; /* 设置按钮内边距 */
}

QLineEdit {
    border: 1px solid #ccc; /* 设置QLineEdit的边框样式 */
    border-radius: 3px; /* 设置边框的圆角半径 */
    padding: 3px; /* 设置内边距 */
}

/* 定义其他样式... */

如果要对某个复杂部件中的小组件进行样式修改、或者修改某个部件在不同状态下的样式,也可以通过类似的格式进行指定。下面时官方文档里的案例,展示菜单栏的项目处于选中状态或者菜单栏的图标被选中时的应显示的样式。

QMenu::item:selected {
    border-color: darkblue;
    background: rgba(100, 100, 100, 150);
}

QMenu::icon:checked { /* appearance of a 'checked' icon */
    background: gray;
    border: 1px inset gray;
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    left: 1px;
}

关于qt中qss的属性、伪状态、子控件,有大佬已经作了详尽的整理,这里就直接引用了。

QSS 子控件集合-CSDN博客

QSS 伪状态集合_qss伪状态-CSDN博客

QSS 属性类型集合-CSDN博客

需要注意的是,创建qss文件不要使用windows下的记事本,推荐使用Notepad++或更高级的编辑器,否则可能会出错。原因是记事本生成的utf-8文件是带bom,即在文件开始的地方插入三个不可见的字符(0xEF 0xBB 0xBF)。这是一段隐藏的字符,用于让记事本等编辑器识别这个文件是否是以UTF-8编码。记事本无法去掉这三个隐藏字符,但Notepad++可以。

 

如何创建qss文件并添加样式(以下内容参考了博客初学Qt不会样式表怎么办,打包好的Qt样式表一键生成送给你。-CSDN博客

首先创建一个qss后缀的文件,并依照格式写入需要的代码。

然后将这个文件作为资源文件加载到qt中,具体过程为添加新文件中选择模板->Qt->Qt Resources File然后选择创建的文件。

然后在项目的构造函数中编写如下代码:

    QString qss;
    QFile qssFile("你的文件的相对地址/你的文件.qss");
    qssFile.open(QFile::ReadOnly);
    if(qssFile.isOpen())
    {
        qss=QLatin1String(qssFile.readAll());
        qDebug()<<qss;
        this->setStyleSheet(qss);
        qssFile.close();
    }

最后在Qt Creator中左边栏界面选择“项目”,在“Project Settings”中选择“编辑器”,确认在“文件编码”栏目中UTF-8 BOM的选项为“目前存在了则保留”即可。

 

关于选择器。

除了直接指定样式生效的控件类型,还可以通过其他一些手段来选择样式生效的对象,这些都是选择器。Qt官方文档介绍了一些最有用的选择器,Qt样式表支持CSS2中定义的所有选择器。文档链接在后面:选择 (w3.org)

常用的选择器有:

1.通用选择器(*),用于匹配所有的控件

2.类型选择器(控件类名,比如QPushButton) 会匹配控件类及其子类的实例

3.后代选择器(QFrame QPushButton) 匹配所有QPushButton实例,它们是QFrame的后代。

4.子代选择器(QFrame>QPushButton)匹配QFrame直接子代中的所有QPushButton。

5.ID选择器(QLabel#label)匹配对象名称为label的所有QLabel实例,由于ID的独特性所以可以省略这里的QLabel

6.类选择器(.QPushButton) 匹配QPushButton的实例,但不匹配其子类的实例。

7.属性选择器(QPushButton[flat="false"])用于在同一个类型下展现两种不同的实现效果,比如a类flat置true,b类置false,然后分派不同的样式

 

声明就是{}里的内容,用于指定具体的样式属性。

官方文档,包含详细的伪状态,属性清单。Qt Style Sheets Reference | Qt 4.8

 

以下内容来自该博客:Qt界面美化QSS——(二)盒子模型(Box Model)_qt box model-CSDN博客

使用样式表时,每个widget都被视为包含四个同心矩形的框:边距矩形(margin rectangle)、边框矩形(border rectangle)、填充矩形(padding rectangle)和内容矩形(content rectangle)。盒子模型如下图所示:

 边距(margin)、边框(border)宽度和填充(padding)属性都默认为零。在这种情况下,所有四个矩形(边距、边框、填充和内容)完全重合。

 

Qt 的绘制的步骤如下:

  1. 为整个渲染操作设置剪辑(border-radius)。
  2. 绘制背景(background-image)。
  3. 绘制边框(border-image,border)。
  4. 绘制叠加图像(image)。

标签:qss,Qt,QSS,QPushButton,border,选择器,美化,qt
From: https://www.cnblogs.com/forever3329/p/17900863.html

相关文章

  • 使用Python和Qt6(PySide6)创建GUI应用1简介
    1简介在本书从GUI开发的基本原理逐步过渡到使用PySide6创建您自己的、功能齐全的桌面应用程序。1.1GUI简史图形用户界面(GUIGraphicalUserInterface)历史悠久,可追溯到20世纪60年代。斯坦福大学的NLS(ON-Line系统引入了鼠标和窗口概念,并于1968年首次公开展示。随后,施乐公司......
  • C++ Qt开发:Slider滑块条组件
    Qt是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍Slider滑块条组件的常用方法及灵活运用。当涉及到C++Qt开发中的Slider滑块条组件时,你可能会用到......
  • 基于PyQt和websocket,制作一个简单的BiliBili弹幕机(大体思路)
    前言从B站上获取直播弹幕的方式大体有两种,一种是通过调用下面这个接口,通过轮询获取importrequestsroom_id=123456#示例url='https://api.live.bilibili.com/xlive/web-room/v1/dM/gethistory'headers={'User-Agent':'Mozilla/5.0(WindowsNT10.0;Win64......
  • C++ Qt开发:CheckBox多选框组件
    Qt是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍CheckBox单行输入框组件的常用方法及灵活运用。QCheckBox是Qt中用于实现复选框的组件,它提供了......
  • Qt小知识2.Q_GLOBAL_STATIC
    1了解Q_GLOBAL_STATICQ_GLOBAL_STATIC是Qt中提供的一个宏,用于创建跨越多个文件的全局静态对象。其主要作用在于两点:懒惰初始化(Lazyinitialization):它确保全局静态对象只有在首次使用时才被创建,而不是在程序启动时立即创建,从而可以减少程序启动时的初始化开销。线程安全(......
  • 博客园美化:光明/暗黑模式自动切换参考
    我的博客主题是SimpleMemory。浏览器浅色时代码主题xcode,深色时代码主题为hybrid,字体为Consolas。你现在看到的我的博客就是使用了暗黑和光明模式自动切换,会根据浏览器的主题自动识别。自动识别的关键CSS代码为:/*Lightmode*/@media(prefers-color-scheme:light){}/*......
  • C++ Qt开发:RadioButton单选框分组组件
    Qt是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍QRadioButton单选框组件以及与之交互的QButtonGroup类的常用方法及灵活运用。QRadioButton是Qt框......
  • iMX287A嵌入式Qt环境搭建
    原文:https://zhuanlan.zhihu.com/p/111021921?utm_id=01.嵌入式Qt简介Qt是一个跨平台的应用程序开发框架。使用Qt开发的应用程序,只需要编写一套代码,然后把这套代码放在不同平台的Qt环境去编译,就会生成可以运行在对应平台的应用程序。例如,我在Windows写了一个串口助手,这套代......
  • ubuntu安装qt4.8.6
    转载(https://blog.csdn.net/qq_26849933/article/details/127115646)文章目录前言一、查看GCC版本二、QT4库安装下载降低GCC编译器版本前期介绍具体实施QT4详细安装步骤参考链接前言ubuntu18.04及以后的版本(20.04,22.04)在编译QT4库的时候会报错,无......
  • 将QWebEngineView添加到QStackedWidget或QTabWidget中导致切换按钮失效的解决方案
    问题描述:将QWebEngineView添加到QStackedWidget或QTabWidget中导致切换按钮失效,如果只有两个来回切的话,是没有问题的,当出现多个页面的时候,就会切换失灵。解决思路:将QWebEngineView浮到上面,只要实现大小、位置、显示隐藏与主页面同步即可。 QWebEngineView窗口构造窗口添加:se......