首页 > 技术文章 > QT +样式表

doker 2019-06-18 15:32 原文

  学习样式表的目的:可以设计出好看的控件。(比如可以给一些按钮设计成好看的图片)

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

  样式表的语法基础:

  QT样式表与CSS的语法规则几乎完全相同。

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

  selector {  attribute: value  }

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

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

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

 

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

 

 这种简化方式可以同时为与M个选择器相匹配的部件设置N种属性。例如:

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

 

 

示列代码如下:

 

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);


    //功能:改变控件的背景色
    this->setStyleSheet("QLabel{color:rgb(0,255,255);"
                        "background-color:red;"
                        "}");


    /* 功能:将控件背景换为图片
     * "background-image:url(://res/1.jpg);"不可以伸缩,
     *
     * "border-image:url(://res/1.jpg);" 可以伸缩,更加的实用
     *
     * "border-image:url(://res/1.jpg) 4 4 4 4 stretch stretch;"可以实现对图片的裁剪
    */

    ui->label_2->setStyleSheet("QLabel{color:rgb(0,255,255);"
                               "background-color:blue;"
                              // "background-image:url(://res/1.jpg);"
                              // "border-image:url(://res/1.jpg);"
                               "border-image:url(://res/1.jpg) 4 4 4 4 stretch stretch;"
                               "}");

    //处理 伪状态
    /* 功能:当鼠标进入控件的区域内是改变背景图
     *
     * 部件的外观可以按照用户界面元素状态的不同来分别定义,这在样式表中被称为“伪状态”。
     * 例如:如果我们想在一个 push button在被按下的时候具有sunken的外观,我们可以指定一个叫做:pressed的伪状态。
     *
    */

    ui->pushButton->setStyleSheet("QPushButton{"
                                  "border: 2px outset green;"
                                  "border-image:url(://res/1.jpg);"
                                  "}"
                                  "QPushButton:hover{"
                                  "border-image:url(://res/2.png);"
                                  "}"

                                  );




}

Widget::~Widget()
{
    delete ui;
}

 

类似"QPushButton:hover{" "border-image:url(://res/2.png);" "}"中的hover伪状态列表还有如下:

  伪状态    描述

:checked  button部件被选中

:disabled  部件被选中

:enable    部件被启用

:focus    部件获得焦点

:hover    鼠标位于部件上

:indeterminate  checked或radiobutton被部分选中

:off     部件可以切换,且处于off状态

:on     部件可以切换,且处于on 状态

:pressed  部件被鼠标按下

:unchecked   button部件未被选中

 

下面两张图是运行显示图:

图一鼠标没有位于button部件上,图二是鼠标位于button上

图一:

        

图二:

        

 

到此为止,QT的样式表的学习就先告一段落了。运行的结果也是可以的。

 

推荐阅读