Qt样式表美化UI界面

在这里插入图片描述

1 样式表语法(The Style Sheet Syntax)

1.1 样式表的规则(Style Rules)

一个样式规则由选择器和声明组成

  • 选择器指定哪些小部件受规则影响。
  • 声明指定应该在小部件上设置哪些属性。

1.2 选择器类型(Selector Types)

  • 通用选择器(Universal Selector)
    格式:*{属性:值}
    注:*表示匹配程序中所有的控件。
	this->setStyleSheet("*{color:red;}");

在这里插入图片描述

  • 类型选择器(Type Selector)
    格式:类名{属性:值;}
    注:匹配所有该类以及派生类对象。
	this->setStyleSheet("QPushButton{color:red;}");	

在这里插入图片描述

  • 类选择器(Class Selector)
    格式:类名{属性:值;}
    注:匹配所有该类对象,但不匹配其派生类对象。
	this->setStyleSheet(".QPushButton{color:red;}");
  • ID选择器(ID Selector)
    格式:#id{属性:值;}
    注:id指objectName。
	this->setStyleSheet("#okBtn{color:red;}");

在这里插入图片描述

  • 后代选择器(v)
    格式:选择器1 选择器2{属性:值}
    注:在选择器1匹配的所有对象中,找到选择器2所匹配的所有后代对象,并给他们设置。
	this->setStyleSheet("MainWindow QPushButton{color:red;"
                        "font-size:20px;"
                        "padding:Opx}");

在这里插入图片描述

  • 多个选择器多个声明属性
	this->setStyleSheet("QPushButton,QLineEdit{"
                        "color:red;"
                        "background-color:rgb(0,0,0);}");

在这里插入图片描述

1.3 辅助控制器(Sub-Controls)

对于一个复杂控件,在设置样式时,只想对控件的一个部分进行单独设置,此时,需要辅助控制器。
格式:类名::控件中的小控件

    this->setStyleSheet("QCheckBox::indicator{"
                        "width:30px;"
                        "height:30px}");

运行前:
在这里插入图片描述
运行后:
在这里插入图片描述

1.4 伪状态(Pseudo-States)

样式表可根据窗口部件的各个状态来设置窗口。

	this->setStyleSheet(" QPushButton:hover { color: red }");

当鼠标移动到按钮上,按钮的字体色变成红色。
鼠标未放上去:
在这里插入图片描述
鼠标放上去:
在这里插入图片描述

2 查找控件属性(Qt Style Sheets Reference)

在这里插入图片描述
在这里插入图片描述

3 定制皮肤

[1]qApp是个单例模式
	#define qApp (static_cast<QApplication *>(QCoreApplication::instance()))	
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QFile file(":/res/qss/myqss.qss");
    file.open(QIODevice::ReadOnly);
    QString css = QLatin1String(file.readAll());

    qApp->setStyleSheet(css);

    MainWindow w;
    w.show();

    return a.exec();
}

myqss.qss

QMainWindow
{
color:#000000;
background-color: #80ff80;
}

QPushButton
{
color:#00ff00;
border: 1px solid #ffff00;
font-style: italic;
font-size: 12px;
}

QPushButton:pressed
{
color:#00ff00;
background-color: #ffffff;
}

QWidgt:item:hover
{
color:#ff0000;
background-color: #ffffff;
}

如果报错误Could not parse application stylesheet,
首先看qss文件是否有语法错误。
第二当导入其他项目时,出现这个问题。解决的办法是把这个项目之前编译输出的文件全部删掉,也就是Debug和Release文件夹下的所有文件,但是Debug和Release文件不要删掉,否则会不能编译。

相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页