美文网首页
QSS 改变样式表

QSS 改变样式表

作者: 有事没事扯扯淡 | 来源:发表于2020-11-07 16:30 被阅读0次

官网的样式表链接:http://doc.qt.io/archives/qt-4.8/stylesheet.html
各种控件的样式:http://doc.qt.io/archives/qt-4.8/stylesheet-reference.html
QSS语法:http://www.w3school.com.cn/css/css_syntax.asp

基本QSS语法

background-color:rgb(6, 168, 255);      背景色
color:red;                  字体颜色
border-radius:5px;              边框圆角半径
border:2px solid green;         边框2像素,实现,绿色
font:10pt;               字体大小10

改变样式表的方法

1. UI控件右键

2. 程序添加

每一个控件都有setStyleSheet(const QString &styleSheet)方法,样式字符串直接传参即可,例:

ui.pushButton->setStyleSheet("QPushButton{background-color: white;  color: rgb(100, 100, 100) ;}");

3. 添加QSS文件

新建文件StyleSheet.qss文件,添加内容如下:

/*按钮静止无操作样式*/
QPushButton 
{
    background-color:rgb(255,255,255); 
    color:rgb(6,168,255); 
    border:2px solid rgb(6,168,255); 
    font-size:14px; 
    border-radius:10px;
}

/*鼠标悬停在按钮*/
QPushButton:hover
{
    background-color: rgb(212,243,255); 
    color:rgb(6,168,255);
    border:2px solid rgb(6,168,255); 
    border-radius:14px;
}

/*鼠标按下按钮*/
QPushButton:pressed
{
    background-color: rgb(175,232,255); 
    color:white; 
    border:2px solid rgb(6,168,255); 
    border-radius:14px;
}

读取配置文件设置指定按钮样式:

StyleDialog::StyleDialog(QWidget *parent) : QDialog(parent)
{
    ui.setupUi(this);
    QString strStyle = ReadQssFile("StyleSheet.qss");
    ui.pushButton2->setStyleSheet(strStyle);
}

QString StyleDialog::ReadQssFile(const QString& filePath)
{
    QString strStyleSheet = "";
    QFile file(filePath);
    file.open(QFile::ReadOnly);
    if (file.isOpen())
    {
        strStyleSheet = QLatin1String(file.readAll());
    }
    return  strStyleSheet;
}

实际项目中一般qss文件直接添加到资源里面,一起打包到EXE文件中

4.QSS对应多个控件(Selector)

一个UI界面有很多控件,使用一个qss文件来指定样式时,可以使用Selector来分别设置控件的样式

  1. 属性覆盖:一个qss文件里,后面定义的style会覆盖先前的style。

  2. 同一行中多个类型需要用逗号分隔

QPushButton, QLineEdit, QCheckBox
{
    background: color: black;
}
  1. 属性分类

例如:有6个PushButton控件,3个设置为样式一,另外三个设置为样式二

方法一:

设置前3个控件的whatsThis为style1,后三个控件为style2

修改StyleSheet.qss文件内容:

QPushButton[whatsThis="style1"]
{
    background-color: rgb(63,141,215);
    color:green;
}
QPushButton[whatsThis="style2"]
{
    background-color: rgb(63,141,215);
    color:red;
}

方法二:

直接在qss文件里指定object name,不推荐这种方式,6个控件需要些六遍,分别指定object name。

QPushButton#pushButton1
{
    background-color: rgb(63,141,215);
    color:red;
}

最后在程序的入口函数设置如下代码:

QApplication a(argc, argv);

StyleDialog styleDialog;
a.setStyleSheet(styleDialog.ReadQssFile(":/qtlearn/Resources/StyleSheet.qss"));

[参考链接]
https://blog.csdn.net/qq_31073871/article/details/79943093
https://www.cnblogs.com/woniu201/p/10601671.html

相关文章

  • QSS 改变样式表

    官网的样式表链接:http://doc.qt.io/archives/qt-4.8/stylesheet.html...

  • QSS

    1 QSS概述 QSS(Qt Style Sheets)是Qt的样式表,为Qt提供许多的属性、伪状态、子控件等机制...

  • 推荐一款QSS实时编辑器

    QSS Editor是用于编辑和实时预览Qt样式表的工具。 下载地址 https://sourceforge.ne...

  • Qt控件之样式表(QSS)

    声明:本文章内容,仅仅是为了方便自己以后回来查看,因此会持续更新,不断收录! 一、QTabWidget QTabW...

  • Qt 中的样式表 QSS

    一、加载 QSS 1 在 setStyleSheet() 函数中加载 Widget 的对象调用 setStyleS...

  • Qt常用QSS集合

    Qt拿来画控件还是很方便的,其中除了重写paint() 函数外,最常用的就是控件的样式表qss了。本文简单介绍下Q...

  • aaccz

    qss

  • Spring Boot多数据源配置

    1、application.properties中配置多数据源 # qss数据库 datasource.qss.d...

  • qss

    https://blog.csdn.net/qq21497936/article/details/79401577...

  • QSS

    效果图: 上面示例展示出原生态样式,灰蒙蒙不好看。那么用QSS对外形样式进行改造,我们将所有的样式语句放到一个*....

网友评论

      本文标题:QSS 改变样式表

      本文链接:https://www.haomeiwen.com/subject/uaxqbktx.html