精华内容
下载资源
问答
  • 【翻译 + 整理】Qt样式表详解(3):属性——边框相关属性
    2021-04-04 17:02:54

    1、border:边框。等效于指定边框颜色,边框样式和/或边框宽度。例:

     QLineEdit { border: 1px solid white }

    2、border-top、border-right、border-bottom、border-left:边框的四个边的设置。

    3、border-color:边框颜色。若未设置默认为color的设置。

    4、border-top-color、border-right-color、border-bottom-color、border-left-color:边框的四个边的颜色。

    5、border-image:用于填充边框的图像。 图像由九个部分组成的图像(左上,顶部居中,右上,左中,居中,右中,左下,居中和右下)。当需要一定大小的边框时,将按原样使用角部分,并拉伸或重复顶、右、底、左部分以生成具有所需大小的边框。

    6、border-radius:边界角的半径。border-radius将裁剪background。未设置则为0。

    7、border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius:具体4个角的边界角半径。

    8、border-style:边框样式。效果:https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-style

    9、border-top-style、border-right-style、border-bottom-style、border-left-style:四个边的样式。

    10、border-width:边框宽度。

    11、border-top-width、border-right-width、border-bottom-width、border-left-width:四个边的宽度。

    更多相关内容
  • Qt样式表属性

    千次阅读 2021-02-11 07:34:46
    QT样式表属性大全Box样式width:宽度height:高度max-width:最大宽度max-height:最大高度min-width:最小宽度min-height:最小高度margin:边距尺寸margin-topmargin-rightmargin-bottommargin-leftpadding:填充...

    QT样式表属性大全

    Box样式

    width:宽度

    height:高度

    max-width:最大宽度

    max-height:最大高度

    min-width:最小宽度

    min-height:最小高度

    margin:边距尺寸

    margin-top

    margin-right

    margin-bottom

    margin-left

    padding:填充尺寸

    padding-top

    padding-right

    padding-bottom

    padding-left

    位置样式

    position:定位属性

    如果position是relative(默认值),则将子控件移动一定的偏移量;如果position是absolute,则指定子控件相对于父控件位置

    top

    right

    bottom

    left

    字体样式

    font:字体样式

    font-family:字体类型

    font-size:字体大小

    font-style:字体风格

    font-weight:字体粗细

    font-color:字体颜色

    文本样式

    text-decoration:文本修饰

    text-align:水平对齐

    背景样式

    background:背影样式

    background-color:背景颜色

    background-image:背景图片

    background-repeat:背景重复

    background-position:背景定位

    background-attachment:背景固定

    background-clip:设置元素的背景(背景图片或颜色)是否延伸到边框下面。

    background-origin:指定背景图片background-image 属性的原点位置的背景相对区域

    边框样式

    border:边框样式

    border-top

    border-top-color

    border-top-style

    border-top-width

    border-right

    border-right-color

    border-right-style

    border-right-width

    border-bottom

    border-bottom-color

    border-bottom-style

    border-bottom-width

    border-left

    border-left-color

    border-left-style

    border-left-width

    border-color:边框颜色

    border-style:边框风格

    border-width:边框宽度

    border-image:边框图片

    border-radius:元素的外边框圆角

    border-top-left-radius

    border-top-right-radius

    border-bottom-right-radius

    border-bottom-left-radius

    颜色样式

    alternate-background-color:交替行颜色

    gridline-color:QTableView中网格线的颜色

    selection-color:所选文本或项目的前景色

    selection-background-color:所选文本或项目的背景色

    轮廓样式

    outline:轮廓属性

    outline-color:设置一个元素轮廓的颜色

    outline-offset:设置 outline 与元素边缘或边框之间的间隙

    outline-style:设置元素轮廓的样式

    outline-radius:设置元素的轮廓圆角

    outline-bottom-left-radius

    outline-bottom-right-radius

    outline-top-left-radius

    outline-top-right-radius

    其他样式

    opacity:控件的不透明度

    icon-size:控件中图标的宽度和高度。

    image:在子控件的内容矩形中绘制的图像

    image-position:在Qt 4.3及更高版本中,可以使用相对或绝对位置指定图像图像位置的对齐

    spacing:控件中的内部间距

    subcontrol-origin:父元素中子控件的原始矩形。

    subcontrol-position:subcontrol-origin指定的原始矩形内子控件的对齐方式。

    button-layout:QDialogBu​​ttonBox或QMessageBox中按钮的布局

    messagebox-text-interaction-flags:消息框中文本的交互行为

    dialogbuttonbox-buttons-have-icons:QDialogBu​​ttonBox中的按钮是否显示图标

    titlebar-show-tooltips-on-buttons:是否在窗口标题栏按钮上显示工具提示。

    widget-animation-duration:动画应该持续多少(以毫秒为单位)。值等于零意味着将禁用动画

    lineedit-password-character:该QLineEdit的密码字符作为Unicode数字。

    lineedit-password-mask-delay:在将lineedit-password-character应用于可见字符之前,QLineEdit密码掩码延迟(以毫秒为单位)

    paint-alternating-row-colors-for-empty-area:QTreeView是否为空白区域(即没有项目的区域)绘制交替的行颜色

    show-decoration-selected:控制QListView中的选择是覆盖整个行还是仅覆盖文本的范围。

    展开全文
  • QT样式表

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

    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 ns {

    class MyPushButton : public QPushButton {

    // ...

    }

    }

    // ...

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

    9、设置QObject属性

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

    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对话框的左下角指示。

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

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

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

    1、盒子模型

    四个同心矩形如下所示:

    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;

    }

    可以参考的文章链接:

    http://9291927.blog.51cto.com/9281927/1888380/

    http://9291927.blog.51cto.com/9281927/1888395

    http://9291927.blog.51cto.com/9281927/1888400

    http://blog.csdn.net/goforwardtostep/article/details/60884870

    http://blog.csdn.net/GoForwardToStep/article/details/64169734

    http://blog.csdn.net/GoForwardToStep/article/details/65451416

    展开全文
  • 1、QT样式表可以让你自定义任何一个QT控件的样式包括颜色、边框、背景等等(你想的到样式都可以),Qt样式表的概念、术语和语法与HTML的CSS样式表类似。2、样式表是文本规范,(1) QApplication::setStyleSheet()在整个...

    1、QT样式表可以让你自定义任何一个QT控件的样式包括颜色、边框、背景等等(你想的到样式都可以),Qt样式表的概念、术语和语法与HTML的CSS样式表类似。

    2、样式表是文本规范,

    (1) QApplication::setStyleSheet()在整个应用程序上设置,一般在main()函数中:

    QFile file(":/qss/abc.qss"); //工程控件样式表需要在qss/abc.qss里面

    file.open(QFile::ReadOnly);

    styleSheet = QLatin1String(file.readAll());

    qApp->setStyleSheet(styleSheet);

    file.close();

    (2)一般形式也可以使用QWidget::setStyleSheet()在特定小部件(及其子部件)上设置。

    例如:

    QPushButton *btn = new QPushButton();

    Btn-> setStyleSheet(“color : red”);//表示字体颜色为红色

    如果在不同级别上设置了多个样式表,Qt将从所有设置的样式表派生有效样式表。这称为级联。

    (3)在QT Designer 中设置

    例如:在要修改样式的控件右击->改变样式表

    针对单个控件按钮

    也可也在顶级窗口右击控件->改变样式表

    针对该窗口中所有的QLineEdit

    二、样式表语法

    样式的规则1:样式规则由选择器和声明组成。选择器指定哪些小部件受规则影响;声明指定应该在小部件上设置哪些属性。

    如:QPushButton { color : red }。

    其中QPushButton就是选择器,'{ color : red }'是声明部分。 color就是属性,red就是指定给该属性的值。

    该语句的意思是QPushButton及其子类的前景色是红色。

    注意:Qt样式表通常不区分大小写,除了类名、对象名和Qt属性名。

    样式的规则2:可以为同一个声明指定多个选择器,使用逗号(,)分隔选择器。

    QPushButton, QLineEdit, QComboBox {color: red}

    样式的规则3:声明多个属性。在{}里面,用 ; 分割

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

    样式的规则4:选择器

    (1)通用选择器

    格式

    * { 属性: 值; }

    通用选择器用( * )来表示, 它表示匹配程序中所有的 widget.

    例如:*{font: normal 20px “微软雅黑”;}

    这条语句表示将程序中所有 widget 的字体大小都设置为 20px 大小, 字体采用微软雅黑.

    (2)类型选择器

    格式

    类名 { 属性: 值; }

    类名即 Widget 类名, 由 QObject :: metaObject() :: className()获取, 类型选择器匹

    配所有该类以及该类的派生类的对象.例如:

    QPushButton{ color: blue; }

    这条语句表示, 程序中所有的 QPushButton 类和它的派生类的对象, 它们的前景色(文字

    颜色)被设置为蓝色.

    (3)类选择器

    格式

    .类名 { 属性: 值; }

    这里的类名与类型选择器中的类名一样, 不同的是, 类选择器的类名前面有一个( . ), 这种

    选择器只会匹配该类的所有对象, 而不会匹配其派生类的对象.例如:

    .QPushButton{ color: blue; }

    (4)ID 选择器

    格式

    #id{ 属性: 值; }

    这里的 id 指的是 objectName, 每个 QObject 类及其派生类都有的一个属性, “#” + objectName

    构成了我们的 ID 选择器, 它匹配所有 objectName 为 ID 选择器所指定的名称的对象, 为其设

    置样式. 例如:

    #button_1{ color: red; }

    (5)后代选择器

    格式

    选择器 1 选择器 2{ 属性: 值; }

    这个选择器表示: 在选择器 1 匹配的所有对象中, 找到选择器 2 所匹配的所有后代对象, 并 给它们设置样式.

    注意点:

    1. 后代选择器必须用空格隔开每个选择器

    2. 后代选择器可以通过空格一直延续下去, 例如:

    选择器 1 选择器 2 选择器 3 … 选择器 N{ 属性: 值; }

    3. 顾名思义, 后代选择器不仅包含”儿子”, 还包含”孙子”, “重孙子”等, 一般来说, 只要 B 控

    件显示在 A 控件上, 那么 B 控件就是 A 控件的后代.

    4. 后代选择器不仅可以使用类型选择器, 还可以使用类选择器, id 选择器等.

    5. Qt 中, 各控件的父子关系:

    通过简单的验证, 各控件的父子关系并非我们在创建对象时所指定的那样, 实际父子关

    系取决于如何布局.

    例如:

    BaseDialog QPushButton{

    min-width: 120px;

    min-height: 40px;

    max-width: 120px;

    max-height: 40px;

    font-size: 20px;

    padding: 0px;

    }

    (6)子元素选择器

    格式

    选择器 1 >选择器 2 { 属性: 值; }

    子元素选择器表示找到指定选择器所匹配的对象中的所有特定直接子元素然后设置属性,

    即找到选择器 1 匹配到的对象中的被选择器 2 匹配盗的直接子元素然后设置属性

    注意点:

    1. 子元素选择器必须用”>”连接, “>”两边有没有空格都可以, 但是不建议写空格, 因为会与

    后代选择器的连接符混淆.

    2. 子元素选择器只会查找”儿子”, 不会查找其他后代.

    3. 子元素选择器不仅可以使用类型选择器, 还可以使用类选择器,id 等选择器

    4. 子元素选择器不能通过”>”一直延续下去, 只能有一个”>”

    5. 由于 Qt 中有继承关系的 Widgets 较多, 在使用子元素选择器时, 请特别注意继承关系,

    比如我只想选中 QGroupBox 中的 QPushButton, 那么我即可以写成

    QWidget >QPushButton{color: red;} ○1

    也可以写成

    QGroupBox>QPushButton{color: red;} ○2

    这是因为 QGroupBox 是 QWidget 的派生类, 类型选择器 QWidget 会选中所有它的派生

    类对象,这些对象中包括 QGroupBox, 因此写法○1 会将所有的 QPushButton 的前景

    色设置为红色.

    鉴于此种情况, 我推荐在使用子元素选择器时, 使用类选择器替代类型选择

    一般用法

    子元素选择器一般用于一些特定布局条件中的控件, 例如我想给直接布局在 QGroupBox 的

    QCheckBox 设置一些特定属性, 那么可以这样做:

    .QGroupBox > .QCheckBox{

    color: blue;

    }

    (7)属性选择器

    格式

    [attribute=value]{ 属性: 值; }

    [attribute|=value]{ 属性:值; }

    [attribute~=value]{ 属性:值; }

    attribute=value 表示匹配有特定属性 attribute, 并且值为 value 的所有控件, 然后设置样式;

    attribute|=value 表示匹配有特定属性 attribute, 并且值以 value 开头的所有控件, 然后设置样式;

    attribute~=value 表示匹配有特定属性 attribute, 并且值包含 value 的所有控件, 然后设置样 式;

    注意点:

    1. attribute|=value 表示 attribute 属性的值以 value 开头, 无论 value 后面还有没有值, 或者 value 后面是什么, 均能匹配到, 例如:

    [objectName|="button"]{ color: red; }

    这表示将 objectName 属性以 button 开头的所有控件的前景色设置为红色.

    attribute~=value 表示 attribute 属性的值中包含 value, 这里要注意的是:value 必须是独

    立的单词, 也就是包含 value 并且 value 是被空格隔开的, 例如:

    [objectName~="button"]{ color: red; }

    (9)并集选择器

    格式

    选择器 1,选择器 2,选择器 3{ 属性: 值; }

    并集选择器表示, 将每个单独选择器匹配到的控件放在同一个结果集中, 并给结果集中的每

    个控件都设置声明语句中的样式.

    注意点

    1. 并集选择器必须使用”,”来连接不同的选择器

    2. 并集选择器可以使用类选择器, 类型选择器, id 选择器, 属性选择器等.

    一般用法

    主要用于给具有相同属性并且外观相似的的控件设置样式, 例如:

    .QLineEdit, .QComboBox{

    border: 1px solid gray;

    background-color:white;}

    (10)伪类选择器

    格式

    类型选择器:状态{ 属性: 值; }

    类选择器:状态{ 属性: 值; }

    表示对类型选择器或类选择器指定的所有控件设置它在指定状态时的样式.

    选择器也许会包含基于 widget 的 state 的程序限制规则的伪状态。伪状态以冒号(:)作为分隔 紧跟着选择器。举个例子,下面的规则在鼠标悬浮在 QPushButton 的上方时生效:

    QPushButton:hover { color: white }

    伪状态可以使用感叹号进行取反,下面一条规则在鼠标没有悬浮在 QRadioButton 上方时生

    效:

    QRadioButton:!hover { color: red }

    伪状态可以链接,在这样的情况下,隐式地包含了逻辑与。

    举个例子,下面一条规则在鼠标

    悬浮到一个已 check 的 QCheckBox 上时生效:

    QCheckBox:hover:checked { color: white }

    伪状态的取反也可以出现在伪状态链中,举个例子,下面的规则在鼠标悬浮到一个没有被

    press 的 QPushButton 上时生效:

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

    如果有需要,可以使用逗号来表示逻辑或, 即并集选择器

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

    伪状态可以与 subcontrol 组合使用,举个例子:

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

    样式的规则5:控件中的子控件的样式设置。

    对于一个复杂的控件,很有必要去控制这个控件的子控件。比如QComboBox的下拉按钮和QSpinBox的上下调整大小的箭头按钮。选择器可以包含子控件,这些子控件可以将规则的应用程序限制为特定的小部件子控件。如:

    QComboBox::drop-down { image: url(dropdown.png) }。指定了下拉按钮的填充图片

    样式的规则6:伪状态。选择器可能包含伪状态,这些伪状态表示根据小部件的状态限制规则的应用。伪状态出现在选择器的末尾,中间有一个冒号(:)。如:

    QPushButton:hover { color: white } 表示当鼠标悬停时颜色为白色

    伪状态可以使用感叹号!操作符进行否定。如:

    QRadioButton:!hover { color: red } 表示当鼠标不是悬停时颜色为红色

    还可以有多个伪状态一起使用:

    QCheckBox:hover:checked { color: white } 表示 当鼠标悬停 并且 该复选框被选中的时候颜色为白色

    QCheckBox:hover, QCheckBox:checked { color: white } 表示当鼠标悬停或着被选中的时候 颜色为白色

    样式的规则7:优先顺序的确定。

    为什么要有优先级?

    当一个控件被多个选择器选中并且设置了相同的属性(值不同)时, 不能仅仅根据设置样

    式语句出现的先后顺序进行层叠, 那么控件的样式如何确定,于是引出了选择器的优先级问

    题。

    一般通过下面两步进行选择器优先级的判定.

    第一步:设置方式所产生的优先级问题

    在 CSS 中, 有如下层叠优先级规则:

    内联样式>内部样式>外部样式>浏览器缺省

    而在 Qss 中, 这个规则表现为:

    给控件直接设置的样式>给QApplication设置的样式

    就是说, 调用控件的 setStylesheet 设置的样式的优先级永远高于给 QApplication 设置的样

    式, 即使 QApplication 中的选择器优先级更高

    第二步:样式表本身的优先级问题

    当设置方式相同,且几个样式规则为同一个控件的同一个属性指定不同的值时,就产生了冲

    突.此时, 如何层叠就由选择器的优先级来确定.

    一般而言,选择器越特殊,它的优先级越高。也就是选择器指向的越准确,它的优先级就越

    高。

    优先级判断的三种方式

    1. 间接选中

    间接选中就是指继承, 也就是在 Qt5.7 及以上版本, 程序中给 QApplication 对象设置了

    Qt::AA_UseStyleSheetPropagationInWidgetStyles 属性时, 才会有间接选中.

    如果是间接选中,那么最终的样式就是离目标最近的那个, 这里的近指的是两个控件的

    父子关系. 例如一个 QPushButton 对象被布局在 QGroupBox 中, 而 QGroupBox 又被布局

    18/ 62在 QWidget 中, 此时如果给 QGroupBox 和 QWidget 都设置了 color 属性的颜色, 那么无

    论设置顺序如何, QPushButton 的前景色总是表现为 QGroupBox 设置的颜色, 因为

    QGroupBox 显然是离 QPushButton 最近的那一个.

    2. 相同选择器(直接选中)

    如果都是直接选中, 并且都是同类型的选择器, 那么写在后面的样式会覆盖掉前面的样

    式, 例如

    pBtn1->setStyleSheet("QPushButton{color: green;}");

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

    显而易见, pBtn1 的前景色是蓝色.

    3. 不同选择器(直接选中)

    如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠.

    具体的优先级如下:

    Id > 类 > 类型 > 通配符 > 继承 > 默认

    优先级权重

    为什么会有优先级权重?

    当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高,从而确定

    控件的样式.

    注意点: 只有选择器是直接选中控件时才需要计算权重, 否则直接选择器高于一切间接选

    中的选择器

    优先级权重的计算方式:

    1. 计算选择器中的 id 选择器数量[=a]

    2. 计算选择器中类选择器的数量+属性选择器的数量[=b]

    3. 计算选择器中类型选择器的数量[=c]

    4. 忽略子控件选择器

    串联这三个数字 a-b-c 就得到优先级权重, 数字越大优先级越高.

    以上为语法部分。

    多个控件

    #widget_1,#widget_2,#widget_3,#widget_4,#widget_7,#widget_8,#widget_9,#widget_10,#widget_11,#widget_12

    {

    border: 1px solid #DCDFE6;

    border-left:none;

    border-bottom:none;

    min-height:54px;

    max-height:54px;

    }

    展开全文
  • 在对QWidget使用样式表时无效 QWidget#MyWgt{ border:1px solid gray; } 2、原因 原因是QWidget只支持background、background-clip和background-origin属性。官方说明 3、解决方法 3.1 使用QFrame代替QWidget,...
  • QT 样式风格 & 样式表 (QStyleSheet)

    千次阅读 2021-01-15 18:42:31
    QT Style的机制和GTK的Style机制很类似,基本上就是定义了一个基础的Style类,在Style类里面定义一系列的绘图相关函数接口,具体风格的Style类实现了这些函数接口。在控件的实现中,控件的绘图函数调用Style类的绘图...
  • Qt样式表之 QSS 语法介绍

    千次阅读 2021-02-04 19:01:46
    =====================Qt样式表之一:Qt样式表和盒子模型介绍=====================一、Qt样式表介绍Qt样式表是一个可以自定义部件外观的十分强大的机制,可以用来美化部件。Qt样式表的概念、术语和语法都受到了HTML...
  • Qt样式表

    2021-10-14 12:19:43
    1、Qt样式表 Qt样式表(style sheet)是用于定制用户界面的强有力的机制,其概念、术语是收到HTML中的级联样式表(Cascading Style Sheets,CCS)启发而来,只是Qt样式表是用用于窗体界面的 与HTML的CSS类似,Qt的样式表...
  • 自定义QPushButton样式,通过选择背景渐变、边框、字体、字号、鼠标移入移出切换、点击态等自动生成样式code,然后调用setStyleSheet().....
  • background-color: rgb(18, 26, 40); //修改背景颜色 color: rgb(255, 255, 255); //修改字体颜色 ...//设置边框的圆角 border:none;//边界框消失 //对边框颜色使用渐变色 border-color: qradialgradient(spread
  • 目录0、参考链接1、设计师界面添加样式1.1 几点注意事项2、用程序添加样式2.1 用程序语句添加2.2 用qss文件添加2.2.1 引用qss文件的磁盘路径2.2.2 引用qss文件的资源路径0、相关链接官网的样式表链接:...
  • QT样式表中 透明度 参数设置

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

    2021-06-23 21:28:26
    Qt样式表支持各种属性、伪状态和子控件,使得定制小部件的外观成为可能。 可设置样式的小部件列表 下表列出了可以使用样式表自定义的Qt小部件: QT控件 如何设置样式 QAbstractScrollArea 支持Box模型...
  • qt界面设置边框-样式表实现

    万次阅读 2018-06-22 18:33:54
    ui->frame->setStyleSheet("#frame{border:2px solid #014F84}#background-color:#00d8ff"); 2px solid color 这个顺序不能错,就是这么坑人;
  • 【源码可运行】自定义QPushButton样式,通过选择背景渐变、边框、字体、字号、鼠标移入移出切换、点击态等自动生成样式code,然后调用setStyleSheet()。
  • QT-样式表

    2022-03-28 18:32:05
    Qt样式表是一个可以自定义部件外观的十分强大的机制﹐除了那些能够通过子类化QStyle更改的外观,其余的都可以使用Qt样式表来美化。Qt样式表的概念,术语和语法都受到了HTML的层叠样式表(Cascading Style Sheets, CSS)...
  • 在对QWidget使用样式表时无效 QWidget#MyWgt{ border:1px solid gray; } 2、原因 原因时QWidget只支持background、background-clip和background-origin属性。 3、解决方法 3.1 使用QFrame代替...
  • Qt样式表(5):使用样式表设置按钮的外观 若对C++语法不熟悉,建议参阅《C++语法详解》一书,电子工业出版社出版,该书语法示例短小精悍,对查阅C++知识点相当方便,并对语法原理进行了透彻、深入详细的讲解,可确保...
  • QT样式表使用

    2022-01-25 15:51:20
    QT使用样式表通常有三种方式: 1. 在UI设计器---Qt Designer 内添加并设置样式; 优点:直观显示。 缺点:样式比较多时,不利于检查样式是否编写错误。同时不可以二次修改,即界面显示完毕后无法通过此方法修改界面...
  • Qt4_使用Qt样式表

    2021-06-28 14:13:45
    使用Qt样式表 Qt的样式表主要是受到了CSS的启发,但同时也适用于窗口部件。样式表由影响窗口部件给制的样式规则组成。这些规则是普通文本。由于在运行时会解析样式表,所以可以通过制定样式表的方式来尝试设计不同的...
  • 摘要:QT Create中,对button或者window等部件设置背景、颜色、透明等样式时,需要用到style sheet,可以直接在代码里写,也可以在ui设计师里通过右键change style sheet的方法来设置,本人是使用的后面的方式,下面...
  • QT样式表之QPushButton

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

    千次阅读 2020-10-30 05:44:17
    1、Qt样式表 Qt样式表(style sheet)是用于定制用户界面的强有力的机制,其概念、术语是收到HTML中的级联样式表(Cascading Style Sheets,CCS)启发而来,只是Qt样式表是用用于窗体界面的 与HTML的CSS类似,Qt的...
  • Qt 样式设置之 QCheckBox 样式表

    千次阅读 2020-03-05 11:35:53
    QCheckBox { color:red; background-color:rgb(101,101,101); } QCheckBox::indicator { /* 选择框尺寸 */ width:13px; height:13px; } QCheckBox::indicator:unchecked ... border-image:url(:/...
  • Qt设置样式

    2021-08-18 23:48:51
    Qt样式表是一个可以自定义部件外观的强大机制,样式表的概念、术语、语法均受到HTML的层叠样式表(Cascading Style Sheets,CSS)的启发。 样式表可通过QApplication::setStyleSheet()函数将其设置到整个应用程序上,也...
  • qt使用样式表设置窗口widget为圆角

    千次阅读 2021-04-02 15:15:44
    窗口widget是无法直接通过样式表设置为圆角的,需要在窗口QWidget中拖入控件QFrame,将QFrame设置的和窗口QWidget一样大小,将窗口QWidget中需要的控件拖入QFrame中。 示例 下面是一个提示工具的窗口。通过它简单的...
  • 设置: QGroupBox::indicator { width: 32px; height: 32px; } QGroupBox::indicator:unchecked { image: url(:res/shut_off_32px.png); } QGroupBox::indicator:unchecked:hover { image: url(:res/shut...

空空如也

空空如也

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

qt样式表设置边框

友情链接: jiegousheji_2.rar