关于QT的QSS的知识总结

      用QT也一年多了,之前在做QSS这块没有仔细研究,总想着只要达到相应的效果就可以了,没有过分的细想。最近项目需要整体的美化一下,发现脑子对这方面一片空白。所以,现在来认真的总结下。

      样式表存在于一个文件中,QT的样式表统一拓展名为*.qss,用来存放样式和效果代码,然后通过QT程序的引用设置到整个程序中。例如:QPushButton{border:2px solid #8f8f91; border-radius:6px;}

Qt程序界面的定制有两种方法:

使用程序继承并实现一个 QStyle 的子类
Qt 样式表的使用。

样式表的由来: 仿照CSS样式表的模式对界面程序样式进行定制与修改。

  Qt样式表的思想很大程度上是来自于HTML的层叠式样式表(CSS),通过调用QWidget::setStyleSheet()QApplication::setStyleSheet()从而可以为一个独立的子部件、整个窗口,甚至是整个应用程序指定一个样式表。

样式表的程序引用:

       通过QStyle的一个叫做QStyleSheetStyle的特殊子类来实现的。这个特殊的子类实际上是其他的系统特定风格类的包裹类, 它会把通过样式表指定的自定义外观风格应用在底层的系统特定风格之上。

如何使用样式表?

1.样式表原理:方箱模型

    对于任何一个控件或者控件里的子部件,可以这样了理解,相对于下图,一个空间可以分为四个区域边框:

  Margin  :控件最外围的空白区域,总是透明的

  Border  :控件的外边框

  Padding:控件的外边空到内显示区域的空白区域

  Content:控件的最内显示区域

注意:当Margin大小为0时,控件大小就是显示的实际大小.

2.样式表基本语法:

一个样式表由一系列的样式规则构成。每个样式规则都有着下面的形式:

selector { attribute:value}

  选择器(selector)通常是一个类名(例如QComboBox),当然也还有其他的语法形式。

  属性(attribute)部分是一个样式表属性的名字,值(value)部分是赋给该属性的值。

selector #ObjectName{attribute:value}

  ObjectName是一个指定的控件的名字,一般由程序中调用setObjectName()来指定。

  注意:前一个的样式,会被后来的样式所覆盖

为了使用方便,我们还可以使用一种简化形式,这样:

     selector1, selector2, ..., selectorM{attribute1:value1;attribute2:value2;...attributeN:valueN}

如:

QCheckBox, QComboBox, QSpinBox{
         color: red;
         background-color: white;
         font: bold;

 }

当然也可以这样:
selector1#ObjectName1,selector2#ObjectName1, ..., selectorM #ObjectName1 {attribute1:value1; attribute2:value2; ... attributeN:valueN;}

  如:

  QCheckBox#MainCheckBox,QComboBox#MainComboBox  ,QSpinBox#MainSpinBox{

  color: red;  background-color: white;  font: bold;}

3.控件子控件了解:子部件微观样式化

界面是如何通过qss来定制不同的效果?为什么同一种控件可以产生不同的显示效果?这个就得从控件的构成开始说。

这是一个滚动条,如左图,控件名为QScrollBar,如图所示,有着很多的子控件,而每一个子控件都可以定制不同的效果,综合起来就成了一套效果。因此在进行QSS开发是需要了解的是某个控件分别有些什么子控件。下页是一些基本的字控件(sub-control)列表:


4.控件状态及效果分析:

  以下是几种常见的状态:



示例

5.控件大小等设定:

对某一个控件的大小进行调整很简单,使用widthheight进行调整即可,当然也可以添加min-max-前缀进行修饰,最小单位为像素(PX)用于调整界面整体效果,如:

QWidget#MainWindowsHeadBar {

            margin:0px;  //margin外框为0个像素

            border:2px solid red//border显示

            width: 36px;  //控件宽

            height: 23px;  //控件高

           border-image:url(IMAGE_PATH/minimize.png) 1; //图片

       }

当然这是控件大小?那么线条呢?呼~~~ 如上绿色字体:

  2px:线条为2个像素

  solid:实线

  red:红色

以下为线条border-style的可选项,可以参照如下:



其他:

border-radius:为设置圆角

border:1pxsolid transparent; //宽度为1px的透明实线(什么都看不到)

6.控件位置等排版

此模块主要介绍的是相对定位:

  位置排版就是通过微调界面控件显示位置进行排版,先给大家看两个效果,以MPRMaker For PDF为例:

效果一:slider控件效果

  使用后 使用前

效果一:设置对话框效果

  使用前:

  使用后:

QFrame{
  margin: 14px 18px 20px 18px;
}

  如上:进行位置偏移设置表示上右下左四个方向分别为14 1820 18个像素,同时,我们也可以分别指定margin-topmargin-rightmargin-bottommargin-left四个属性。

QFrame{
  margin-top: 14px;
  margin-right: 18px;
  margin-bottom: 20px;
  margin-left: 18px;
}

我们也可以同样的将这些属性应用于任何一个支持方箱模型的Qt部件,例 如:QCheckBoxQLabelQLineEditQListViewQMenuQPushButtonQTextEdit、和QToolTip,甚至也可以将其作用于子部件上。

同时,采取此方法能够实现按下弹起的状态,就是实现采用当鼠标按下动作的时候,让控件的显示位置向右下方移动几个像素,来模拟这个状态。

//MPRMaker PDF 工具栏Qcombobox下拉框按下动作效果实现

QToolBar#CommonToolBar  QComboBox::down-arrow:on {

    top: 1px;  

    left: 1px;  

7.控件图片等显示

设置某一个背景的图片,有如下三种方法:

1.background-image

2.background

3.border-image

4.image

区别:

  border-image:图片显示采取拉伸效果为默认缺省
  background-image:图片显示采取重复效果为默认缺省
  image:图片显示采取原图大小为默认缺省
  background:包含background-image

  1.background-imagebackground中的一种,background还包含其他属性,有colorrepeatposition等等;

  2.border-imagebackground-image,前者是在控件的border区域进行设置,后者是整体,包括margin区域,且同时设置,前者会覆盖在后者的图片之上。

  3. image不会改变图片大小

传说中的九宫格:实用性很强大~~先给个赞!如下:

了解:

  图片在实际的应用中,如果不使用九宫格方式,图片会进行自动复制重绘平铺显示或者进行对应比例的像素画放大,如果存在阴影等会出现阴影模糊,显示效果变差。而解决这个问题的方法就是九宫格。

原理:

    程序自动按照所分配的像素进行四边的切割,然后保留边界的图片数据,自动将中间的数据进行像素化拉伸。

使用举例:

   border-image:url(button.png) 4 4 4 4 stretch stretch;

//图片 上右 下 左 拉伸(缺省) 拉伸(缺省)

border-width4 4 44//必须有~

以上就是QSS的基本知识,其中如果需要了解细节的相关知识可以去查询QSS的帮助手册!

/*此为楼主原创文章,如需转载请注明出处*/

     

















猜你喜欢

转载自blog.csdn.net/mario_z/article/details/80566297