Qt Ui界面风格的蜕变——样式表qss使用

Qt样式表QSS精讲

最新推荐文章于 2024-03-21 19:33:40 发布

原创

最新推荐文章于 2024-03-21 19:33:40 发布 · 8.9k 阅读

152 ·

CC 4.0 BY-SA版权

文章标签：

#qt5

本文详细介绍了Qt样式表(QSS)的使用方法，包括基本概念、选择器、声明关键字及实例应用。涵盖QSS与CSS的关系，如何在UI界面和程序中设置样式表，以及如何使用监听器和特定选择器。

一、什么是样式表

样式表在Qt中设置的英文名为——StyleSheet().

它是关于文件对标题和正文的默认字体、大小、颜色、前页外观、单个部分的排列间隔、行间距、四周页边距、标题间距离等元素的定义。样式表在电子文档开始时，可以通过插入或者链接进行定义。————百度百科

样式表常用的有CSS和QSS

1、CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。————百度百科

深入了解CSS：https://www.w3school.com.cn/css/index.asp

2、QSS

Qt样式表（Qt Style Sheet）是继承于CSS的Qt独有的样式表。
虽然其功能不足CSS，但是QSS也能够最大满足我们的界面设计需要。

二、如何使用QSS——核心

1、简介

QSS继承于CSS，所以他们的用法大致相同：

QPushButton{
   
   
color:white;
background:red;
}

这段话的意思是基于QPushbutton控件的样式为：字体颜色为白色，背景色为红色。

由此可见，样式表主要包括：

选择器 { 声明1; 声明2; ··· }

常用的声明关键字有：

注意中间的"-"不是"_"

Name	含义
color	字体颜色
font-family	字体款式
font-size	字体大小
background / background-color	背景色
background / background-image	背景图片
border-image	边框内嵌入图片
border	图形大小颜色、边框隐藏
text-align	文本校准
margin	边缘距离
～下面是后续添加高级语法～	～～～～～～～～
border-radius	设置边框四角圆润度
selection-background-color	选中文本背景颜色
lineedit-password-character	密码替代字符

2、ui界面设置样式表

在ui编辑界面，选中主窗口后，在右边的属性栏中翻找 styleSheet。进入后可在此输入样式表内容。

如图：

3、程序调用

当我们创建了一个不带ui界面的工程。那么就可以使用.setStyleSheet(const QString &)函数使用样式表。

看到参数是QString类型，那么我们就可以分两种方法。

1. 直接使用。

这种方法适用于样式表内容较少。

如：

    setStyleSheet("QPushButton{color:white;background:red;}");    
    button = new QPushButton(this);
    button->move(20,30);
    button->setText("me");

效果：

2.文本形式读取

这种方法就适用于内容较多，且不方便在程序中编写。

如：可以是 .txt 文件格式

    QFile file("/Users/yucheng/try/file.css");
    file.open(QIODevice::ReadOnly);
    setStyleSheet(file.readAll());

    button = new QPushButton(this);
    button->move(20,30);
    button->setText("me");

效果一样，不列出。

三、选择器

（1）、选择器

名称	用法	说明
通配选择器	*	其窗口及其内部所有类型组件都配用
类选择器	QPushButton	窗口内同一类的组件都配用
属性选择器	QPushButton[flat=“false”]
类选择器	.QPushButton
id选择器	QPushButton # button	只有特定组件配用
后代选择器	QDialog QPushButton
子选择器	QDialog > QPushbutton

（2）、特定选择器

既然有全部，也有单一选择器。如只将按钮pushButton字体设置成红色，那么

#pushButton{
   
   color:red;}

多个特定：

#pushButton,#pushButton2{
   
   
color:red;
}

注意，如果你确定你的语法和单词都没有拼错的情况下，样式表对特定组件没有生成理想效果。那是因为编译器不知道你特定的名称指的是什么。
所以需要对特定组件起个名字。

	w1 = new QWidget(this);
    w1->setGeometry(0,0,100,100);
    w1->setObjectName("w1");
    setStyleSheet(
            "#w1 {"
            "border: 2px solid red;"
            "border-radius: 3px;"
            "};"
            );