精华内容
下载资源
问答
  • QT样式表中 透明度 参数设置

    千次阅读 2020-07-01 13:13:03
    样式表中,WindowOpacity 可以设置透明度。但是仅能设置 QMainWindow,若想设置 其它部件(button,label,widget等)的透明度,可以采用rgba的颜色格式进行设置。 rgba 第四个参数是透明度参数 , 取值0~1. 1是...

    透明度设置

    • 在样式表中,WindowOpacity 可以设置透明度。但是仅能设置 QMainWindow,若想设置 其它部件(button,label,widget等)的透明度,可以采用rgba的颜色格式进行设置。
    • rgba 第四个参数是透明度参数 , 取值0~1. 1是不透明,0是完全透明。
    • 如果你的显示效果不是你想要的样子,你需要看下 底层的样式表中颜色的设置。
      因为使用透明度后,你的显示不仅仅取决于本层了。

    demo

    # 背景色设置 (蓝色)
    QWidget#c1{
    background-color: rgba(0, 132, 255);
    }
    
    # 按钮颜色设置 黄色,透明度0.3, 其它按钮 也同此设置,只是改变了透明度。
    background-color: rgba(255, 255, 0,0.3);
    

    在这里插入图片描述

    展开全文
  • QT 透明样式设置

    2020-12-08 10:35:47
    透明背景,不透鼠标 #widgetAdptive { background-color:rgba(255,255,255,2); } 透明背景,透鼠标 #widgetAdptive { background-color:rgba(255,255,255,0); } 注意:rgba(255,255,255,1);没有透明效果

     

    透明背景,不透鼠标

    #widgetAdptive { background-color:rgba(255,255,255,2); }

     

    透明背景,透鼠标

    #widgetAdptive { background-color:rgba(255,255,255,0); }

     

    注意:rgba(255,255,255,1);没有透明效果

    样式设置链接:
    Qt QPushButton水晶按钮样式例子:https://blog.csdn.net/hss2799/article/details/114120739
    QTabWidget 样式例子:https://blog.csdn.net/hss2799/article/details/115123636
    QSlider 样式例子:https://blog.csdn.net/hss2799/article/details/115123464
    QTreeWidget 样式设置记录:https://blog.csdn.net/hss2799/article/details/112985778
    QT 透明样式设置:https://blog.csdn.net/hss2799/article/details/110855207
    Qt 用样式实现实心圆和空心圆:https://blog.csdn.net/hss2799/article/details/114061776
    QToolTip样式设置的两种方式:https://blog.csdn.net/hss2799/article/details/113982379

    Qt QDateEdit 日期样式设置例子:https://blog.csdn.net/hss2799/article/details/115348418

     

    展开全文
  • QT样式

    2021-02-03 14:55:05
    QT样式表 一、QT样式表简介 1、QT样式表简介 QSS的主要功能是使界面的表现与界面的元素分离,使得设计皮肤与界面控件分离的软件成为可能。 QT样式表是允许用户定制widgets组件外观的强大机制,此外,子类化...

    转至“https://www.cnblogs.com/lsgxeva/p/7816938.html

    QT样式表

     

    一、QT样式表简介

    1、QT样式表简介

        QSS的主要功能是使界面的表现与界面的元素分离,使得设计皮肤与界面控件分离的软件成为可能。

    QT样式表是允许用户定制widgets组件外观的强大机制,此外,子类化QStyle也可以定制widgets组件外观。QT样式表的概念、术语、语法很大程度上受到了CSS层叠样式表的影响。

    样式表是使用QApplication::setStyleSheet()设置在应用程序或是使用QWidget::setStyleSheet()设置在具体组件及其子对象的文字说明。

    例如,以下样式表指明QLineEdit使用黄色作为背景色,QCheckBox使用红色作为文本颜色。

        QLineEdit { background: yellow }

        QCheckBox { color: red }

        对于这种定制,样式表比QPalette更强大。例如,要获取一个红色的按钮,可以设置QPushButton的QPalette::Button角色为红色。然而,这并不保证对所有的样式有效,因为样式的构造者会被不同平台的原则和本地的主题引擎所限制。

        样式表可以实现那些很难或是不可能使用QPalette实现的所有定制。

        如果想要某些强制字段为黄色背景,按钮为红色文字,或是绚丽的复选框,样式表可以完成。

    2、QT样式表编程

    A、在代码中直接设置QSS

        QPushButton *button = new QPushButton(this);

        button->setText("hello");

        button->setStyleSheet("QPushButton{ color:blue}");

    B、通过文件设置QSS

    将QSS代码写入.qss文件

    将.qss文件加入资源文件qrc.qrc中

    在代码中读取QSS文件设置组件QSS

        QPushButton *button = new QPushButton(this);

        button->setText("hello");

        QFile file(":/qss/dev.qss");

        file.open(QIODevice::ReadOnly);

        QString stylesheet = QLatin1String(file.readAll());

        button->setStyleSheet(stylesheet);

        file.close();

     

    二、QT样式表语法

    QT样式表的术语和语法规则与HTML CSS很相似。

    1、样式规则

    样式表由样式规则序列组成。样式规则由选择器和声明组成。选择器指定了那些组件受规则影响,声明指定了组件设置了哪些属性。例如:

        QPushButton { color: red }

    以上样式规则中,QPushButton是选择器,{ color: red }是声明。样式规则指定了QPushButton及其子类应使用红色作为前景色。

    QT样式表大小写不敏感,除了类名、对象名、QT属性名是大小写敏感的。

    多个选择器可以指定同一个声明,使用逗号分隔选择器。例如以下规则:

        QPushButton, QLineEdit, QComboBox { color: red }

    等效于三个规则:

        QPushButton { color: red }

        QLineEdit { color: red }

        QComboBox { color: red }

    样式规则的声明部分是一个“属性:值”对的链表。声明部分在{}内,不同的属性:值”对使用分号分隔。例如:

        QPushButton { color: red; margin: 0px; color: rgb(85, 85, 85); font-family: 宋体, "Arial Narrow", arial, serif;">2、选择器的类型

    到目前为止所有的例子使用的都是最简单的选择器类型。QT样式表支持CSS2定义的所有选择器。下表总结了最常用的选择器类型。

    选择器

    示例

    说明

    通用选择器

    *

    匹配所有的组件

    类型选择器

    QPushButton

    匹配所有QPushButton机器子类的实例

    属性选择器

    QPushButton[flat="false"]

    匹配所有QPushButton的属性flat为false的实例。属性分为静态属性和动态属性,静态属性可以通过Q_PROPERTY()来指定,动态属性可以使用setProperty来指定。

    类选择器

    .QPushButton

    匹配QPushButton的实例,子类除外

    ID选择器

    QPushButton#okButton

    匹配对象名为okButton的所有QPushButton实例

     

    后代选择器

    QDialog QPushButton

    匹配QDialog后代的所有QPushButton实例

    子选择器

    QDialog > QPushButton

    匹配QDialog子类对象QPushButton的所有实例

    3、子控件选择器

    对于样式复杂的组件,需要访问组件的子控件,如QComboBox的下拉按钮或QSpinBox的上下箭头。选择器可以包含子控件来对组件的特定子控件应用规则。

        QComboBox::drop-down { image: url(dropdown.png) }

    以上规则会对所有QComboBox的下拉框应用样式规则。尽管双冒号::很像CSS3的伪元素,但QT子控件选择器在概念上是不同的,有不同的级联语义。

    子控件选择器通常根据另一个参考元素进行定位。参考元素可以是组件或是另一个子控件选择器。例如,QComboBox的::drop-down默认放置在QComboBox衬底矩形的右上角。::drop-down默认放置在::drop-down子控件选择器的内容矩形的中心。

    可以使用subcontrol-origin属性改变原点矩形。例如,如果想要将drop-down放置在边界矩形而不是默认的衬底矩形,可以指定:

        QComboBox {

          margin-right: 20px;

      }

      QComboBox::drop-down {

          subcontrol-origin: margin;

      }

    drop-down在边界矩形内的对齐方式通过subcontrol-position属性改变。宽属性和高属性用于控制子控件选择器的大小。注意,设置一幅图片会隐式地设置子控件选择器的大小。

    相对定位方法(position:relative)允许子控件选择器的位置偏离它原来的位置。例如,当QComboBox的下拉按钮按下,想要一种被按下的效果可以通过指定如下实现:

        QComboBox::down-arrow {

              image: url(down_arrow.png);

          }

          QComboBox::down-arrow:pressed {

              position: relative;

              top: 1px; left: 1px;

          }

    绝对定位方法(position:absolute)允许子控件选择器的位置和大小的改变与参考元素有关。

    一旦定位,就可以像组件那样使用盒子模型对其进行造型。

    注意,像QComboBox和QScrollBar这样复杂的组件,如果有一个属性或是子控件选择器被定制,所有其他的属性或是子控件选择器也要必须被定制。

    常用辅助控制器:

    ::indicator              单选框、复选框、可选菜单项或可选群组项的指示器  

    ::menu-indicator         按钮的菜单指示器  

    ::item                   菜单、菜单栏或状态栏项  

    ::up-button              微调框或滚动条的向下按钮  

    ::down-button            微调框或滚动条的向上按钮  

    ::up-arrow               微调框、滚动条或标题视图的向上按钮  

    ::down-arrow             微调框、滚动条或标题视图的向下按钮  

    ::drop-down              组合框的下拉箭头  

    ::title                  群组框的标题

    4、伪选择器

    选择器可能包含限制基于组件状态的规则应用的伪状态。伪状态出现在选择器的尾部,中间使用分号连接。例如,以下规则用于鼠标悬停在一个QPushButton上:

        QPushButton:hover { color: white }

    伪状态可以使用叹号取反,例如,以下规则用于鼠标不悬停在QRadioButton:

        QRadioButton:!hover { color: red }

    伪状态可以以逻辑与的方式连接使用,例如,以下规则应用于鼠标悬停在一个选中的QCheckBox上:

        QCheckBox:hover:checked { color: white }

    取反伪状态可以出现在伪状态链中。例如,以下规则用于鼠标悬停在一个QPsuButton上,但没有按下:

        QPushButton:hover:!pressed { color: blue; }

        如果需要,使用逗号可以将伪状态以逻辑或连接。

        QCheckBox:hover, QCheckBox:checked { color: white }

        伪状态可以结合子控件选择器使用:

        QComboBox::drop-down:hover { image: url(dropdown_bright.png) }

    常用状态:

    :disabled                   禁用的窗口部件  

    :enabled                    启用的窗口部件  

    :focus                      窗口部件有输入焦点  

    :hover                      鼠标在窗口部件上悬停  

    :pressed                    鼠标按键点击窗口部件  

    :checked                    按钮已被选中  

    :unchecked                  按钮未被选中  

    :indeterminate              按钮被部分选中  

    :open                       窗口部件处于打开或扩展的状态  

    :closed                     窗口部件处于关闭或销毁状态  

    :on                         窗口部件的状态是on  

    :off                        窗口部件的状态是on  

    5、冲突处理

    当多个样式规则使用多个值指定同一个属性时会产生冲突。

        QPushButton#okButton { color: gray }

        QPushButton { color: red }

        以上两条规则匹配名为okButton的QPushButton实例,在color属性上有冲突。为了解决冲突,需要考虑选择器的特征。上例中,QPushButton#okButton比QPushButton要更具体,因为QPushButton#okButton指向单个的对象,而不是类的所有实例。

    类似,伪选择器比未指定伪状态的选择器更具体。因而,以下样式表指定,当鼠标悬停在QPushButton上时,QPushButton的文本为白色,否则为红色。

        QPushButton:hover { color: white }

        QPushButton { color: red }

        严谨一点应该是:

        QPushButton:hover { color: white }

        QPushButton:enabled { color: red }

        如果鼠标悬停在按钮上,两个选择器有相同的特性,则第二条规则优先。如果想要文本为白色,需要重新排序规则:

        QPushButton:enabled { color: red }

        QPushButton:hover { color: white }

        或者,可以使第一条规则更加具体:

        QPushButton:hover:enabled { color: white }

        QPushButton:enabled { color: red }

        和类型选择器一起使用时,类似的问题也会发生

        QPushButton { color: red }

        QAbstractButton { color: gray }

        以上两条规则用于QPushButton实例(由于QPushButton继承自QAbstractButton),并有color属性的冲突。由于QPushButton继承自QAbstractButton,所以会假设QPushButton比QAbstractButton更具体。然而,对于样式表的计算,所有的类型选择器有相同的特性,最后出现的规则优先。换句话说,所有的QAbstractButton的color属性会被设置为gray,包括QPushButton。如果真的想要QPushButton的文本为red,通常会重新排序规则。

        为了确定规则的特性,QT样式表遵循CSS2规范:

        选择器特性的计算方法如下:

        计算选择器中ID属性的数量(=a)

        计算选择器中其他属性和伪状态类的数量(=b)

        计算选择器中元素的数量(=c)

        忽略伪元素(如子控件选择器)

        串联的三个数字a-b-c给出了特性。

          *   {} /* a=0 b=0 c=0 -> specificity = 0 */

      LI            {}  /* a=0 b=0 c=1 -> specificity =   1 */

      UL LI         {}  /* a=0 b=0 c=2 -> specificity =   2 */

      UL OL+LI      {}  /* a=0 b=0 c=3 -> specificity =   3 */

      H1 + *[REL=up]{}  /* a=0 b=1 c=1 -> specificity =  11 */

      UL OL LI.red  {}  /* a=0 b=1 c=3 -> specificity =  13 */

      LI.red.level  {}  /* a=0 b=2 c=1 -> specificity =  21 */

      #x34y         {}  /* a=1 b=0 c=0 -> specificity = 100 */

    6、级联

    QT样式表可以设置在应用程序、父组件、子组件上。通过合并组件的祖先(父亲、祖父等)可以获取任意组件的有效样式表,以及设置在应用程序上的任何样式表。

    冲突发生时,不论冲突规则的特性如何,组件自己的样式表总是优先于任何继承而来的样式表。同样,父组件的样式表优先于祖父组件的样式表。

    这样的结果是,在一个组件上设置样式规则会自动获得比祖先组件的样式表或是应用程序的样式表指定的其他规则更高的优先级。例如,首先在应用程序设置样式表

        qApp->setStyleSheet("QPushButton { color: white }");

    然后,在QPushButton对象设置一个样式表

        myPushButton->setStyleSheet("* { color: blue }");

    QPushButton的样式表会强制QPushButton(及其任何子组件)显示蓝色文本,尽管应用程序范围的样式表提供了更具体的规则。

    下列写法也会得到相同的结果:

        myPushButton->setStyleSheet("color: blue");

    但如果QPushButton有子组件,样式表不会对子组件有效果。

    样式表级联是一个复杂的主题,更详细的内容请参考CSS2规范。QT目前没有实现。

    7、继承

    在经典的CSS中,当元素的字体和颜色没有显示设置时,会自动从父组件继承。使用QT样式表时,一个组件不会自动继承父组件设置的字体和颜色。例如,一个QGroupBox包含一个QPushButton:

        qApp->setStyleSheet("QGroupBox { color: red; } ");

    QPushButton并没有显示设置颜色,因此并不是继承父组件QGroupBox的颜色,而是拥有系统的颜色。如果要设置QGroupBox及其子组件的颜色,如下:

        qApp->setStyleSheet("QGroupBox, QGroupBox * { color: red; }");

    相比之下,使用QWidget::setFont() 和 QWidget::setPalette()为子组件设置字体和画板。

    8、C++命名空间内部的组件

    类型选择器特殊类型的组件的样式定制。例如:

    class MyPushButton : public QPushButton {

          // ...

      }

      // ...

      qApp->setStyleSheet("MyPushButton { background: yellow; }");

        QT样式表使用组件的QObject::className() 确定何时应选择器。当自定义组件在命名空间内部时,QObject::className()会返回<namespace>::<classname>。这会与子控件选择器的语法产生冲突。为了解决这个问题,当在命名空间内使用组件的类型选择器时,必须使用“--”代替“::”。

    namespace ns {

          class MyPushButton : public QPushButton {

              // ...

          }

      }

      // ...

      qApp->setStyleSheet("ns--MyPushButton { background: yellow; }");

    9、设置QObject属性

    从QT4.3开始,任何可被设计的Q_PROPERTY都可以使用qproperty-<property name>语法设置。

    MyLabel { qproperty-pixmap: url(pixmap.png); }

    MyGroupBox { qproperty-titleColor: rgb(100, 200, 100); }

    QPushButton { qproperty-iconSize: 20px 20px; }

    如果属性引用了Q_ENUMS声明的枚举,应该通过名字引用常量值,而不是数字。

    三、QT设计器中的样式表

        Qt Designer是一款预览样式表的优秀工具,右击设计器中的任何组件,选择Change styleSheet...可以设置样式表。

        QT4.2开始,Qt Designer包含了一个样式表语法高亮器和验证器。如果语法合法或非法,验证器可以在Edit Style Sheet对话框的左下角指示。

    wKioL1hqOeHQzX8uAABuZVArzzo582.png

        当点击Ok或Apply按钮时,Qt Designer会自动使用新样式表显示组件。

    四、使用样式表定制QT组件

    当使用样式表时,每个组件会被当作有四个同心矩形:空白矩形、边界矩形、衬底矩形、内容矩形的盒子。

    1、盒子模型

    四个同心矩形如下所示:

    wKiom1hqOgejndJNAABhRmdmdHg832.png

        margin, border-width,padding属性默认都是0。此时四个矩形完全相同。

        可以使用background-image属性指定组件的背景。默认,background-image只会在边界矩形内被绘制,使用background-clip属性可以修改。使用background-repeat属性和background-origin属性来控制背景图片的重复和来源。

        background-image属性不会缩放组件的大小。为了提供随着组件大小缩放的皮肤或背景,必须使用border-image属性。由于border-image属性提供了一个可选择的背景,当指定border-image属性时,不会要求指定background-image属性。当background-image属性和border-image属性都被指定时,border-image属性会被绘制在background-image属性之上。

        此外,image属性可以用于在border-image属性上绘制一幅图像。当组件的大小与image的大小不匹配时,指定的image不会伸缩,对齐方式可以使用image-position属性设置。与background-image属性和border-image属性不同,image属性可以指定SVG,使image根据组件的大小自动缩放。

        渲染规则的步骤如下:

        A、为整个渲染操作设置clip(border-radius)

        B、绘制背景(background-image)

     C、绘制边界(border-image,border)

     D、绘制覆盖图像(image)

    2、子控件

    一个组件可以看作一颗子控件树。例如QComboBox绘制下拉按钮子控件,下拉按钮子控件绘制了向下箭头子控件。

        子控件享有父子关系。QComboBox中,向下箭头的父亲是下拉按钮,下拉按钮的父亲的QComboBox组件本身。子控件可以使用subcontrol-position熟悉和subcontrol-origin属性定位在父组件内。

        一旦定位,子控件就可以使用盒子模型定制样式。

    注意,像QComboBox和QScrollBar这样复杂的组件,如果有一个属性或是子控件选择器被定制,所有其他的属性或是子控件选择器也要必须被定制。

     

    五、QT样式表参考

    QT样式表支持多种的属性、状态和子控件,使得定制组件的外观成为可能。

    1、组件

    以下组件都可以使用样式表定制样式。

    组件

    如何设置样式

    QAbstractScrollArea

    支持盒子模型。

    QAbstractScrollArea的所有继承类,包括QTextEdit和QAbstractItemView(所有的项视图类),都支持可滚动的背景,使用background-attachment来设置是否滚动。将background-attachment设置成fixed的话,就会使得background-image不随视口(viewport)而滚动。如果将background-attachment设置成scroll,移动滚动条时,background-image会滚动。

    参考自定义QAbstractScrollArea的示例。

    QCheckBox

    支持盒子模型。选中状态的指示器可使用::indicator子控件(subcontrol)来进行样式设置。默认情况下,指示器放在组件的内容矩形的左上角。

    spacing属性指定选中状态指示器与文字之间的空隙。

    参考自定义QCheckBox示例。

    QColumnView

    可使用image属性来对收缩状态进行样式设置。箭头指示器(arrow indicators)可使用::left-arrow和::right-arrow子控件来进行样式设置。

    QComboBox

    组合框的框架(frame)可使用盒子模型来进行样式设置。下拉按钮可使用::drop-down子控件来进行样式设置。默认情况下,下拉按钮放置在组件的衬底区域的右上角。下拉按钮中的箭头标志可使用::down-arrow子控件来进行样式设置。默认情况下,箭头是放置在下拉按钮子控件的内容区域的中心。

    参考自定义QComboBox示例。

    QDialog

    只支持background、background-clip和background-origin属性。

    警告:确保在自定义的组件中定义了Q_OBJECT宏。

    QDialogButtonBox

    按钮的布局方式可使用button-layout属性来改变。

    QDockWidget

    在停靠状态(docked),支持对标题栏和标题栏的按钮进行样式设置。

    停靠组件的边框(border)可使用border属性来进行样式设置。::title子控件可用来对标题栏进行样式设置。关闭按钮和悬浮按钮相对于::title子控件的位置可分别使用::close-button和::float-button来进行设置。如果标题栏是竖直的,会设置:vertical伪类。

    此外,根据QDockWidget::DockWidgetFeature值,设置:closable、:floatable和:movable伪状态。

    注意:使用QMainWindow::separator对改变大小的句柄进行样式设置。

    警告:在QDockWidget不处于停靠状态时,样式表无效。

    参考自定义QDockWidget示例。

    QFrame

    支持盒子模型。

    从QT4.3 开始,对QLabel设置样式表,会自动将QFrame::frameStyle属性设置成QFrame::StyledPanel。

    参考自定义QFrame示例。

    QGroupBox

    支持盒子模型。标题可使用::title子控件来进行样式设置。默认情况下,标题根据QGroupBox::textAlignment 属性进行定位。

    对于选中的QGroupBox,标题包含选中状态指示器。指示器可使用::indicator子控件来进行样式设置。spacing属性用来设置文字与指示器之间的间隔。

    参考自定义QGroupBox示例。

    QHeaderView

    支持盒子模型。表头视图的各个区域使用::section子控件来进行样式设置的。section子控件支持:middle、:first、:last、 only-one、

    :next-selected、:previous-selected、:selected和:checked伪状态。

    排序指示器使用::up-arrow和::down-arrow子控件来进行样式设置。

    参考自定义QHeaderView示例。

    QLabel

    支持盒子模型。不支持:hover伪状态。

    从QT4.3 开始,对QLabel设置样式表会自动将QFrame::frameStyle 属性设置成QFrame::StyledPanel。

    参考自定义QFrame示例(QLabel继承自QFrame)。

    QLineEdit

    支持盒子模型。

    选中的项的颜色和背景分别是使用selection-color和selection-background-color来进行样式设置。

    密码字符可使用lineedit-password-character属性来进行样式设置。

    密码掩码延迟可使用lineedit-password-mask-delay属性修改。

    参考自定义QLineEdit示例。

    QListView/

    QListWidget

    支持盒子模型。如果交替改变行颜色功能打开,交替的颜色使用alternate-background-color属性来进行样式设置。

    选中的项的颜色和背景分别是使用selection-color和selection-background-color来进行样式设置。

    选择行为由show-decoration-selected属性来进行控制。

    使用::item子控件来对QListView中的项进行更精细控制。

    参考QAbsractScrollArea以了解对可滚动的背景的样式设置。

    参考自定义QListView示例。

    QMainWindow

    支持对分隔符进行样式设置。

    在QMainWindow中使用QDockWidget时产生的分隔符使用::separator子控件来进行样式设置。

    参考自定义QMainWindow示例。

    QMenu

    支持盒子模型。

    单个的项使用::item子控件来进行样式设置。除通常的伪状态外,item子控件还支持:selected、:default、:exclusive和non-exclusive伪状态。

    复选选的菜单项指示器是通过::indicator子控件来进行样式设置。

    分隔符是使用::separator子控件进行样式设置。

    对于有子菜单的项,箭头标记是使用right-arrow和left-arrow进行样式设置。

    滚动器使用::scroller进行样式设置。

    分离菜单使用::tearoff来进行样式设置。

    参考自定义QMenu示例。

    QMenuBar

    支持盒子模型。spacing属性指定菜单项之间的空隙大小。

    单个的项使用::item子控件进行样式设置。

    警告:在Qt/Mac平台上,菜单栏通常嵌入到系统的全局菜单条中。在这种情况下,样式单无效。

    参考自定义QMenuBar示例。

    QMessageBox

    messagebox-text-interaction-flags属性用来选择消息框中文字的交互模式。

    QProgressBar

    支持盒子模型。进度条的进度块使用::chunk子控件来进行样式设置。进度块显示在组件的内容区域中。

    如果进度条显示文字,使用text-align属性来设置文字的位置。

    不确定的进度条使用:indeterminate伪状态设置。

    参考自定义QProgressBar示例。

    QPushButton

    支持盒子模型。支持:default、:flat、:checked伪状态。

    对于带菜单的QPushButton,其菜单指示器是使用::menu-indicator子控件来进行样式设置的。复选的按钮的外观可使用:pen和:closed伪状态进行样式设置。

    警告:如果只为QPushButton设置background-color,背景可能不会显示出来,除非将边框属性设置成某个值。这是因为,在默认情况下,QPushButton会绘制一个完全覆盖了背景色的本地边框。例如,

    QPushButton { border: none; }

    参考自定义QPushButton示例。

    QRadioButton

    支持盒子模型。选中指示器使用::indicator子控件进行样式设置。默认情况下,指示器放置在组件内容区域的左上角。

    spacing属性指定选中指示器与文字之间的空隙。

    参考自定义QRadioButton示例。

    QScrollBar

    支持盒子模型。组件中的内容区域就是滑块滑动的槽。QScrollBar的广度是使用width或height属性设置的。要确定方向,使用:horizontal和:vertical伪状态。

    滑块使用::handle子控件进行样式设置。设置min-width或min-height按照方向来对滑块提供尺寸的限制。

    ::add-line子控件用来对增加一行的按钮进行样式设置。默认情况下,add-line子控件放置在组件边框区域的右下角。默认情况下,箭头放置在::add-line子控件内容区域的中心。

    ::sub-line子控件用来对减少一行的按钮进行样式设置。默认情况下,sub-line子控件被放置在组件边框区域的左上角。默认情况下,箭头放置在sub-line子控件内容区域的中心。

    ::sub-page子控件用来对减一页作用的滑块区域进行样式设置。::add-page子控件用来对起到加一页作用的滑块区域进行样式设置。

    参考自定义QScrollBar示例。

    QSizeGrip

    支持width、height和image属性。

    参考自定义QSizeGrip示例。

    QSlider

    支持盒子模型。对于水平滑动器,必须提供min-width和height属性。对于竖直滑动器,必须提供min-height和width属性。

    滑动器的滑槽使用::groove进行样式设置。默认情况下,滑槽被放置在组件的内容区域中。滑动器的滑块使用::handle子控件进行样式设置。子控件在滑槽的内容区域中移动。

    参考自定义QSlider示例。

    QSpinBox

    QDateEdit

    QDateTimeEdit

    QDoubleSpinBox

    QTimeEdit

    旋转框的框架使用盒子模型来进行样式设置。

    向上按钮和箭头可使用::up-button和::up-arrow子控件来进行样式设置。默认情况下,向上按钮被放置在组件填充区域的右上角。如果没有显式设置尺寸,会占据参考区域的一半高度。向上箭头被放置在向上按钮的内容区域的中心。

    向下按钮和箭头使用::down-button和::down-arrow子控件进行样式设置。默认情况下,向下按钮被放置在组件填充区域的右下角。如果没有显式设置尺寸,会占据参考区域的一半高度。向下箭头被放置在向下按钮的内容区域的中心。

    参考自定义QSpinBox示例。

    QSplitter

    支持盒子模型。分割器的句柄使用::handle子控件进行样式设置。

    参考自定义QSplitter示例。

    QStatusBar

    只支持background属性。单个项的框架使用::item子控件进行样式设置。

    参考自定义QStatusBar示例。

    QTabBar

    单个标签使用::tab子控件进行样式设置。关闭按钮使用::close-button子控件进行样式设置。标签支持 only-one、:first、:last、:middle、:previous–selected、:next-selected、:selected伪状态。

    标签的方向决定是否有:top、:left、:right、:bottom伪状态。

    对于选中状态的重叠标签通过使用负数的边距或绝对位置模式来创建。

    QTabBar的分离指示器使用::tear子控件进行样式设置。

    QTabBar用两个QToolButtons作为滚动器,使用QTabBar QToolButton选择器进行样式设置。使用::scroller子控件指定滚动按钮的宽度。

    QTabBar中标签的对齐方式使用alignment属性进行设置。

    警告:要改变QTabWidget中的QTabBar的位置,使用tab-bar子控件。

    参考自定义QTabBar示例。

    QTabWidget

    标签组件的框架使用::pane子控件进行样式设置。左边角和右边角分别使用::left-corner和::right-corner进行样式设置。标签条的位置使用::tab-bar子控件控制。

    默认情况下,QTabWidget的子控件的位置按照QWindowsStyle风格来确定。要将QTabBar放置在中央的位置,设置tab-bar子控件的subcontrol-position属性。

    标签组方向决定是否有:top、:left、:right、:bottom伪状态。

    参考自定义QTabWidget示例。

    QTableView

    支持盒子模型。如果交替改变行颜色功能开启,交替的颜色使用alternate-background-color属性进行样式设置。

    选中的项的颜色和背景分别是使用selection-color和selection-background-color进行样式设置。

    QTableView中的边角组件由QAbstractButton实现,使用QTableViewQTableCornerButton::section选择器进行样式设置。

    警告:如果只在QTableCornerButton上设置背景色,背景可能不会显示出来,除非将边框属性设置成某个值。这是因为,默认情况下,QTableCornerButton会绘制一个完全覆盖背景色的本地边框。

    网格的颜色使用gridline-color属性进行设置。

    参考QAbsractScrollArea以了解如何设置可滚动的背景。

    参考自定义QTableView示例。

    QTextEdit

    支持盒子模型。

    选中文字的颜色和背景分别使用selection-color和selection-background-color进行样式设置。

    参考QAbsractScrollArea以了解如何设置可滚动的背景。

    QToolBar

    支持盒子模型。

    工具栏所在的区域(停靠方向)决定是否会有:top、:left、:right、:bottom伪状态。

    :first、:last、:middle、:only-one伪状态指示工具栏的位置是一个线性组(参考QStyleOptionToolBar::positionWithinLine)

    QToolBar的分隔符使用::separator子控件进行样式设置。

    用来移动工具栏的句柄使用::handle子控件进行样式设置。

    参考自定义QToolBar示例。

    QToolButton

    支持盒子模型。

    如果QToolButton有菜单,::menu-indicator子控件用来对菜单指示器进行样式设置。默认情况下,菜单指示器放置在组件填充区域的右下角。

    如果QToolButton是QToolButton::MenuButtonPopup模式,::menu-button子控件用来绘制菜单按钮。::menu-arrow子控件用来在菜单按钮里面绘制菜单箭头。默认情况下,菜单按钮子控件位于内容区域的中心。

    当QToolButton显示箭头时,会使用::up-arrow、::down-arrow、::left-arrow和::right-arrow子控件。

    警告:如果只在QToolButton 设置背景色,背景可能不会显示出来,除非将边框属性设置成某个值。这是因为,默认情况下,QToolButton会绘制一个完全覆盖背景色的本地边框。例如,

    QToolButton { border: none; }

    参考自定义QToolButton示例。

    QToolBox

    支持盒子模型。

    单个标签使用::tab子控件进行样式设置。标签支持 :only-one、:first、:last、:middle、:previous-selected、:next-selected、:selected伪状态。

    QToolTip

    支持盒子模型。opacity属性控制工具提示的透明度。

    参考自定义QFrame示例(QToolTip是QFrame)。

    QTreeView

    QTreeWidget

    QTableWidget

    支持盒子模型。如果交替改变行颜色功能开启,交替的颜色使用alternate-background-color属性进行样式设置。

    选中项的颜色和背景分别是使用selection-color和selection-background-color进行样式设置。

    选择行为由show-decoration-selected属性进行控制。

    树型视图的分支使用::branch子控件进行样式设置。::branch子控件支持:open、:closed、:has-sibling和:has-children伪状态。

    使用::item子控件对QTreeView中的项进行更精细控制。

    参考QAbsractScrollArea以了解如何设置可滚动的背景。

    参考自定义QTreeView示例以了解如何对分支进行样式设置。

    QWidget

    只支持background、background-clip和background-origin属性。

    如果从QWidget派生子类,需要为自定义组件提供绘制事件处理函数(paintEvent):

    void CustomWidget::paintEvent(QPaintEvent *)

    {

    QStyleOption opt;

    opt.init(this);

    QPainter p(this);

    style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);

    }

    如果没有设置样式单,以上的代码不起任何作用。

    警告:确保在自定义组件中定义了Q_OBJECT宏。

     

     

     

    六、QT样式表实例

    1、样式表的使用

    A、定制前景色和背景色

        设置应用程序中的所有QLineEdit组件的背景色为黄色

        qApp->setStyleSheet("QLineEdit {

        如果只想要属性用于具体某个对话框的QLineEdit及子类组件。

        myDialog->setStyleSheet("QLineEdit {

        如果只想将属性用于某个具体的QLineEdit组件,可以使用QObject::setObjectName() 和ID选择器。

        myDialog->setStyleSheet("QLineEdit#nameEdit {

        可以直接设置QLieEdit组件的background-color属性,忽略选择器

        nameEdit->setStyleSheet("

        为了确保对比效果,应该指定文本合适的颜色

        nameEdit->setStyleSheet("color: blue;

        修改选中文本的颜色如下:

        nameEdit->setStyleSheet("color: blue;"

                              ""

                              "selection-color: yellow;"

                              "selection-");

    B、使用动态属性定制样式

    为了提示用户字段是必填的,对这些字段使用黄色作为背景色。要使用QT样式表是现实很容易的。首先,应该使用应用程序的样式表:

    *[mandatoryField="true"] { margin: 0px; clear: both; height: auto; overflow: hidden; color: rgb(85, 85, 85); font-family: 宋体, "Arial Narrow", arial, serif; text-indent: 28px; text-align: justify;">这意味着mandatoryField字段设置为true的组件的背景色为黄色。

    对于每个必备字段组件,我们匆忙中简单创建了一个mandatoryField属性并设置为true。

        QLineEdit *nameEdit = new QLineEdit(this);

        nameEdit->setProperty("mandatoryField", true);

     

        QLineEdit *emailEdit = new QLineEdit(this);

        emailEdit->setProperty("mandatoryField", true);

     

       QSpinBox *ageSpinBox = new QSpinBox(this);

       ageSpinBox->setProperty("mandatoryField", true);

    C、使用盒子模型定制QPushButton

    本节我们展示如何创建一个红色的按钮。

    QPushButton#evilButton

    {

          

          border-style: outset;

          border-width: 2px;

          border-radius: 10px;

          border-color: beige;

          font: bold 14px;

          min-width: 10em;

          padding: 6px;

      }

      QPushButton#evilButton:pressed

    {

          

          border-style: inset;

      }

    D、定制按钮菜单指示器子控件

        子控件可以访问组件的子元素。例如,按钮会使用QPushButton::setMenu()关联菜单与菜单指示器。定制红色按钮的菜单指示器如下:

    QPushButton#evilButton::menu-indicator

    {

          image: url(myindicator.png);

     }

        默认,菜单指示器定位在衬底区域的右下角。通过改变subcontrol-position、subcontrol-origin属性可以定位指示器。

    QPushButton::menu-indicator

    {

          image: url(myindicator.png);

          subcontrol-position: right center;

          subcontrol-origin: padding;

          left: -2px;

      }

        Myindicator.png的位置在按钮衬底区域的右中心。

    E、复杂选择器示例

        设置应用程序样式表中QLineEdit文本为红色。

        QLineEdit { color: red }

        然而,想要设置一个只读QLineEdit的文本颜色为灰色如下:

        QLineEdit { color: red }

        QLineEdit[readOnly="true"] { color: gray }

        某些情况下,如果要求注册表单中的所有QLineEdit为棕色。

        QLineEdit { color: red }

         QLineEdit[readOnly="true"] { color: gray }

         #registrationDialog QLineEdit { color: brown }

        如果要求所有对话框中的QLineEdit为棕色。

        QLineEdit { color: red }

        QLineEdit[readOnly="true"] { color: gray }

        QDialog QLineEdit { color: brown }

     

    2、定制特殊组件

    本节提供使用样式表定制特定组件的实例。

    (1)、定制QAbstractScrollArea

    任何QAbstractScrollArea组件(项视图、QTextEdit、QTextBrowser)的背景都可以使用bakcground属性设置。例如,设置带有滚动条滚动的背景图属性如下:

    QTextEdit, QListView 

    {

          

          background-image: url(draft.png);

          background-attachment: scroll;

      }

    如果设置background-image属性在视口中固定。

    QTextEdit, QListView 

    {

          

          background-image: url(draft.png);

          background-attachment: fixed;

      }

    (2)、定制QCheckBox

    进行QCheckBox样式设置与QRadioButton样式设置相同。主要区别在于三态的QCheckBox有一个模糊态。

    QCheckBox 

    {

          spacing: 5px;

      }

     

      QCheckBox::indicator

    {

          width: 13px;

          height: 13px;

      }

     

      QCheckBox::indicator:unchecked

    {

          image: url(:/images/checkbox_unchecked.png);

      }

     

      QCheckBox::indicator:unchecked:hover

    {

          image: url(:/images/checkbox_unchecked_hover.png);

      }

     

      QCheckBox::indicator:unchecked:pressed

    {

          image: url(:/images/checkbox_unchecked_pressed.png);

      }

     

      QCheckBox::indicator:checked

    {

          image: url(:/images/checkbox_checked.png);

      }

     

      QCheckBox::indicator:checked:hover

    {

          image: url(:/images/checkbox_checked_hover.png);

      }

     

      QCheckBox::indicator:checked:pressed

    {

          image: url(:/images/checkbox_checked_pressed.png);

      }

     

      QCheckBox::indicator:indeterminate:hover

    {

          image: url(:/images/checkbox_indeterminate_hover.png);

      }

     

      QCheckBox::indicator:indeterminate:pressed {

          image: url(:/images/checkbox_indeterminate_pressed.png);

      }

    (3)、定制组合框QComboBox

    QComboBox {

          border: 1px solid gray;

          border-radius: 3px;

          padding: 1px 18px 1px 3px;

          min-width: 6em;

      }

     

      QComboBox:editable {

          background: white;

      }

     

      QComboBox:!editable, QComboBox::drop-down:editable {

           background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

                                       stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,

                                       stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);

      }

     

      /* QComboBox gets the "on" state when the popup is open */

      QComboBox:!editable:on, QComboBox::drop-down:editable:on {

          background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

                                      stop: 0 #D3D3D3, stop: 0.4 #D8D8D8,

                                      stop: 0.5 #DDDDDD, stop: 1.0 #E1E1E1);

      }

     

      QComboBox:on { /* shift the text when the popup opens */

          padding-top: 3px;

          padding-left: 4px;

      }

     

      QComboBox::drop-down {

          subcontrol-origin: padding;

          subcontrol-position: top right;

          width: 15px;

     

          border-left-width: 1px;

          border-left-color: darkgray;

          border-left-style: solid; /* just a single line */

          border-top-right-radius: 3px; /* same radius as the QComboBox */

          border-bottom-right-radius: 3px;

      }

     

      QComboBox::down-arrow {

          image: url(/usr/share/icons/crystalsvg/16x16/actions/1downarrow.png);

      }

     

      QComboBox::down-arrow:on { /* shift the arrow when popup is open */

          top: 1px;

          left: 1px;

      }

        组合框的弹出菜单是QAbstractItemView,使用后代选择器进行样式设置。

      QComboBox QAbstractItemView {

          border: 2px solid darkgray;

          selection-

      }

    (4)、定制QDockWidget

    QDockWidget的标题栏和按钮可以按如下进行样式设置。

    QDockWidget

    {

        border: 1px solid lightgray;

        titlebar-close-icon: url(close.png);

        titlebar-normal-icon: url(undock.png);

    }

     

    QDockWidget::title

    {

        text-align: left; /* align the text to the left */

        background: lightgray;

        padding-left: 5px;

    }

     

    QDockWidget::close-button, QDockWidget::float-button

    {

        border: 1px solid transparent;

        background: darkgray;

        padding: 0px;

    }

     

    QDockWidget::close-button:hover, QDockWidget::float-button:hover

    {

        background: gray;

    }

     

    QDockWidget::close-button:pressed, QDockWidget::float-button:pressed

    {

        padding: 1px -1px -1px 1px;

    }

    如果要移动停靠组件按钮到左侧,可以使用如下样式表设置:

    QDockWidget 

    {

          border: 1px solid lightgray;

          titlebar-close-icon: url(close.png);

          titlebar-normal-icon: url(float.png);

     }

     

      QDockWidget::title 

      {

          text-align: left;

          background: lightgray;

          padding-left: 35px;

      }

     

      QDockWidget::close-button, QDockWidget::float-button 

      {

          background: darkgray;

          padding: 0px;

          icon-size: 14px; /* maximum icon size */

      }

     

      QDockWidget::close-button:hover, QDockWidget::float-button:hover 

      {

          background: gray;

      }

     

      QDockWidget::close-button:pressed, QDockWidget::float-button:pressed 

      {

          padding: 1px -1px -1px 1px;

      }

     

      QDockWidget::close-button 

      {

          subcontrol-position: top left;

          subcontrol-origin: margin;

          position: absolute;

          top: 0px; left: 0px; bottom: 0px;

          width: 14px;

      }

     

      QDockWidget::float-button 

      {

          subcontrol-position: top left;

          subcontrol-origin: margin;

          position: absolute;

          top: 0px; left: 16px; bottom: 0px;

          width: 14px;

      }

    (5)、定制QFrame

    QFrame, QLabel, QToolTip 

    {

          border: 2px solid green;

          border-radius: 4px;

          padding: 2px;

          background-image: url(images/welcome.png);

    }

    (6)、定制QGroupBox

    QGroupBox

    {

        background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

                                          stop: 0 #E0E0E0, stop: 1 #FFFFFF);

        border: 2px solid gray;

        border-radius: 5px;

        margin-top: 1ex; /* leave space at the top for the title */

    }

    QGroupBox::title

    {

        subcontrol-origin: margin;

        subcontrol-position: top center; /* position at the top center */

        padding: 0 3px;

        background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

                                          stop: 0 #FF0ECE, stop: 1 #FFFFFF);

    }

    QGroupBox::indicator

    {

        width: 13px;

        height: 13px;

    }

     

    QGroupBox::indicator:unchecked

    {

        image: url(:/images/checkbox_unchecked.png);

    }

    (7)、定制QHeaderView

    QHeaderView::section 

    {

        background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,

                                          stop:0 #616161, stop: 0.5 #505050,

                                          stop: 0.6 #434343, stop:1 #656565);

    color: white;

        padding-left: 4px;

    border: 1px solid #6c6c6c;

    }

     

    QHeaderView::section:checked

    {

        background-color: red;

    }

     

    QHeaderView::down-arrow 

    {

        image: url(down_arrow.png);

    }

     

    QHeaderView::up-arrow 

    {

        image: url(up_arrow.png);

    }

    (8)、定制QLineEdit

    QLineEdit的框架使用盒子模型进行样式设置。

    QLineEdit 

    {

        border: 2px solid gray;

        border-radius: 10px;

        padding: 0 8px;

        background: yellow;

        selection-background-color: darkgray;

    }

    QLineEdit的密码字符使用QLineEdit::Password显示模式设置。

    QLineEdit[echoMode="2"] 

    {

        lineedit-password-character: 9679;

    }

    只读QLineEdit的背景可以如下修改:

    QLineEdit:read-only 

    {

        background: lightblue;

    }

    展开全文
  • Qt样式

    2017-03-03 09:02:43
    导语 一个完善的应用程序不仅应该有实用的功能,...Qt样式表是一个可以自定义部件外观的十分强大的机制。Qt样式表的概念、术语和语法都受到了HTML的层叠样式表(Cascading StyleSheets,CSS)的启发,不过与CSS
    导语


    一个完善的应用程序不仅应该有实用的功能,还要有一个漂亮的外观,这样才能使应用程序更加友善,更加吸引用户。作为一个跨平台的UI开发框架,Qt提供了强大而灵活的界面外观设计机制。
    Qt样式表是一个可以自定义部件外观的十分强大的机制。Qt样式表的概念、术语和语法都受到了HTML的层叠样式表(Cascading StyleSheets,CSS)的启发,不过与CSS不同的是,Qt样式表应用于部件的世界。


    环境: Windows Xp + Qt 4.8.5+QtCreator2.8.0


    目录


    一、简介
    二、在设计模式使用Qt 样式表
    三、在代码中设置Qt 样式表
    四、样式表语法



    正文



    一、简介


    要学习Qt样式表,需要对其有一个全面的了解,应该知道它到底有什么用,可以给哪些部件设置样式。为了了解这些内容,我们先在Qt帮助中查看Qt StyleSheets关键字,如下图所示。




    这里将所有内容分为了几部分:The Style Sheet Syntax中介绍了Qt样式表的语法,就是一些使用规则;Qt Designer Integration中介绍了如何在设计器中使用Qt样式表;CustomizingQt Widgets Using Style Sheets中介绍了如何使用Qt样式表来定制部件样式;QtStyle Sheets Reference中罗列了Qt中所有可以使用样式表的部件;QtStyle Sheets Examples中列出了常用部件使用样式表的例子,这个是我们后面学习使用时的重要参考。



    二、在设计模式使用Qt 样式表



    1. 新建Qt Gui 应用,项目名称为myStyle ,其他保持默认即可。完成后打开mainwindow.ui 进入设计模式,然后拖入一个Push Button 按钮。



    2. 在按钮部件上右击,选择“改变样式表”菜单项,在弹出的编辑样式表对话框中点击“添加颜色”下拉框,然后选择background-color ,我们为其添加背景颜色。如下图所示。





    这时会弹出选择颜色按钮,大家可以随便选择一个颜色,这里选择了红色,然后点击确定按钮关闭对话框。添加好的代码如下图所示。这种方法可以快速设置样式表,当然我们也可以自己手动来添加代码。






    3. 完成后大家可能发现按钮的颜色并没有改变,不要着急,这时运行程序,发现已经有效果了。如下图所示。





    4. 其实在设计模式还可以很容易地使用背景图片,这个需要使用Qt 资源,大家可以试试,这里就不再介绍。



    三、在代码中设置Qt 样式表



            既然在设计器中可以使用样式表,那么使用代码就一定可以实现。在代码中可以使用setStyleSheet() 函数来设置样式表,不过用两种设置方法。



    1. 设置所有的相同部件都使用相同的样式。我们在mainwindow.cpp 的构造函数中添加如下代码:
    setStyleSheet( "QPushButton   {   color:   white   }" );

    这时运行程序,效果如下图所示。





    可以看到按钮的文本颜色变成了白色,不过这种方式是给所有QPushButton 类对象设置的样式。也就是说,我们再往界面上拖放其他的Push Button ,它的文本颜色也会变成白色。



    2. 那么怎样才能只给特定的一个按钮设置样式表呢,这就需要使用第二种方式了。我们接着在mainwindow.cpp 构造函数中添加代码:



    ui -> pushButton ->setStyleSheet( "color:   blue " );


    这样就是只给先前添加的 pushButton 按钮设置了样式,将文本颜色设置为蓝色。为了有一个对比,大家可以再往界面上拖入一个 Push Button 按钮,然后运行程序,如下图所示。




    也许现在又会问了,怎么按钮的背景不是红色的了?这是因为一个部件只能单独设置一个样式表,我们在代码中为 pushButton 设置了样式表就会屏蔽设计器中设置的。这里只是说单独为一个部件同时设置了多个样式表会出现这种情况,如果对其父类进行设置,则只会对其有影响,但是不会屏蔽掉自己的样式表,比如前面按钮的红底白字就是这种情况。


    下面我们把代码更改如下:


    ui -> pushButton ->setStyleSheet( "background-color:red;   color:   blue" );


    再次运行程序,可以发现已经是红底蓝字了。效果如下图所示。





    现在大家应该可以了解到,我们前面在设计模式中就是只为指定的pushButton 按钮设置了背景。




    四、样式表语法



    1. 样式规则



    样式表包含了一系列的样式规则,一个样式规则由一个选择符(selector)和一个声明(declaration)组成。选择符指定了受该规则影响的部件;声明指定了这个部件上要设置的属性。例如:


    QPushButton{color:red}


            在这个样式规则中, QPushButton 是选择符,{color:red}是声明,而color是属性,red是值。这个规则指定了QPushButton和它的子类应该使用红色作为它们的前景色。Qt样式表中一般不区分大小写,例如color、Color、COLOR和COloR表示相同的属性。只有类名,对象名和Qt属性名是区分大小写的。一些选择符可以指定相同的声明,只需要使用逗号隔开,例如:


    QPushButton,QLineEdit,QComboBox{color:red}


            一个样式规则的声明部分是一些属性:值对组成的列表,它们包含在大括号中,使用分号隔开。例如:


    QPushButton{color:red;background-color:white}



    2. 子控件(Sub-Controls



    对一些复杂的部件修改样式,可能需要访问它们的子控件,例如QComboBox的下拉按钮,还有QSpinBox的向上和向下的箭头等。选择符可以包含子控件来对部件的特定子控件应用规则,例如:


    QComboBox::drop-down{image:url(dropdown.png)}


            这样的规则可以改变所有的QComboBox 部件的下拉按钮的样式。在 Qt Style Sheets Reference 关键字对应的帮助文档的 List of Stylable Widgets 一项中列出了所有可以使用样式表来自定义样式的Qt 部件,在 List of Sub-Controls 一项中列出了所有可用的子控件。



    3. 伪状态(Pseudo-States


    选择符可以包含伪状态来限制规则在部件的指定的状态上应用。伪状态出现在选择符之后,用冒号隔离,例如:


    QPushButton:hover{color:white}


            这个规则表明当鼠标悬停在一个QPushButton 部件上时才被应用。伪状态可以使用感叹号来表示否定,例如要当鼠标没有悬停在一个QRadioButton 上时才应用规则,那么这个规则可以写为:


    QRadioButton:!hover{color:red}


            伪状态还可以多个连用,达到逻辑与效果,例如当鼠标悬停在一个被选中的QCheckBox 部件上时才应用规则,那么这个规则可以写为:


    QCheckBox:hover:checked{color:white}


            如果有需要,也可以使用逗号来表示逻辑或操作,例如:


    QCheckBox:hover,QCheckBox:checked{color:white}


    Qt Style Sheets Reference关键字对应的帮助文档的 List of Pseudo-States一项中列出了Qt支持的所有的伪状态。



    4. 例子


            大家可以在Qt Style Sheets Examples 页面找到很多相关的例子来学习,例如,下面是QSpinBox 部件的一段样式表:

    QSpinBox {
          padding-right: 15px; /* make room for the arrows */
          border-image: url(:/images/frame.png) 4;
          border-width: 3;
    }
    QSpinBox::up-button {
          subcontrol-origin: border;
          subcontrol-position: top right; /* position at the top right corner */
          width :   16px ;   /*   16   +   2*1px   border-width   =   15px   padding   +   3px   parent   border   */
          border-image: url(:/images/spinup.png) 1;
          border-width: 1px;
    }
    QSpinBox::up-button:hover {
          border-image: url(:/images/spinup_hover.png) 1;
    }
    QSpinBox::up-button:pressed {
          border-image: url(:/images/spinup_pressed.png) 1;
    }
    QSpinBox::up-arrow {
          image :   url(:/images/up_arrow.png);
          width :   7px ;
          height :   7px ;
    }
    QSpinBox::up-arrow:disabled, QSpinBox::up-arrow:off { /* off state when value is max */
         image :   url(:/images/up_arrow_disabled.png);
    }
    QSpinBox::down-button {
          subcontrol-origin: border;
          subcontrol-position: bottom right; /* position at bottom right corner */
          width :   16px ;
          border-image: url(:/images/spindown.png) 1;
          border-width: 1px;
          border-top-width: 0;
    }
    QSpinBox::down-button:hover {
          border-image: url(:/images/spindown_hover.png) 1;
    }
    QSpinBox::down-button:pressed {
          border-image: url(:/images/spindown_pressed.png) 1;
    }
    QSpinBox::down-arrow {
          image :   url(:/images/down_arrow.png);
          width :   7px ;
          height :   7px ;
    }
    QSpinBox::down-arrow:disabled,
    QSpinBox::down-arrow:off { /* off state when value in min */
         image :   url(:/images/down_arrow_disabled.png);
    }


    结语

       

    要想为软件设计一个漂亮的界面,需要灵活使用Qt样式表,不过这需要一定的CSS功底,还需要有美工经验。这一节只是简单介绍了下Qt中样式表的应用,只为抛砖引玉。大家也可以参考《QtCreator快速入门》第8章的相关内容,里面还涉及到了换肤、透明窗体、不规矩窗体等内容。

    展开全文
  • Qt样式表详解

    千次阅读 2019-06-26 11:27:47
    一、QT样式表简介 1、QT样式表简介 QSS的主要功能是使界面的表现与界面的元素分离,使得设计皮肤与界面控件分离的软件成为可能。 QT样式表是允许用户定制widgets组件外观的强大机制,此外,子类化QStyle也可以...
  • Qt样式表总结

    2020-02-17 20:54:21
    QSS称为Qt Style Sheets也就是Qt样式表,它是Qt提供的一种用来自定义控件外观的机制。QSS大量参考了CSS的内容,只不过QSS的功能比CSS要弱很多,体现在选择器要少,可以使用的QSS属性也要少很多,并且并不是所有的...
  • Qt样式表属性

    2021-07-05 10:34:20
    Qt样式表属性 日期 作者 版本 07.05 Mister H V1.0 目录Qt样式表属性选择器类型样式表语法1. 设置高、宽度。单位:像素(px)2. 设置背景颜色 四种颜色表示方式2. 文本颜色3. 边框4. 伪状态列表5. 子部件 ...
  • QT 样式表属性完整版

    2020-09-22 00:46:15
    QT 样式表所有属性
  • 第45篇 进阶(五)Qt样式表导语一个完善的应用程序不仅应该有实用的功能,还要有一个漂亮的外观,这样才能使应用程序更加友善,更加吸引用户。作为一个跨平台的UI开发框架,Qt提供了强大而灵活的界面外观设计机制。Qt...
  • Qt样式表学习

    千次阅读 2016-08-02 15:54:38
    1. 何为Qt样式表 2. 样式表语法基础 3. 方箱模型 4. 前景与背景 5. 创建可缩放样式 6. 控制大小 7. 处理伪状态 8. 使用子部件定义微观样式  8.1. 相对定位  8.2. 绝对定位 1.何为Qt样式Qt样式表...
  • QT样式表2

    2018-03-29 14:52:19
    QT开发(六十四)——QT样式表 本文主要翻译自QT官方文档Qt Style Sheets 。五、QT样式表参考QT样式表支持多种的属性、状态和子控件,使得定制组件的外观成为可能。1、组件以下组件都可以使用样式表定制样式。组件...
  • Qt4_使用Qt样式

    2021-06-28 14:13:45
    使用Qt样式表 Qt的样式表主要是受到了CSS的启发,但同时也适用于窗口部件。样式表由影响窗口部件给制的样式规则组成。这些规则是普通文本。由于在运行时会解析样式表,所以可以通过制定样式表的方式来尝试设计不同的...
  • QT样式修改

    2021-04-01 12:57:54
    1. QT样式表——url路径 绝对路径 setStyleSheet(“background:url(c:/xxx/theme/img.jpg)”); 相对路径 setStyleSheet(“background:url(/theme/img.jpg)”);或setStyleSheet(“background:url(./theme/img.jpg...
  • qt样式表学习

    千次阅读 2014-11-15 11:50:54
    1.何为Qt样式
  • Qt设置样式

    2021-08-18 23:48:51
    Qt设置样式Qt样式Qt样式表语法demo Qt样式 Qt样式表是一个可以自定义部件外观的强大机制,样式表的概念、术语、语法均受到HTML的层叠样式表(Cascading Style Sheets,CSS)的启发。 样式表可通过QApplication::...
  • 11Qt样式

    2018-06-22 22:39:00
    Qt样式Qt样式表的思想很大程度上是来自原HTML的层叠式样式表(CSS),通过调用Qwdiget::setStyleSheet()或是Qapplication::setStyleSheet(),可以为一个独立的子部件、整个窗口、甚至是整个应用程序指定一个样式...
  • qt 样式表基本用法

    2018-08-06 18:12:00
    Qt样式QT样式表参考CSS层叠样式表设计,不同之处在于QT样式表应用于Widget世界。 可以使用QApplication::setStyleSheet()函数设置到整个应用程序上,也可以使用QWidget::setStyleSheet()设置到某一个部件以及子...
  • qt样式

    2019-10-07 10:28:02
    1.QPushButton要做出几选一的样式要勾选2.属性值里的flat打上对勾会取消背景颜色,但运行时点击会出现背景颜色,可在样式表中添加 QPushButton{ border:none; } 可永久取消背景颜色 3.增加下划线 #QPushButton#Phone...
  • QT样式表 V2.0

    2019-09-03 15:40:32
    QT样式表有名称空间 1 子元素 用两个冒号隔开表示名称空间,这样可以非常具体的设置某种类型的对象的样式;如果不加名称空间,则是顶层全局的,全局的表示这个对象以及这个对象的所有孩子都会被设置。 下面的代码...
  • QT背景透明

    2020-08-29 20:12:04
    QT窗体背景透明 如果想要背景透明,可以有但不限于以下三种方法: 1.setWindowOpacity()函数。但是该函数会让整个窗体透明。 2.setAttribute(Qt::WA_TranslucentBackground, true); 该函数使用之后会出现黑色的...
  • QT样式表之QPushButton

    2021-06-13 20:19:43
    1.在Qt Designer 中添加样式 常用代码: border: 2px groove gray; //设置边框的颜色 + 凹下去 border: 2px solid gray; //设置边框的颜色 + 凸起来 border-radius:5px; //设置圆角 (圆形BUtton)设置的大小要...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,812
精华内容 1,124
关键字:

qt样式透明