QSS

本文详细介绍了Qt中QSS(Qt样式表)的使用方法,包括基础概念、加载QSS、盒子模型、QSS选择器等内容。重点解析了border-image属性,通过实例展示了如何调整图片剪裁位置、重复性和渲染规则,以及border-image-width和border-image-outset的用法。

摘自:https://qtdebug.com/qtbook-qss/

Qt 提供的 widget 的默认外观很多时候都不符合项目的界面需求,必须要改,修改一个 widget 的外观(Look and Feel)有以下的方法:

  • 继承 Widget,然后在 paintEvent() 里绘制
  • 继承 QStyle
  • 使用 QSS(Qt Style Sheet)
  • 对于 item view 来说还有一种方式,还可以使用 Delegate

这几种方式里最简单灵活的是使用 QSS,虽然有人说 QSS 的效率低,具体有多低没测试过,但是在普通 PC 上从来没感觉出来,再说现在的硬件也不差这么点性能消耗,随便一个写的差点的函数的消耗就比这多的多,作为一个实用主义者,不追求理论上的效率完美,能满足需求的前提下什么好用用什么,QSS 就是修改 widget 外观的首选,什么效果不满意,修改一下 QSS 的文件就可以看到效果,甚至不需要重新编译、打包发布程序(如果把 QSS 放在文件中,并且实现动态加载 QSS)。

我们按下面的章节来介绍 QSS:

 

border-image用于给border(边框)贴上背景图像

类似于CSS中的background(背景)属性。 例如:background:url(xx.jpg) 27px no-repeat;指的是图片(url(xx.jpg)),位置(27px),重复性(no-repeat)。

border-image与此类似,border-image包括图片,剪裁位置(与background位置一样,也是数值,也支持百分值),重复性。
例如:border-image:url(border.png) 27 repeat; 指的就是图片(url(border.png)),剪裁位置(27),重复方式(repeat)。
图片描述

下面我们将border-image的复合写法分解描述,

border-image的主要参数就是上面提到的三个:图片,剪裁位置,重复性。
其实还有另外两个,文章最后面再讲。更好理解

1、图片(border-image-source)

  • border-image的背景图使用url()调用,图片可以是相对路径或是绝对路径,也可以不使用图片,即border-image:none;

2、图片剪裁位置(border-image-slice)

  • 没有单位,默认单位就是像素(px)。例如:border-image:url(border.png) 27 repeat;这里的27专指27px。

  • 支持百分比值,百分比值大小是相对于边框图片的大小,假设边框图片大小为400px*300px,则20%的实际效果就是剪裁了图片的60px 80px 60px 80px的四边大小。

  • 剪裁特性。类似于CSS中的clip属性。其有1~4个参数,代表上右下左四个方位的剪裁,符合CSS普遍的方位规则(与margin,padding等或border-width一致),举个简单的例子,前面提到,支持百分比宽度,所以这里“30% 35% 40% 30%”的示意可以用下图表示:
    clipboard.png

距离图片上部30%的地方,距离右边35%,距离底部40%,左边30%的地方各剪裁一下。也就是对图片进行了“四刀切”,形成了九个分离的区域,这就是九宫格,这是下面深入讲解border-image的基础。

3、重复性(border-image-repeat)

取值为repeat(重复)只是其中之一,其余两个是round(平铺)和stretch(拉伸)。其中,stretch是默认值。

参数0~2个,0则使用默认值 – stretch,例如:border-image:url(border.png) 30% 40%;就等同于border-image:url(border.png) 30% 40% stretch stretch;;1则表示水平方向及垂直方向均使用此参数;2个参数的话则第一个参数表水平方向,第二个参数表示垂直方向。例如:border-image:url(border.png) 30% 40% round repeat;表示水平方向round(平铺),垂直方向repeat(重复)。

关于round 和repeat 的区别。
round会凑整填充(进行了适度的拉伸)。repeat不进行拉伸,不凑整。 具体效果看文章后边的例子。

4、实际渲染规则

通过裁切属性值,将边框背景图切出了“九宫格”的模型,那这张背景图怎么对应地贴在div的边框上呢?

clipboard.png <————————> 图片描述

图片描述

  • 如图 在border-image中的橙红色的四个边角只会呆在border的四个角,并且水平和垂直方向均被拉伸来填充border的四个角。
  • 如图 上下区域即border-top-image和border-bottom-image受到第一个参数——水平方向效果影响:如果为repeat,则此区域被水平重复(round水平平铺,stretch水平拉伸)来填充对应的上下border【该区域在垂直方向上首先会按所对应的border-image-width的值等比缩放,然后再按参数设置在边框水平方向上进行重复或平铺或拉伸】
  • 左右区域border-left-image和border-right-image 的作用效果亦然【该区域在水平方向上首先会按所对应的border-image-width的值等比缩放,然后再按参数设置在边框垂直方向上进行重复或平铺或拉伸】

图片描述



我们用下图(27×3)px *(27×3)pxpng 做实验,我给不同部位加了一个序号做标志,便于观察。
图片描述

    // 加一个蓝色背景的父级,便于我们分析效果。
    .border_image {
        width: 400px;
        height: 115px;
        border: 3em double orange;
        -webkit-border-image: url(border.png) 27 round;
        border-image: url(border.png) 27 round;
    }
    .box {
        background: blue;
    }

    <div class="box">
        <div class="border_image"></div>
    </div>

效果如下
clipboard.png


   //去掉重复属性,即默认都为stretch
   border-image: url(border.png) 27;

效果如下
clipboard.png


  //使用repeat
  border-image: url(border.png) 27 repeat;

效果如下
clipboard.png



    //边框宽度改变
    border-image: url(border.png) 27 repeat stretch;
    border-width: 3rem 1rem;

效果如下

clipboard.png



5、(边框背景宽度)border-image-width

这个属性默认是边框的宽度,用来限制相应区域背景图的范围,
首先相应背景区域的图像会根据这个属性值进行缩放。然后再重复或平铺或拉伸。

在复合写法中应该位于 slice属性 和repeat属性中间 用“/”间隔
如:border-image:url(border.png) 27 / 6rem / repeat;

语法:border-image-width: [ <length> | <percentage> | <number> | auto ]{1,4}

length 带 px, em, in … 单位的尺寸值
percentage 百分比
number 不带单位的数字;它表示 border-width 的倍数
auto 使用 auto, border-image-width 将会使用 border-image-slice 的值
    border: 3em double orange;
    border-image: url(border.png) 27 round;
    border-image-width: 6rem;

效果如下
(白框为border)
图片描述

    border-image-width: 1.5rem;

效果如下
(白框为border)
图片描述


    border: 3em double orange;
    border-image: url(border.png) 27 round;
    border-image-width: 6rem 1.5rem;

效果如下
(白框为border)
图片描述

6、(边框背景扩散)border-image-outset

语法:border-image-outset: [ <length> | <number> ]{1,4}
相当于把原来的贴图位置向外延伸。不能为负值,试一下就知道。

在复合写法中应该位于 border-image-width 后面,用“/”间隔
如:border-image:url(border.png) 27 / 6rem / 1.5rem /repeat;
向外延伸1.5rem再贴图。。
    border: 3em double orange;
    border-image: url(border.png) 27 round;
    border-image-width: 1.5rem;
    border-image-outset: 1.5rem;

效果如下:
(白框为border)
图片描述
ps 部分资料来源网络

03-12
<think>好的,用户想要了解关于Qt Style Sheets (QSS)的使用指南和示例,我需要根据提供的引用内容来组织回答。首先,我需要确认用户的问题是什么,他们可能想了解QSS的基础知识、选择器、属性,或者具体的代码示例和应用场景。 根据用户提供的引用,引用[1]提到了QSS的基础选择器、属性和值,以及代码示例和应用场景。引用[2]和引用[4]讨论了如何用QSS定制控件,特别是选择器的使用,比如设置按钮的样式。引用[3]则指向一个具体的QSS模板项目,可能包含实际的示例代码。因此,我需要将这些信息整合起来,形成一个结构清晰的回答。 首先,我应该介绍QSS的基本概念,类似于CSS的作用,用于美化Qt界面。然后,讲解选择器的类型,比如类型选择器、类选择器、ID选择器等,并给出相应的代码示例。接下来,需要列出常用的属性和值,如颜色、字体、边框等,并提供示例代码展示如何应用这些属性。此外,动态加载QSS文件也是一个重要的点,用户可能想知道如何从外部文件加载样式,这样可以方便维护和更新。 应用场景部分,可以提到美化标准控件、自定义复杂样式、主题切换等,这些都能帮助用户理解QSS的实际用途。最后,注意事项部分需要提醒用户QSS的继承性、兼容性和性能问题,避免常见错误。 在生成相关问题的时候,需要围绕用户可能进一步询问的点展开,比如QSS与CSS的区别、设置背景图的方法、样式不生效的排查步骤等。这些问题能够帮助用户深入学习和解决问题。 需要注意的是,所有行内数学表达式要用$...$格式,但在这个问题中可能用不上数学公式,所以可以忽略。回答要使用中文,结构清晰,分步骤解释,并引用提供的参考资料。同时,确保代码示例正确,符合LaTeX语法,但这里主要是代码块,所以用正确的代码格式即可。 最后,检查引用标记是否正确添加,每个引用对应的内容是否准确,确保用户能够根据引用找到相关资料。例如,引用[4]提到设置按钮颜色的示例,应该在对应的代码示例后添加[^4]的标记。 总结,回答的结构应该是:引言、基础概念、选择器、属性与值、代码示例、动态加载、应用场景、注意事项,最后是相关问题。确保每个部分都有对应的引用支持,并且内容准确有用。</think>以下为Qt Style Sheets (QSS) 的使用指南与示例解析: --- ### 一、QSS基础概念 QSS是Qt框架中用于自定义控件样式的机制,语法类似CSS。通过设置控件的`styleSheet`属性或加载外部样式文件,可以修改颜色、字体、边框等视觉属性[^1][^4]。 --- ### 二、选择器类型 1. **类型选择器** 直接指定控件类型,如`QPushButton`: ```cpp setStyleSheet("QPushButton { color : red; }"); //所有按钮文字变红[^4] ``` 2. **类选择器** 使用`.类名`限定样式作用范围,如: ```cpp setStyleSheet(".QCheckBox { background: yellow; }"); //仅作用于QCheckBox类实例 ``` 3. **ID选择器** 通过控件对象名定位(需调用`setObjectName()`): ```cpp setStyleSheet("#myButton { font-size: 20px; }"); ``` --- ### 三、常用属性与值 | 属性类别 | 示例 | 说明 | |----------------|-----------------------------------|-------------------------| | **颜色/背景** | `color: #FF0000;` | 文字颜色 | | | `background-color: qlineargradient(...);` | 渐变背景[^1] | | **字体** | `font-family: Arial; font-size: 14pt;` | 字体设置 | | **边框** | `border: 2px solid gray; border-radius: 5px;` | 圆角边框[^2] | --- ### 四、代码示例 #### 示例1:基础按钮样式 ```cpp QPushButton { background-color: #4CAF50; border: none; padding: 10px 24px; color: white; } QPushButton:hover { background-color: #45a049; //悬停效果 } ``` #### 示例2:复杂控件组合 ```cpp QGroupBox::title { subcontrol-origin: margin; left: 10px; color: blue; } QSlider::groove:horizontal { height: 8px; background: lightgray; } ``` --- ### 五、动态加载QSS文件 通过读取外部文件实现样式切换[^1]: ```cpp QFile file("style.qss"); file.open(QFile::ReadOnly); qApp->setStyleSheet(file.readAll()); ``` --- ### 六、应用场景 1. **美化标准控件**(如按钮、滑块、列表) 2. **自定义复杂控件组合样式** 3. **动态主题切换**(通过加载不同QSS文件) --- ### 七、注意事项 1. **继承性**:子控件默认继承父控件样式,可用`!important`覆盖 2. **兼容性**:部分属性仅在特定控件中生效(如`QProgressBar::chunk`) 3. **性能**:避免频繁修改样式表,建议预加载[^3] ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值