Qt样式表的使用

摘要:
在Qt中,可以灵活使用级联样式表,它们的语法与CSS非常相似。除了子类化Style类之外,使用QT样式表是快速更改QT程序的UI样式的另一种方法。它主要参考了HTML级联样式表的语法和思想。以下是Qt样式表使用的简要介绍。

  Qt中可以灵活的使用层叠样式表(CSS),其语法和CSS很相似。因为HTML CSS的灵活性,所以可以很方便的为QT界面设计自己需要的外观。除了子类化Style类,使用QT样式表(QStyleSheet)是另一种快速改变QT程序UI风格的方法,它很大程度上借鉴和参考了 HTML层叠样式表的语法和思想。

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

  下面简单介绍Qt样式表(QSS)的使用。

1、在当前工程目录下建立.qss格式的文件,如:css.qss,在其中编写Qt支持的CSS代码,如下所示:

QPushButton:hover
{
    color:yellow;
    background-color:green;
}

QPushButton[text="Cancel"]
{
    color:red;
}

QTableView::item:hover,QLineEdit:hover,QComboBox:hover,QTextEdit:hover
{
    background-color:rgb(127,255,212);
}

QMenuBar,QStatusBar
{
    background-color:rgb(100,149,237);
}

2、在Qt程序中设置该样式表

  在Qt程序的合适位置添加如下代码:

//读取样式表
QFile qssFile("css.qss");//资源文件":/css.qss"
qssFile.open(QFile::ReadOnly);
if(qssFile.isOpen())
{
    QString qss = QLatin1String(qssFile.readAll());
    qApp->setStyleSheet(qss);
    qssFile.close();
}

  在程序中可通过qApp设置样式表,也可通过控件对象设置样式表。

3、QSS语法

  同CSS一样,它也由Selector和Declaration组成,如:

QPushButton 
{ 
    color: red;
}

  若有几个Selector指定了相同的Declaration,可使用逗号将Selector选择器分开,如:

QPushButton, QLineEdit, QComboBox
{ 
    color: red; 
}

注:

  CSS的语法请参见:http://www.w3school.com.cn/css/css_syntax.asp

  Qt Style Sheets的详细介绍请参见官网:http://doc.qt.io/qt-4.8/stylesheet.html

免责声明:文章转载自《Qt样式表的使用》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇微信小程序:页面生命周期python_14(js)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

CSS之Normalize.css的使用(重置表)

本文译自Normalize.css官网: http://nicolasgallagher.com/about-normalize-css/ Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。N...

Failed to mount component: template or render function not defined.

在公司下班前提交的代码,夜晚回家pull一把,运行却报错: Failed to mount component: template or render function not defined. 百度翻译:无法安装组件:模板或渲染功能未定义。 什么原因呢?百度了一大圈,有的说需要修改配置文件,有的说需要回退vue-loader版本。。。。。 但是都试了个遍...

CSS制作凹环特效

就是在地面上打凿出凹的圆环效果,利用linear-gradient线性渐变增强内环质感,再用伪类after元素设置中心圆凸块的位置以及大小与跟内环之间的阴影度,然后设置内环的颜色就行了;第四个环上面的第二小凸块也同样适用伪类after元素然后设置z-index的顺序。在linear-gradient段内可以见到各种浏览器支持提示,Firefox Chrom...

CSS盒子模型+box-sizing

当对文档进行布局时,浏览器渲染引擎会根据css-Box模型(CSS Basic Box model)将所有元素表示为一个矩形盒子。CSS决定这些盒子的大小,位置以及属性(颜色,背景,边框尺寸) 标准盒模型 从外向内依次为: Margin + border + padding + content-width 外边距区域margin area用空白区域扩展边框...

在vue中使用animate.css

animate.css是一款前端动画库,相似的有velocity-animate 用法: 首先 npm install animate.css --save 然后在vue文件的script中引入: import $ from '../assets/js/jquery.js';//非必要 import animate from 'animate.css'...

前端知识小总结2

(暂时撇开内容、样式、行为的分离) 一: 1-语义化及语义化标签 标签的语义化,是指在看到标签名的情况下基本能理解它所代表的含义,比较直观,便于浏览器的解析和阅读。 语义化的优点, (1)为了在没有css的情况下,页面也能呈现出很好地内容结构、代码结构(2)有利于用户体验(3)有利于SEO和搜索引擎建立良好的沟通。(4)方便其他设备解析以意义的方式来渲染网...