[QT编程系列-39]:用户界面UI - 样式表QSS与样式文件快速入门

目录

1. 概述

2. CSS

3. QSS示例

4. QT样式表文件使用方法与步骤

5. QT内置样式

6. QT常见基本样式


1. 概述

Qt提供了一种称为Qt样式表(Qt Style Sheets)的机制,可以用于自定义和美化Qt应用程序的用户界面(UI)

使用Qt样式表,你可以通过类似CSS的语法来定义UI元素的外观和布局,包括颜色、字体、边框、背景等。

以下是一些常用的Qt样式表属性和用法

  1. 选择器(Selectors):用于选择要应用样式的UI元素,可以使用对象名(object name)或类名(class name)作为选择器,也可以使用通配符和层级选择器。

    QPushButton {color: red;                    // 应用到所有QPushButton类型的按钮
    }QCheckBox#myCheckBox {font-size: 14px;               // 应用到objectName为"myCheckBox"的QCheckBox
    }QLabel.warning {background-color: yellow;      // 应用到class name为"warning"的QLabel
    }
    
  2. 属性设置:可以使用属性和值的形式来设置UI元素的外观。

    QPushButton {color: red;background-color: lightblue;    // 设置文本颜色和背景色border: 1px solid gray;         // 设置边框样式
    }QCheckBox:checked {color: green;                   // 设置选中状态的文本颜色
    }
    
  3. 盒模型属性:可以设置内边距(padding),外边距(margin),以及元素本身的尺寸和位置。

    QPushButton {padding: 5px;margin: 10px;width: 100px;height: 30px;                   // 设置内外边距、宽度和高度
    }QLabel {position: absolute;             // 设置绝对定位top: 50px;left: 100px;
    }
    
  4. 伪状态(Pseudo-states):用于设置特定状态下的样式,如鼠标悬停(hovered)、按下(pressed)等。

    QPushButton:hover {background-color: lightgray;    // 鼠标悬停时的背景颜色
    }QCheckBox:indeterminate {color: orange;                  // 设置不确定状态的文本颜色
    }QRadioButton:checked {image: url(checked.png);        // 设置选中状态时的自定义图像
    }
    

除了上述基本用法,Qt样式表还支持更多高级功能,如渐变、阴影效果、动画和自定义部件样式等

你可以通过在Qt应用程序中设置样式表来改变UI的外观和布局,使其更符合自己的需求和设计。

有关更详细的用法和属性,请查阅Qt文档中关于Qt样式表的部分。

2. CSS

CSS(Cascading Style Sheets)样式表是一种用于描述HTML或XML文档的展示样式的语言。它为网页提供了丰富的样式控制和布局选项,使网页开发人员能够轻松地定义文档元素的外观和排版。

以下是一些常用的CSS样式表属性和用法:

  1. 选择器(Selectors):用于选择要应用样式的HTML元素,可以使用标签名、class、id等作为选择器,也可以使用组合选择器。

    h1 {color: red;                    /* 应用到所有<h1>标签 */
    }.my-class {font-size: 14px;               /* 应用到class为"my-class"的元素 */
    }#my-id {background-color: yellow;      /* 应用到id为"my-id"的元素 */
    }p.my-class-fancy {color: blue;                   /* 应用到同时具有class "my-class-fancy"和<p>标签的元素 */
    }
    
  2. 属性设置:可以使用属性和值的形式来设置元素的外观。

    h1 {color: red;background-color: lightblue;    /* 设置文本颜色和背景颜色 */border: 1px solid gray;         /* 设置边框样式 */
    }.my-class {font-weight: bold;              /* 设置字体粗体 */
    }#my-id {text-decoration: underline;     /* 设置文本下划线 */
    }
    
  3. 盒模型属性:可以设置内边距(padding)、外边距(margin),以及元素本身的尺寸和位置。

    h1 {padding: 10px;margin-top: 20px;width: 300px;height: 50px;                   /* 设置内边距、外边距、宽度和高度 */
    }.my-class {position: absolute;             /* 设置绝对定位 */top: 50px;left: 100px;
    }
    
  4. 伪类(Pseudo-classes):用于设置特定状态下元素的样式,如鼠标悬停(:hover)、点击(:active)等。

    a:hover {color: green;                   /* 鼠标悬停时的文本颜色 */
    }input:focus {border: 2px solid blue;         /* 获得焦点时的边框样式 */
    }li:nth-child(odd) {background-color: lightgray;    /* 设置奇数位置的<li>元素的背景颜色 */
    }
    

CSS样式表还支持更多高级功能,如渐变、阴影效果、动画和媒体查询等。

使用CSS样式表,可以轻松地自定义网页的外观和布局,并使其具有吸引力和良好的用户体验。

对于更详细的属性和用法,请参考CSS的相关文档和教程。

3. QSS示例

以下是一些Qt样式表(QSS)的示例,展示了如何使用QSS来自定义Qt应用程序的UI外观:

  1. 设置全局样式:
/* 设置所有按钮的背景色和文本颜色 */
QPushButton {background-color: lightblue;color: white;
}/* 设置所有标签的字体和字体大小 */
QLabel {font-family: Arial, sans-serif;font-size: 14px;
}/* 设置窗口的背景图片 */
QWidget {background-image: url(background.jpg);background-repeat: no-repeat;background-position: center;
}

  1. 设置特定对象的样式:
/* 设置特定按钮的尺寸、背景颜色和边框样式 */
QPushButton#myButton {width: 100px;height: 30px;background-color: lightgreen;border: 1px solid darkgreen;
}/* 设置特定文本框的字体样式和内边距 */
QLineEdit.myLineEdit {font-family: Verdana, sans-serif;padding: 5px;
}/* 设置特定标签的文本颜色和背景颜色 */
QLabel.warningLabel {color: red;background-color: lightyellow;
}

  1. 使用伪状态和伪类:
/* 设置鼠标悬停时按钮的背景颜色 */
QPushButton:hover {background-color: lightgray;
}/* 设置按下按钮时的背景颜色和文本样式 */
QPushButton:pressed {background-color: darkgray;color: white;
}/* 设置表格中奇数行的背景颜色 */
QTableView QAbstractItemView::item:nth-child(odd) {background-color: lightgray;
}/* 设置选中行的背景颜色和文本颜色 */
QTableView QAbstractItemView::item:selected {background-color: navy;color: white;
}

这些示例只是QSS的一部分用法,其中展示了一些常见的样式设置。你可以根据自己的需求定制和设计Qt应用程序的样式表,以创建独特的UI外观。在应用QSS样式表时,通常需要使用setStyleSheet()函数将样式表应用于Qt对象或整个应用程序。详细的QSS语法和属性,请参考Qt的官方文档和样式表部分。

4. QT样式表文件使用方法与步骤

fangfgnaf在Qt中,你可以将样式表内容保存到一个独立的样式表文件中,然后在应用程序中引用该样式表文件来设置UI的外观。以下是使用样式表文件的步骤:

  1. 创建一个独立的样式表文件,通常使用.qss作为文件扩展名,比如styles.qss

  2. 在样式表文件中编写所需的样式规则,就像在QSS中编写样式一样。

    /* styles.qss */QPushButton {background-color: lightblue;color: white;
    }QLabel {font-family: Arial, sans-serif;font-size: 14px;
    }QWidget {background-image: url(background.jpg);background-repeat: no-repeat;background-position: center;
    }
    
  3. 应用程序中加载样式表文件,并应用于相应的Qt对象或整个应用程序。

    // main.cpp#include <QApplication>
    #include <QFile>int main(int argc, char *argv[])
    {QApplication app(argc, argv);// 创建一个样式表文件对象QFile styleFile(":/styles.qss");  // 根据实际的文件路径或资源路径进行修改if (styleFile.open(QFile::ReadOnly)){// 读取样式表文件内容QString styleSheet = QLatin1String(styleFile.readAll());// 设置样式表app.setStyleSheet(styleSheet);}// ... 创建和显示Qt对象return app.exec();
    }
    

    在上述示例中,styles.qss文件被读取并加载到styleSheet变量中,然后通过setStyleSheet()方法设置为应用程序的样式表:/styles.qss是资源路径,可以根据你的实际情况进行修改。

提示:如果要将样式表文件作为资源文件进行管理,可以在Qt项目中的.qrc文件中添加样式表文件并使用资源路径来引用。

通过使用样式表文件,你可以更好地组织和管理UI的样式规则,方便维护和重用。同时,你可以在不重新编译应用程序的情况下修改样式表文件,使得UI的外观可以灵活地调整和定制。

5. QT内置样式

Qt框架默认提供了几种内置的样式,你可以直接在应用程序中使用它们。

以下是几个常用的Qt现有样式:

  1. Fusion样式(默认样式):这是Qt框架默认的样式,它在不同的操作系统上提供了一致的外观。

  2. Windows样式:这是Windows操作系统的原生外观样式,可以在Qt应用程序中使用。

  3. macOS样式:这是macOS操作系统的原生外观样式,同样可以在Qt应用程序中使用。

  4. WindowsVista样式:仿效Windows Vista风格的外观样式。

  5. WindowsXP样式:仿效Windows XP风格的外观样式。

使用这些样式非常简单,只需在应用程序中设置所需的样式即可。以下是使用内置样式的示例代码:

#include <QApplication>
#include <QStyleFactory>int main(int argc, char *argv[])
{QApplication app(argc, argv);// 设置Fusion样式app.setStyle(QStyleFactory::create("Fusion"));// 设置Windows样式// app.setStyle(QStyleFactory::create("Windows"));// 设置macOS样式// app.setStyle(QStyleFactory::create("Macintosh"));// 设置WindowsVista样式// app.setStyle(QStyleFactory::create("WindowsVista"));// 设置WindowsXP样式// app.setStyle(QStyleFactory::create("WindowsXP"));// ... 创建和显示Qt对象return app.exec();
}

通过调用app.setStyle()方法并使用QStyleFactory::create()函数提供的内置样式之一,可以设置所需的样式。在上述示例中,使用了Fusion样式,你可以注释掉其他样式并选择你希望使用的样式。

除了这些内置样式,Qt还支持通过自定义QStyle子类来创建和使用自定义样式。这样可以实现完全定制的UI外观和行为。

6. QT常见基本样式

在Qt中,你可以使用样式表(Style Sheets)来定制和美化用户界面。以下是一些常见的样式,你可以通过样式表来实现它们:

  1. 背景颜色和背景图片:

    QWidget {background-color: lightblue;background-image: url(image.png);background-repeat: no-repeat;background-position: center;
    }
    
  2. 按钮样式:

    QPushButton {background-color: lightblue;color: white;border-radius: 5px;padding: 5px 10px;
    }
    
  3. 标签样式:

    QLabel {font-family: Arial, sans-serif;font-size: 14px;color: #333333;
    }
    
  4. 文本框样式:

    QLineEdit {padding: 5px;border: 1px solid #999999;border-radius: 3px;
    }
    
  5. 表格样式:

    QTableView {background-color: white;alternate-background-color: #f2f2f2;gridline-color: #cccccc;
    }
    
  6. 进度条样式:

    QProgressBar {background-color: #f0f0f0;border: 1px solid #999999;border-radius: 5px;
    }
    

以上只是一些常见的样式示例,你可以使用更多的CSS属性来实现更复杂的效果。在Qt的样式表中,你可以设置背景颜色、字体样式、边框样式、尺寸和间距等。同时,Qt还提供了更高级的样式定制能力,比如自定义绘制、状态切换和动画效果等。

要应用这些样式,你可以将样式表内容应用于相应的Qt对象,通过调用setStyleSheet()方法或使用Qt Designer界面编辑器。

希望这些常见的样式示例能够帮助你美化你的Qt用户界面。你可以根据实际需求和创意来定制更多独特的样式。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/32383.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android 13 Hotseat定制化修改——002 hotseat图标数量修改

目录 一.背景 二.实践方案 一.背景 由于需求是需要自定义修改Hotseat&#xff0c;所以此篇文章是记录如何自定义修改hotseat的&#xff0c;应该可以覆盖大部分场景&#xff0c;修改点有修改hotseat布局方向&#xff0c;hotseat图标数量&#xff0c;hotseat图标大小&#xff0…

【MySQL安装】卸载与安装MySQL 5.7.X版本

最近由于各种原因&#xff0c;需要重新安装MySQL。之前我的版本是8.0版本&#xff0c;现在装的5.7版本。记录一下自己的安装过程。 目录 1、卸载MySQL8.0 2、安装MySQL5.7 1、卸载MySQL8.0 如何彻底卸载MySQL_mysql 完全卸载_m0小麦麦的博客-CSDN博客相信不少小伙伴们在安装…

EasyPoi导出 导入(带校验)简单示例 EasyExcel

官方文档 : http://doc.wupaas.com/docs/easypoi pom的引入: <!-- easyPoi--><dependency><groupId>cn.afterturn</groupId><artifactId>easypoi-spring-boot-starter</artifactId><version>4.0.0</version></dep…

Linux中无法忘记mysql密码处理办法

找到/etc/my.cnf或者/etc/mysql/my.cnf文件 添加下面两行代码&#xff0c;取消密码验证 [mysqld] skip-grant-table使用命令登录&#xff1a;mysql -u root -p&#xff0c;回车&#xff0c;回车使用sql语句来修改密码 mysql>use mysql; mysql>update user set password…

K-01BFS(2023河南萌新联赛第(五)场:郑州轻工业大学)

链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 来源&#xff1a;牛客网 思路&#xff1a; 直接枚举这个图中的拐点 这个拐点是经过左右平移到上下平移或者上下平移到左右平移 假设这个点事左到右后然后再从下到上 左到右就相当于走了个最长上升子序列&#xff0…

Java基础入门篇——数组初识

一、数组 1.假设某公司有100个员工&#xff0c;需要统计某公司员工的工资情况&#xff0c;首先需要声明100个变量来分别记每个员工的工资&#xff0c;那么如果按照之前的做法&#xff0c;可能定义的结构如下所示&#xff1a; int a1,a2,a3,......a100; 要求你输出这100个员工…

JavaWeb学习|JSTL表达式

1.什么是JSTL表达式&#xff1f; JSTL标签库的使用就是为了弥补HTML标签的不足;它自定义许多标签&#xff0c;可以供我们使用&#xff0c;标签的功能和Java代码一样 在JSP页面文件中使用JSTL表达式&#xff0c;首先需要引入核心标签库 同时&#xff0c;也要把JSTL的jar包在to…

C指针:程序员的神奇箭头,穿越内存的冒险之旅!

目录 &#x1f575;️‍♂️ 引言&#xff1a;指针&#xff0c;那些指向星星的小箭头&#xff01; 一、&#x1f3af; 探索箭头&#xff1a;指针的基础知识 1.1 指针是什么&#xff1f; 1.2 解引用操作符&#xff1a;* 是关键 1.3 指针的比较和运算 1.4 空指针&#xff1a…

深度使用苹果M1 Mac电脑一个月后的发现与问题解决

自从苹果推出M1芯片的Mac电脑后&#xff0c;其强大的性能和高效的能耗管理引起了广泛关注。许多人纷纷购买了这款新一代的Mac电脑&#xff0c;并深度使用了一个月。然而&#xff0c;在长时间使用的过程中&#xff0c;一些问题也逐渐浮现出来。本文将分享在深度使用苹果M1 Mac电…

进程的调度

文章目录 一、进程的调度过程二、进程调度的一些特点 一个正在执行的程序叫做进程。操作系统会把程序调度到CPU上&#xff0c;让CPU执行程序&#xff0c;此时这个程序就变成了进程。相当于程序在CPU上执行时叫进程&#xff0c;程序没有在CPU上执行时就叫程序。 一、进程的调度过…

ucharts使用

官方地址&#xff1a; https://www.ucharts.cn/v2/#/tool/index 码云地址&#xff1a;码云地址 他官方文档有些地方写的比较模糊&#xff0c;有的还需要付费 地图 详情参见&#xff1a;

初始C语言——详细讲解操作符以及操作符的易错点

系列文章目录 第一章 “C“浒传——初识C语言&#xff08;更适合初学者体质哦&#xff01;&#xff09; 第二章 详细认识分支语句和循环语句以及他们的易错点 第三章 初阶C语言——特别详细地介绍函数 第四章 初始C语言——详细地讲解数组的内容以及易错点 第五章 初始C语言—…

HTML页面生命周期详解

前言 在使用vue的时代本次项目有个需求&#xff0c;就是需要在静态资源未加载时获取当前页面的访问路径&#xff0c;所以需要对html页面的生命周期要有所了解。本次讲讲HTML页面的生命周期事件&#xff0c;希望对大家有所帮助。如果文中有不对、疑惑的地方&#xff0c;欢迎在评…

20230809在WIN10下使用python3批量将TXT文件转换为SRT文件

20230809在WIN10下使用python3批量将TXT文件转换为SRT文件 2023/8/9 17:30 由于喜欢看纪录片等外文视频&#xff0c;通过剪映/PR2023/AUTOSUB识别字幕之后&#xff0c;可以通过google翻译识别为简体中文的DOCX文档。 DOCX文档转换为TXT文档之后&#xff0c;还需要转换为SRT文档…

CentOS7安装MySQL8(RPM方式)

第一步&#xff1a;解压 tar -xvf mysql-8.0.34-1.el7.x86_64.rpm-bundle.tar -C /usr/local/java/mysql 第二步&#xff1a;按顺序安装rpm包 # rpm -ivh mysql-community-common-8.0.34-1.el7.x86_64.rpm# rpm -ivh mysql-community-client-plugins-8.0.34-1.el7.x86_64.rpm…

【PythonRS】植被显示增强(多光谱、正射、照片等)

很多时候我们需要某个区域的正射图&#xff0c;虽然正射图一般都运用了匀色的算法&#xff0c;整体色彩比较均衡。但如果研究区内有大量的植被&#xff0c;这个时候植被突出显示就很有必要了。所以今天给大家分享一下使用Python对多光谱、正射影像进行植被显示增强的算法。 一、…

【学习FreeRTOS】第2章——FreeRTOS基础知识

1.任务调度 1.1.任务调度简介 调度器就是使用相关的调度算法来决定当前需要执行的哪个任务FreeRTOS 一共支持三种任务调度方式&#xff1a; 抢占式调度&#xff1a;针对优先级不同的任务&#xff0c;每个任务都有一个优先级&#xff0c;优先级高的任务可以抢占优先级低的任务…

(3)原神角色数据分析-3

绘图类 在名为“WRITEPHOT.py”的文件中&#xff0c;定义如下绘图方式&#xff0c;则在主页面(app.py)文件中&#xff0c;可通过如下方式调用&#xff1a; from WRITEPHOTO import WriteScatter,WriteFunnel,WriteBarData,WritePie,WriteLineBar 代码如下&#xff1a; "…

【前端】CSS垂直居中的7种方法

文章目录 line-height绝对定位margin:autoflex绝对定位margin:负值定位transformvertical-align:middledisplay:table-cell思维导图 前文&#xff1a;【前端】CSS水平居中的6种方法_karshey的博客-CSDN博客 有很多相似的部分。 line-height 适用于单行的行内元素设置line-he…

N皇后算法的思路是什么?

N皇后问题是经典的回溯算法问题&#xff0c;其目标是在一个NxN的棋盘上放置N个皇后&#xff0c;使得它们彼此之间不能互相攻击&#xff0c;即任意两个皇后都不在同一行、同一列或同一斜线上。 算法的思路如下&#xff1a; 使用递归函数来解决问题。递归函数的参数通常包括当前…