篇一:重点如下
1.以下是一些常用的stylesheet属性和示例:
- color: 设置文本颜色,例如"color: blue;"
- background-color: 设置背景颜色,例如"background-color: yellow;"
- font: 设置字体,例如"font: bold 12px;"
- border: 设置边框,例如"border: 1px solid black;"
- padding: 设置内边距,例如"padding: 5px;"
2、语法
注意:此处的语法格式同 CSS,使⽤键值对的⽅式设置样式。其中键和值之间使⽤ :
分割,键值对之间使⽤;分割
3、Selector
一个UI界面有很多控件,使用一个qss文件来指定样式时,可以使用Selector来分别设置控件的样式
1.属性覆盖,一个qss文件里,后面定义的style会覆盖先前的style。
2.同一行中多个类型需要用逗号分隔。
QPushButton, QLineEdit, QCheckBox { background: color: black; }
3.属性分类
例如:有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; }
4、QSS中注释的方法是使用/*
和*/
来包围注释内容。这种注释格式与CSS中的注释格式相同,
不允许使用//
来表示注释!!
一、setstylesheet设字体
1、setstylesheet是一种在Qt框架中用于预定义控件外观的样式表。使用Qt的setstylesheet属性,我们可以自由地为控件定制样式,从而使它们在视觉上更加丰富和美观。
2、在setstylesheet中设字体需要使用font-family属性,如下所示:
QLabel {
font-family: 微软雅黑;
}
3、在这个例子中,我们为QLabel控件指定了“微软雅黑”字体,也可以在样式表中设置其他字体,如宋体、黑体等。
二、setstylesheet设置背景颜色
1、使用setstylesheet,设置控件背景色非常简单,只需使用background-color属性即可,例如:
QWidget {
background-color: #BFEFFF;
}
2、这里,我们为所有QWidget控件设置了浅蓝色的背景色,颜色值为#BFEFFF。根据需要,也可以设置其他颜色,如红色、绿色、黄色等。
三、stylesheet是什么意思
1、在Qt框架中,stylesheet是一种样式表,用于指定控件的外观和样式。样式表是一种CSS(Cascading Style Sheets)的变体,用于为HTML、XML和Qt控件等元素定义样式。
2、与传统的编程方式相比,使用样式表可以使UI样式更容易维护和修改,因为我们可以将UI控件的样式从UI定义中分离出来,并将样式表嵌入到应用程序中。
四、setstylesheet设边框
1、边框是UI控件样式中的重要组成部分。在setstylesheet中,我们可以使用border属性来设定边框,如下所示:
QPushButton {
border: 2px solid black;
}
2、在这个例子中,我们为所有QPushButton控件设置了黑色边框,线宽为2像素。除黑色之外,我们还可以为边框设置其他颜色,如红色、绿色等。
五、setstylesheet设调色板
1、调色板(palette)是一种系统级对象,用于控制应用程序和UI控件的颜色、字体等属性。在setstylesheet中,我们可以通过设置控件的palette属性,来改变控件的颜色。例如:
QPushButton {
palette: dark;
}
2、在这个例子中,我们为所有QPushButton控件设置了暗色调的调色板,这会改变按钮的颜色方案,使其更加突出。根据需要,我们也可以设置其他的调色板方案,如亮色调、彩色调、灰色调等。
六、setstylesheet实现动态效果
1、除了静态的UI样式,setstylesheet还可以用于实现动态效果。例如,我们可以在用户鼠标悬停在一个按钮上时,改变按钮的背景色和前景色:
QPushButton:hover {
background-color: red;
color: white;
}
2、在这个例子中,我们定义了一个伪类:hover,当用户将鼠标悬停在QPushButton上时,将其背景色设置为红色,并将文字颜色设置为白色。这种效果可以使应用程序更具互动性和反应能力。
七、setstylesheet的局限性
1、尽管setstylesheet在为应用程序增加样式和艺术感方面做得很出色,但它仍然有一些局限性。setstylesheet只能应用于Qt自带的控件,而不能用于自定义控件。
2、此外,由于setstylesheet是通过Qt的QSS解析器来解析样式表,因此在某些情况下可能会导致性能下降和资源浪费。
八、总结
1、setstylesheet是一个强大的控件样式设置工具,可以用来为应用程序增加样式和艺术感,提高用户体验和应用程序质量。
2、通过掌握setstylesheet的使用方法,我们可以轻松地定制控件的样式,从而为用户呈现出更具视觉冲击力的UI效果。
3、当然,我们也需要意识到setstylesheet的一些局限性和注意事项,以便在实际开发中更加灵活和高效地运用它。
第三篇:https://www.cnblogs.com/woniu201/p/10601671.html
1.概述
转眼七年过去了,我是一个彻底拥抱过MFC的人,记得老大的一个需求要把按钮做成圆角,并添加背景颜色,做前端html的可能认为很简单,然而放到MFC上那可真的是很...很麻烦的,自定义类继承Button ,新手估计还搞不定,怎么也有上百行代码,实在不友好,Qt诞生大大简化了这些工作,只需要使用QSS(Qt Style Sheet)就可以轻松做到,最近详细了解了QSS,做了个百度网盘的登录界面,整理好我会把源码放出来,供大家参考。
2.QSS语法:
background-color:rgb(6, 168, 255); 背景色
color:red; 字体颜色
border-radius:5px; 边框圆角半径
border:2px solid green; 边框2像素,实现,绿色
font:10pt; 字体大小10
3.设置QSS方法
方法一:UI界面设置
鼠标到按钮上右键,"改变样式表",在编辑样式表对话框中添加QSS样式。
方法二:程序添加
每一个控件都有setStyleSheet(const QString &styleSheet)方法,样式字符串直接传参即可,例:
ui.pushButton1->setStyleSheet("QPushButton{background-color: white; color: rgb(100, 100, 100) ;}");
方法三:通过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); } StyleDialog::~StyleDialog() { } 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.Selector
一个UI界面有很多控件,使用一个qss文件来指定样式时,可以使用Selector来分别设置控件的样式
1.属性覆盖,一个qss文件里,后面定义的style会覆盖先前的style。
2.同一行中多个类型需要用逗号分隔。
QPushButton, QLineEdit, QCheckBox { background: color: black; }
3.属性分类
例如:有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"));
最后附上一张使用QSS技术仿的百度网盘界面:
第四篇: