qt 样式表基本用法

Qt样式表

QT样式表参考CSS层叠样式表设计,不同之处在于QT样式表应用于Widget世界。

可以使用QApplication::setStyleSheet()函数设置到整个应用程序上,也可以使用QWidget::setStyleSheet()设置到某一个部件以及子部件上。如果在不同的级别都设置了样式表,QT会使用所有有效的样式表,称为样式表的层叠。

this->setStyleSheet("QpushButton{background:yellow}QSlider{background:blue}");

QPushButton{
    border-color: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0 rgba(0, 0, 0, 255), stop:0.19397 rgba(0, 0, 0, 255), stop:0.202312 rgba(122, 97, 0, 255), stop:0.495514 rgba(76, 58, 0, 255), stop:0.504819 rgba(255, 255, 255, 255), stop:0.79 rgba(255, 255, 255, 255), stop:1 rgba(255, 158, 158, 255));
    background-color: rgb(65, 48, 255);
}

样式表语法

样式规则

QPushButton{color:red}

QPushButton是选择符,{color:red}是声明,color是属性,red是值

选择符
选择符 示例 说明
通用选择符 * 匹配所有部件
类型选择符 QPushButton 匹配所有QPushButton实例和它的所有子类
属性选择符 QPushButton[flat = "false"] 匹配QPushButton的属性flat为false实例
类选择符 .QPushButton 匹配所有QPushButton实例但不包含它的子类
ID选择符 QPushButton#okButton 匹配所有QPushButton中以okButton为对象名的实例
后代选择符 QDialog QPushButton 匹配所有QPushButton实例,必须是QDialog的子孙部件
孩子选择符 QDialog>QPushButton 匹配所有QPushButton实例,必须是QDialog的直接子部件

子控件

QComboBox的下拉按钮子控件

QSpinBox的向上向下箭头子控件

选择符可以包含子控件对部件的特定子控件应用规则

QComboBox::drop-down{image:url(dropdown.jpg)}此规则改变所有QComboBox部件的下拉按钮样式

伪状态

QCheckBox:hover:checked{color:red} 当鼠标悬停在一个被选中的QCheckBox上时才应用规则。

冲突解决

特殊的优先

层叠

样式表可以设置在QApplication或者父部件上。部件有效的样式表通过部件祖先的样式表和QApplication上的样式表合并得到,当发生冲突时,部件自己的样式表优先于任何继承的样式表,父部件优先于祖先的样式表。

自定义部件外观与换肤

盒子模型

内容(content)、填衬(padding)、边框(border)、边距(margin)

使用background-image来指定背景图片,如果希望背景图片随着部件的大小变化,就必须使用border-image。

image属性可以用来在border-image之上绘制一个图片、图片对齐参考image-position属性。

自定义部件外观

/****************主界面背景*******************/
QMainWindow{
        background-image: url(:/image/beijing01.png);/*背景图片*/
}

/****************按钮部件*******************/
QPushButton{
     background-color: rgba(100, 225, 100, 30);/*背景色*/
     border-style: outset; /*边框样式*/
     border-width: 4px;  /*边框宽度为4像素*/
     border-radius: 10px; /*边框圆角半径*/
     border-color: rgba(255, 225, 255, 30);/*边框颜色*/
     font: bold 14px;/*字体*/
     color:rgba(0, 0, 0, 100);/*字体颜色*/
     padding: 6px; /*填衬*/
}

QPushButton:hover{ /*鼠标悬停在按钮上时*/
        background-color:rgba(100,255,100, 100);
        border-color: rgba(255, 225, 255, 200);
        color:rgba(0, 0, 0, 200);
}

QPushButton:pressed { /*按钮被按下时*/
     background-color:rgba(100,255,100, 200);
     border-color: rgba(255, 225, 255, 30);
     border-style: inset;
     color:rgba(0, 0, 0, 100);
}

/****************滑块部件*******************/

QSlider::handle:horizontal { /*水平滑块的手柄*/
        image: url(:/image/sliderHandle.png);
 }

QSlider::sub-page:horizontal { /*水平滑块手柄以前的部分*/
        border-image: url(:/image/slider.png);/*边框图片*/
 }

实现换肤功能

Qt样式表可以存放在一个以.qss为后缀的文件中,可以在程序中调用不同的.qss文件实现换皮肤功能。

    QFile file(":/qss/my.qss");
    // 只读方式打开该文件
    file.open(QFile::ReadOnly);
    // 读取文件全部内容,使用tr()函数将其转换为QString类型
    QString styleSheet = tr(file.readAll());
    // 为QApplication设置样式表
    qApp->setStyleSheet(styleSheet); 

特殊效果窗体

不规则窗体和透明窗体

原文地址:https://www.cnblogs.com/wangjian8888/p/9431790.html

时间: 2024-10-29 19:09:42

qt 样式表基本用法的相关文章

QT开发(六十五)——QT样式表编程实例

QT开发(六十五)--QT样式表编程实例 一.QComboBox组合框样式定制 1.基本定义 QComboBox  {     border: 1px solid gray;     border-radius: 3px;     padding: 1px 2px 1px 2px;  # 针对于组合框中的文本内容     min-width: 9em;   # 组合框的最小宽度 } QComboBox::drop-down {     subcontrol-origin: padding;   

通过Qt样式表定制程序外观(比较通俗易懂)

1. 何为Qt样式表[喝小酒的网摘]http://blog.hehehehehe.cn/a/10270.htm2. 样式表语法基础3. 方箱模型4. 前景与背景5. 创建可缩放样式6. 控制大小7. 处理伪状态8. 使用子部件定义微观样式 8.1. 相对定位8.2. 绝对定位 摘要 由于Qt样式表的引入,定制Qt部件的外观样式变得非常简单. 无论你是想仅仅修改一个现有部件的外观,还是想从零开始设计一套全新的界面风格, 现在都有了一种新的方法而不必再去继承并实现一个QStyle的子类. 1. 何为

Qt样式表的使用

Qt中可以灵活的使用层叠样式表(CSS),其语法和CSS很相似.因为HTML CSS的灵活性,所以可以很方便的为QT界面设计自己需要的外观.除了子类化Style类,使用QT样式表(QStyleSheet)是另一种快速改变QT程序UI风格的方法,它很大程度上借鉴和参考了 HTML层叠样式表的语法和思想. StyleSheet文件的默认后缀名为qss,可通过命令行参数 -stylesheet filename.qss 来设置样式表,也可通过QApplication::setStyleSheet或QW

QT +样式表

学习样式表的目的:可以设计出好看的控件.(比如可以给一些按钮设计成好看的图片) QT 样式表的思想很大程度上是来自于HTML的层叠式样式表(CSS),通过调用QWidget->setStyleSheet()或者QApplication->setStyleSheet(),你可以为一个独立的子部件.整个窗口,甚至是整个应用程序指定一个样式表. 样式表的语法基础: QT样式表与CSS的语法规则几乎完全相同. 一个样式表由一系列的样式规则构成,每个样式规则都有着下面的形式: selector {  a

Qt样式表属性

QT 样式表属性大全 Box样式 width:宽度 height:高度 max-width:最大宽度 max-height:最大高度 min-width:最小宽度 min-height:最小高度 margin:边距尺寸 margin-top margin-right margin-bottom margin-left padding:填充尺寸 padding-top padding-right padding-bottom padding-left 位置样式 position:定位属性 如果po

Qt样式表使用注意项

<1>.StyleSheet的使用StyleSheet文件的默认后缀名为qss,可以通过命令行参数-stylesheet filename.qss来设置样式表,也可以通过QApplication::setStyleSheet 或 QWidget::setStyleSheet来设置应用程序或特定控件要使用的样式表::setStyleSheet函数的参数是字符串(不是qss文件的名字,而是样式表的内容),所以直接使用的话,不方便一次设置大量的规则,但是可以使用资源文件将qss样式表嵌入到程序中,然

15、Qt 样式表

Qt的样式表类似HTML的层叠式样式表CSS,可以为一个独立的子部件.整个窗口.整个应用程序指定一种外表样式. 样式表功能:1.优化外观.2.实现某些动作,如鼠标在图片上,图片切换. 格式:QWidget::setStyleSheet("样式") 或 QApplication::setStyleSheet("样式") 样式:控件类 { 属性:值 } QPushButton,QCheckBox,QComboBox{ //按钮.单选框.下拉框 color:red; //

QT 样式表实例

目标:实现button的圆角效果及背景颜色,鼠标滑过颜色变亮,鼠标点击颜色变重. 总体思路首,先根据需要及样式规则新建.qss文件,然后在代码中将文件引用并应用样式. 具体过程如下: 1在项目当前目录下,创建css.qss文件,并写入如下内容 QPushButton { background-color: rgb(85, 170, 255); border-radius:10px; padding:2px 4px; } QPushButton:hover{ background: qlinear

Qt 样式表鼠标滑过按钮更改Text文本颜色

QSS语法参考http://blog.csdn.net/liang19890820/article/details/51691212 Qt助手上也有比较详细的说明,选择器以及伪选择器,现在只是做个简单的搬运&翻译工. 当然也可以重载QPushButton 然后跟踪鼠标党鼠标滑过Button的时候,使用画板去更改ButtonText的颜色. MyButton= new QPushButton("LiuLikeQian",this); MyButton->setStyleSh