zoukankan      html  css  js  c++  java
  • Qt样式表之一:Qt样式表和盒子模型介绍

    一、Qt样式表介绍

    Qt样式表是一个可以自定义部件外观的十分强大的机制,可以用来美化部件。Qt样式表的概念、术语和语法都受到了HTML的层叠样式表(Cascading Style Sheets, CSS)的启发,不过与CSS不同的是,Qt样式表应用于部件的世界。


    二、使用代码设置样式表

    样式表使用文本描述,可以使用 QApplication:: setStyleSheet() 函数将其设置到整个应用程序上,也可以使用 QWidget::setStyleSheet() 函数将其设置到一个指定的部件(还有它的子部件)上。如果在不同的级别都设置了样式表,那么Qt会使用所有有效的样式表,这被称为样式表的层叠。下面来看一个简单的例子。


    新建Qt Gui应用,项目名称为myStyleSheets,类名为MainWindow,基类保持QMainWindow不变。建立好项目后进入设计模式,向界面上拖入一个PushButton和一个Horizontal Slider,然后在mainwindow.cpp文件中的构造函数里添加如下代码:

    //设置pushButton的背景颜色为黄色
    ui->pushButton->setStyleSheet("background:yellow");
    //设置horizontalSlider的背贵为蓝色
    ui->horizontalSlider->setStyleSheet("background:blue");
    

    这样便设置了两个部件的背景色。不过像这样调用指定部件的setStyleSheet()函数只会对这个部件应用该样式表,如果想对所有的相同部件都使用相同的样式表,那么可以在它们的父部件上设置样式表。因为这里两个部件都在MainWindow上,所以可以为MainWindow设置样式表。先注释掉上面的两行代码,然后添加如下代码:

    this->setStyleSheet("background:blue");
    

    这样,以后再往主窗口上添加的所有QPushButton部件和QSlider部件的背景色都会改为这里指定的颜色。


    三、在设计模式中设置样式表

    除了使用代码来设置样式表外,也可以在设计模式中为添加到界面上的部件设置样式表,这样更加直观。先注释掉上面添加的代码,然后进入设计模式。在界面上右击,在弹出的菜单中选择“改变样式表”,这时会出现编辑样式表对话框,在其中输入如下代码:

    QPushButton{
    }
    

    注意光标留在第一个大括号后。然后单击上面“添加颜色”选项后面的下拉箭头, 在弹出的列表中选择“background-color”一项。这时会弹出选择颜色对话框,随便选择一个颜色,然后单击“确定按钮”,这时会自动添加代码:

    QPushButton{
    	background-color: rgb(0, 0, 255);
    }
    

    可以看到,在这里设置样式表不仅很便捷而且很直观,不仅可以设置颜色,还可以使用图片,使用渐变颜色或者更改字体。在设计模式,有时无法正常显示设置好的样式表效果,不过运行程序后会正常显示的。这里是在MainWindow界面上设置了样式表,当然,也可以按照这种方法在指定的部件上添加样式表。


    四、盒子模型介绍

    使用Style Sheets时,所有的部件都被视为有四个同心矩形的盒子(box):边缘矩形(margin rectangle),边框矩形(border rectangle),填充矩形(padding rectangle)和内容矩形(content rectangle)。盒子模型对四个矩形有详细的描述,如下图所示:

    边缘,边框宽度和填充属性默认为0。这样四个矩形(margin, border, padding和content)重合。

    使用background-image属性,你可以为部件指定背景图片。默认地,背景图片只画在边框以内。背景图片不随部件大小改变而改变。提供一个随部件大小改变而改变的背景或皮肤,必须使用border-image。因为border-image属性提供了一个备选背景,所以并不需要再为部件指定一个背景图片。在两者都指定的情况下,border-image将画于background-image之上。


  • 相关阅读:
    运维IT必备程序安装包
    网络基础TCP三次握手四次挥手
    新建Weblogic域启动报BEA090403和BEA000386提示密码认证有问题
    Weblogic开发模式和生产产品模式互换
    web api 返回 去除双引号转义符
    freeswitch esl :Rejected by acl “loopback.auto“问题
    freeswitch SIP 服务器一些常用配置
    因果推断综述
    Django 项目配置拆分独立
    wayne编译支持k8s1.16+
  • 原文地址:https://www.cnblogs.com/linuxAndMcu/p/11039691.html
Copyright © 2011-2022 走看看