颜色与画刷

颜色字面量遵循 CSS 语法：

export component Example inherits Window {
    background: blue;
    property<color> c1: #ffaaff;
    property<brush> b2: Colors.red;
}

slint

除了纯色之外，许多元素具有 brush 类型而非 color 类型的属性。 画刷是一种可以是颜色或渐变的类型。然后使用画刷填充元素或 绘制轮廓。

在任何需要 color 或 brush 值的地方，CSS 颜色名称都在作用域内，包括结构体 字段、数组元素和函数参数。在其他地方，从 Colors 命名空间访问颜色。

类型

color 是具有红、绿、蓝和 alpha 通道的颜色。 默认 color 是 transparent。 {#sls.type.color}

alpha 通道是颜色的不透明度：它决定在绘制颜色的位置下方内容 透出多少，从 0 表示完全透明的颜色到 255 表示完全不透明的颜色。 {#sls.type.color.alpha}

brush 定义用于填充元素的内容。 默认 brush 是 transparent。 {#sls.type.brush}

color 可以转换为 brush：即用该单一颜色填充的画刷。 {#sls.type.convert.color-to-brush}

brush

brushdefault: transparent

画刷是一种特殊类型，可以从 color 或 gradient 初始化。

Rust

在 Rust 中，brush 类型的属性或结构体字段映射到 slint::Brush。

C++

在 C++ 中，brush 类型的属性或结构体字段映射到 slint::Brush。

NodeJS

在 JavaScript 中，brush 类型的属性或结构体字段映射到实现 Brush 接口 的对象。

Python

在 Python 中，brush 类型的属性或结构体字段映射到 Brush。

color

colordefault: transparent

具有 alpha 通道的 RGB 颜色，每个通道 8 位精度。支持 CSS 颜色名称以及十六进制颜色编码，例如 #RRGGBBAA 或 #RGB。

Rust

在 Rust 中，color 类型的属性或结构体字段映射到 slint::Color。

C++

在 C++ 中，color 类型的属性或结构体字段映射到 slint::Color。

NodeJS

在 JavaScript 中，color 类型的属性或结构体字段映射到实现 RgbaColor 接口 的对象。

Python

在 Python 中，color 类型的属性或结构体字段映射到 Color。

颜色属性

公开以下属性：

red

green

blue

alpha

这些属性的范围为 0-255。

使用 colors 命名空间按名称选择颜色。例如可以使用 Colors.aquamarine 或 Colors.bisque。 名称的完整列表非常长。你可以在 CSS 规范 中找到完整列表。

这些颜色名称在 color 和 brush 表达式的作用域中可用，也在 Colors 命名空间中可用。

// Using the Colors namespace
background: Colors.aquamarine;

// Using the functions via global scope.
background: aquamarine;

slint

全局颜色函数

rgb(int, int, int) -> color

rgba(int, int, int, float) -> color

像 CSS 中那样返回颜色。与 CSS 一样，这两个函数实际上是别名，可以接受 三个或四个参数。

前 3 个参数可以是 0 到 255 之间的数字，或带 % 单位的百分比。 第四个值（如果存在）是 0 到 1 之间的 alpha 值。

与 CSS 不同，逗号是必需的。

hsv(h: float, s: float, v: float) -> color

hsv(h: float, s: float, v: float, a: float) -> color

使用 HSV（色相、饱和度、明度）坐标返回颜色。色相参数是表示度数的 浮点数（0-360），并且会环绕（例如 480 变为 120）。 饱和度、明度和可选的 alpha 参数预计在 0 到 1 的范围内。

oklch(l: float, c: float, h: float) -> color

oklch(l: float, c: float, h: float, a: float) -> color

使用 Oklch 颜色空间（一种感知均匀的颜色空间）返回颜色。

• l（明度）：0（黑）到 1（白），或 0% 到 100%
• c（色度）：0（灰度）到约 0.4（鲜艳），或 0% 到 100%（其中 100% = 0.4）
• h（色相）：0-360 度，或作为角度（例如 180deg、0.5turn）
• a（alpha）：0-1，默认为 1

颜色方法

所有颜色和画刷都定义以下方法：

brighter(factor: float) -> brush

返回从此颜色派生的新颜色，但其亮度增加了指定的因子。 这是通过将颜色转换为 HSV 颜色空间并将亮度（value）乘以 (1 + factor) 来完成的。 例如，如果因子为 0.5（或例如 50%），返回的颜色亮度提高 50%。负的因子 会降低亮度。

darker(factor: float) -> brush

返回从此颜色派生的新颜色，但其亮度减少了指定的因子。 这是通过将颜色转换为 HSV 颜色空间并将亮度（value）除以 (1 + factor) 来完成的。 例如，如果因子为 .5（或例如 50%），返回的颜色亮度降低 50%。负的因子 会提高亮度。

mix(other: brush, factor: float) -> brush

返回一个新颜色，它是此颜色与 other 的混合。指定的因子 被限制在 0.0 和 1.0 之间，然后应用于此颜色，而 1.0 - factor 应用于 other。例如 red.mix(green, 70%) 会有更强的红色调，而 red.mix(green, 30%) 会有更强的绿色调。

transparentize(factor: float) -> brush

返回一个新颜色，其不透明度减少了 factor。 透明度通过将 alpha 通道乘以 (1 - factor) 获得。

with-alpha(alpha: float) -> brush

返回一个新颜色，其 alpha 值设置为 alpha（介于 0 和 1 之间）

to-hsv() -> { hue: float, saturation: float, value: float, alpha: float }

将此颜色转换为 HSV 颜色空间，并返回带有 hue、saturation、value 和 alpha 字段的结构体。hue 介于 0 和 360 之间，而 saturation、value 和 alpha 介于 0 和 1 之间。

to-oklch() -> { lightness: float, chroma: float, hue: float, alpha: float }

将此颜色转换为 Oklch 颜色空间，并返回带有 lightness、chroma、hue 和 alpha 字段的结构体。lightness 介于 0 和 1 之间，chroma 通常在 0 到约 0.4 之间， hue 介于 0 和 360 之间，alpha 介于 0 和 1 之间。

线性渐变

线性渐变描述平滑、多彩的表面。它们使用一个角度和一系列 色标来指定。颜色将在色标之间线性插值，对齐到一条由指定角度 旋转的假想线。这称为线性渐变，使用 @linear-gradient 宏指定，签名如下：

@linear-gradient(angle, color percentage, color percentage, …)

宏的第一个参数是一个角度（参见 Types）。渐变线的起点 将按指定的值旋转。

初始角度之后是一个或多个色标，描述为由空格分隔的 color 值和 percentage 组成的对。颜色指定线性颜色插值在 渐变的轴上到达指定百分比时应达到的值。

以下示例显示一个矩形，它填充了线性渐变，从浅蓝色 开始，在中心插值到非常浅的色调，最后以橙色结束：

export component Example inherits Window {
    preferred-width: 100px;
    preferred-height: 100px;

    Rectangle {
        background: @linear-gradient(90deg, #3f87a6 0%, #ebf8e1 50%, #f69d3c 100%);
    }

}

slint

径向渐变

径向渐变类似线性渐变，但颜色沿圆周插值，而不是 沿一条线。要描述径向渐变，请使用 @radial-gradient 宏，签名如下：

@radial-gradient(circle [radius] [at x y], color percentage, color percentage, …)

宏的第一个参数始终是 circle，因为只支持圆形渐变。 可选的 radius 值在元素的本地坐标空间中设置圆半径。 radius 值是长度表达式。 如果省略，半径是元素边界框对角线的一半。

可选的 at 参数在元素的本地坐标空间中设置渐变中心。 x 和 y 值是长度表达式。 如果省略，渐变居中于元素的边界框。 你可以使用不带 at 的 radius，以显式半径保持默认中心。

示例：

export component Example inherits Window {
    preferred-width: 100px;
    preferred-height: 100px;
    Rectangle {
        background: @radial-gradient(circle, #f00 0%, #0f0 50%, #00f 100%);
    }
}

slint

你可以显式设置中心和半径：

export component Example inherits Rectangle {
    background: @radial-gradient(circle 60px at 25px 25px, #f00 0%, #00f 100%);
}

slint

锥形渐变

锥形渐变是颜色过渡围绕中心点旋转的渐变（就像色轮上的角度）。 要描述锥形渐变，请使用 @conic-gradient 宏，签名如下：

@conic-gradient([from angle] [at x y], color angle, color angle, …)

锥形渐变由一系列色标描述，每个色标由一种颜色和一个角度组成。 角度指定颜色沿圆周扫描放置的位置（0deg 到 360deg）。 颜色沿圆周路径在色标之间插值。

可选的 from 参数指定渐变旋转的起始角度。 如果省略，渐变从 0deg 开始（指向正上方）。例如，from 90deg 将 整个渐变顺时针旋转 90 度。

可选的 at 参数在元素的本地坐标空间中设置渐变中心。 x 和 y 值是长度表达式。 如果省略，渐变居中于元素的边界框。

示例：

export component Example inherits Window {
    preferred-width: 100px;
    preferred-height: 100px;
    Rectangle {
        background: @conic-gradient(#f00 0deg, #0f0 120deg, #00f 240deg, #f00 360deg);
    }
}

slint

这会创建一个色轮效果，红色在顶部（0deg/360deg），绿色在 120 度，蓝色在 240 度。

你也可以使用 from 参数旋转渐变：

export component Example inherits Window {
    preferred-width: 100px;
    preferred-height: 100px;
    Rectangle {
        background: @conic-gradient(from 90deg, #f00 0deg, #0f0 120deg, #00f 240deg, #f00 360deg);
    }
}

slint

这将同一个色轮顺时针旋转 90 度，因此红色从右侧（90deg）开始，而不是顶部。

你可以显式设置中心：

export component Example inherits Rectangle {
    background: @conic-gradient(from 45deg at 30px 30px, #f00 0deg, #00f 180deg, #f00 360deg);
}

slint

已知限制

负角度不能直接用于锥形渐变（例如 #ff0000 -90deg）。 请改用以下变通方法之一：

• 转换为正角度：-90deg → 270deg
• 使用变量：property <angle> start: -90deg; 然后在渐变中使用 start
• 使用显式减法：#ff0000 0deg - 90deg