当前位置:   article > 正文

Qt 样式设置_qt设置窗口样式

qt设置窗口样式

Qt 帮助文档 The Style Sheet Syntax
CSS 教程
CSS2 Selectors

样式语法

1

Qt Style Sheet 语法不区分大小写:

1

指定控件 Selector Types

selectors defined in CSS2

对控件设置样式是可以限定范围,如根据控件名字,或者某一类控件但不包括子控件等,常用的类型如下:

2

如根据 Object name 来设置某类控件样式:

QWidget#widget_a,QWidget#widget_b
{
    background-color:#000000;
}
  • 1
  • 2
  • 3
  • 4

盒子模型 The Box Model

CSS 盒子模型

1在这里插入图片描述

能自定义样式的控件

Qt 中查看 List of Stylable Widgets 的位置如下:

1

部分截图:


1

Sub-Controls

Qt中的QSS Subcontrol

1
3在这里插入图片描述

List of Sub-Controls 位置:

1

2


4
5

控件的状态 Pseudo-States

控件在不同状态下的样式,如 QPushButton 在按下(pressed)或悬浮(hover)状态下设置不同的背景颜色。

1

7
8
9

属性

List of PropertiesList of Sub-Controls 查找方法相同。

1

内置图标

Qt 内置图标的介绍和使用

List of IconsList of Sub-Controls 查找方法相同。

QIcon icon = QApplication::style()->standardIcon(QStyle::QStyle::SP_ComputerIcon);
ui->pushButton->setIcon(icon);

QPixmap pic = icon.pixmap(icon.actualSize(QSize(64,64)));
ui->label->setPixmap(pic);
  • 1
  • 2
  • 3
  • 4
  • 5

多个设置冲突

CSS2 Specification

12

同一个控件同时在 .qss 文件,ui 文件和代码中设置样式,其优先级为:
代码中指定样式 > ui 文件中通过 styleSheet 设置样式 > .qss 中设置样式。

层叠样式 Cascading

6.4 The cascade
Qt样式表之一:Qt样式表和盒子模型介绍

1

继承规则 Inheritance

2

子窗口不继承父窗口样式

QT5 子窗口不继承父窗口的边框、背景等风格

在界面中指定某个窗口的样式,如背景颜色等,指定名称,不影响子控件。

ID selectors 介绍: 5.9 ID selectors

如:在一个 QFrame 中添加一个 QComboBox,将 QFrame 的背景设置为透明样式,且不指定具体名字,发现 QComboBox 的下拉窗体背景颜色无法设置,而指定 QFrame 名字后正常。

QFrame 不设置透明样式,指定背景颜色,在里面添加的 QComboBox 的下拉框每个条目的背景颜色是 QFrame 的背景颜色,指定 QFrame 名字后正常。

移除控件旧样式

飞扬青云 / Qt开发经验

添加 .qss 文件

可以建一个 .qss 文件来设置应用程序的样式,或者建立几种不同的风格可以切换,如对所有的按钮统一设置样式,保持风格统一,程序里加载 .qss 文件。

程序的目录如下:

1

工程中添加资源文件方法:Qt资源文件

 QFile file(QString(":/resource/style.qss"));
 file.open(QFile::ReadOnly);
 QString strQss = QLatin1String(file.readAll());
 qApp->setStyleSheet(strQss);
  • 1
  • 2
  • 3
  • 4

同一个控件同时在 .qss 文件,ui 文件和代码中设置样式,其优先级为:
代码中指定样式 > ui 文件中通过 styleSheet 设置样式 > .qss 中设置样式。

Qt 预置颜色

在这里插入图片描述

QLineEdit 样式设置

可以在 .qss 的文件统一设置样式。

.QLineEdit{
        width:400px;
        height:40px;
        font-family: "Microsoft YaHei";
        font-size: 16px;
	    padding: 2px;
   		color:blue;
        background-color: #BDB76B;
		selection-color: red;
		seletion-background-color: #696969;
}

.QLineEdit[echoMode="2"] {
        lineedit-password-character: 9679;
}

.QLineEdit:focus{
    border: 1px solid #DC143C;
}
.QLineEdit:hover{
    border: 1px solid #DB7093;
}

.QLineEdit:!enabled{
   color:gray;
   background-color: #7FFF00;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

selection-color 设置选中文本时的文本的颜色,seletion-background-color 设置选中文本时的背景颜色。
widthheight 可以在 ui 界面设置,界面设置后以界面设置的为准。

1

QPushButton

CSS 按钮
Qt 帮助文档 Qt Style Sheets Examples ----- Customizing QPushButton

.QPushButton{
	background-color: black;
	border: 2px solid #4CAF50; /* Green */
	border-radius: 50%;
	color: white;
	font: bold 14px;
	padding: 5px;	
	min-height: 20px;
	text-align: center;
    text-decoration: none;
    display: inline-block;
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

.QPushButton:disabled{
    background-color: #696969;
    color:#C0C0C0;
}

.QPushButton:hover{ 
	background-color: #696969;
    color:#C0C0C0;
}

.QPushButton:pressed{ 
	background-color: #696969;
    color:#C0C0C0;
}

.QPushButton:checked{
    color: #808000;
    background-color: #8B4513;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/羊村懒王/article/detail/613789
推荐阅读
相关标签
  

闽ICP备14008679号