Slint是一种静态类型语言，提供丰富的原始类型。

##原始类型

bool

布尔值 默认：false

布尔值，其值可以是 true 或 false。

string

字符串 默认：""

任何用引号括起来的 utf-8编码字符序列都是一个 string："foo"。

export component Example inherits Text { text: "hello";}

可以将转义序列嵌入字符串中，以插入难以直接插入的字符：

转义	结果
\"	"
\\	\
\n	换行符
\u{x}	其中 x 是十六进制数字，扩展为此数字表示的 unicode 代码点
\{expression}	表达式的求值结果

任何跟在未转义的 \ 后面的其他内容都是错误的。

注意

\{...}语法在 Rust中的 slint!宏中无效。

当 string 不包含任何内容时，is-empty 属性为 true。

export component LengthOfString { property<bool> empty: "".is-empty; // true property<bool> not-empty: "hello".is-empty; // false}

character-count 属性返回字素簇的数量。

export component CharacterCountOfString { property<int> empty: "".character-count; //0 property<int> hello: "hello".character-count; //5 property<int> hiragana: "あいうえお".character-count; //5 property<int> surrogate-pair: "😊𩸽".character-count; //2 property<int> variation-selectors: "👍🏿".character-count; //1 property<int> combining-character: "パ".character-count; //1 property<int> zero-width-joiner: "👨‍👩‍👧‍👦".character-count; //1 property<int> region-indicator-character: "🇦🇿🇿🇦".character-count; //2 property<int> emoji-tag-sequences: "🏴󠁧󠁢󠁥󠁮󠁧󠁿".character-count; //1}

to-lowercase 和 to-uppercase 方法根据 Unicode字符属性将 string转换为小写或大写。

export component ChangeCaseOfString { property<string> hello: "HELLO".to-lowercase(); // "hello" property<string> bye: "tschüß".to-uppercase(); // "TSCHÜSS" property<string> odysseus: "ὈΔΥΣΣΕΎΣ".to-lowercase(); // "ὀδυσσεύς" property<string> new_year: "农历新年".to-uppercase(); // "农历新年"}

to-float 方法可用于将 string转换为 float。如果字符串不是有效数字，则返回0。可以使用 is-float 检查字符串是否包含有效数字。

export component StringToFloat { property<float> hello: "hello".to-float(); //0 property<bool> goodbye: "goodbye".is-float(); // false property<float> value: "1.5".to-float(); //1.5}

styled-text

styled-text 默认：""

与 StyledText元素一起使用的属性。

使用 @markdown()宏创建样式化文本。例如：@markdown("Hello **Bold**")。

@markdown()支持插值：例如，@markdown("5 +5 = *\{5 +5 }*")变为 "5 +5 = *10*"。

作为宏的参数传递的任何文本都将被转义，例如 @markdown("Hello \{"*World*"}")将变为 "Hello \*World\*"。

如果使用多个字符串字面量，它们将被连接。

##数值类型

angle

角度 默认：0deg

角度测量，对应于像 90deg、1.2rad、025turn这样的字面量

duration

持续时间 默认：0ms

动画持续时间的类型。使用 ms（毫秒）或 s（秒）之类的后缀来指示精度。

float

浮点数 默认：0

有符号的32位浮点数。带 % 后缀的数字会自动除以100，因此例如 30% 等同于 0.30。

int

整数 默认：0

有符号整数。

length

长度 默认：0px

用于 x、y、width 和 height坐标的类型。对应于像 1px、1pt、1in、1mm 或 1cm这样的字面量。只要绑定在可以访问设备像素比的上下文中运行，就可以与长度相互转换。

percent

百分比 默认：0%

有符号的32位浮点数，被解释为百分比。分配给此类型的属性的字面量数字必须具有 % 后缀。

physical-length

physical-length 默认：0phx

这是物理像素的数量。要从整数转换为长度单位，只需乘以 1px即可。或者，要从长度转换为浮点数，可以除以 1phx。

relative-font-size

relative-font-size 默认：0rem

相对字体大小因子，与 Window.default-font-size 相乘，可以转换为 length。

请参阅特定语言的 API 参考，了解这些类型如何映射到不同编程语言的 API。

##颜色和画刷类型

brush

画刷 默认：transparent

画刷是一种特殊类型，可以从 color 或 gradient初始化。请参阅颜色和画刷。

color

颜色 默认：transparent

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

##键盘输入

keys

keys 默认：空的 keys

键表示与修饰键列表组合的键。 这是用于检测 KeyEvent 是否应触发给定键绑定的原始类型。

Slint 中的键绑定基于逻辑键 —键在当前键盘布局上产生的字符 — 而不是键在键盘上的物理位置。 有关详细信息，请参阅键绑定。

使用 to-string 函数将 keys 实例转换为 string。 它返回键组合的平台原生描述。

export component KeysToString inherits FocusScope { undo := KeyBinding { keys: @keys(Control + Z); activated => { debug("UNDO") } }
 Text { text: "Press \{undo.keys.to-string()} to undo!"; // 在 macOS 上结果为 "Press ⌘Z to undo!" // 在其他平台上结果为 "Press Ctrl+Z to undo!" }}

##图像

image

图像 默认：空图像

image 类型是对图像的引用。

在 Slint 中，可以使用 @image-url("...")构造从文件加载图像。 @image-url 函数内的地址必须是字符串字面量，并且图像在编译时解析。

Slint 在以下位置查找图像：

1.绝对路径或相对于当前 .slint 文件的路径。 2.编译器用于查找 .slint 文件的包含路径。

从 http加载图像仅在 SlintPad 中受支持。

还可以从 data: URI加载图像，内容可以是 base64编码或 URL编码的。 例如：@image-url("data:image/png;base64,iVBORw0KGgo...")。

支持的格式是 SVG 以及 image crate支持的格式： AVIF、BMP、DDS、Farbfeld、GIF、HDR、ICO、JPEG、EXR、PNG、PNM、QOI、TGA、TIFF、WebP。

对于 Rust应用程序，并非所有格式默认都启用。使用 image-default-formats Cargo feature启用它们。

• C++
• Rust
• NodeJS
• Python

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

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

注意

可以使用 cargo features禁用某些图像格式，以减小二进制大小并加快编译速度。

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

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

使用 width 和 height 属性访问 image 的尺寸。

export component Example inherits Window { preferred-width:150px; preferred-height:50px;
 //注意：http URL 仅在 Web 版本中有效。 in property <image> some_image: @image-url("https://slint.dev/logo/slint-logo-full-light.svg");
 HorizontalLayout { Text { text: "The image is " + some_image.width + "x" + some_image.height; }
 // 检查大小以确定图像是否为空。 if some_image.width >0: Image { source: some_image; } }}

也可以通过添加 nine-slice(...) 参数来加载支持 9切片缩放的图像（也称为 nine patch 或 border图像）。该参数可以有一个、两个或四个数字，用于指定边缘的大小。 这些数字可以是 上 右 下 左 或 垂直水平，或者一个数字表示所有边缘

// 九切片缩放export component Example inherits Window { width:100px; height:150px; VerticalLayout { Image { source: @image-url("https://interactive-examples.mdn.mozilla.net/media/examples/border-diamonds.png", nine-slice(30303030)); } }}

另请参阅 Image元素。

##动画

easing

缓动 默认：linear

easing 类型允许为动画定义缓动曲线。

要指定缓动曲线，请使用 Easing命名空间中的值。例如，你可以使用 Easing.ease-out 或 Easing.ease-in-quad。该命名空间由以下名称组成（有关视觉参考，请参阅 easings.net）：

• linear
• ease-in-quad
• ease-out-quad
• ease-in-out-quad
• ease
• ease-in
• ease-out
• ease-in-out
• ease-in-quart
• ease-out-quart
• ease-in-out-quart
• ease-in-quint
• ease-out-quint
• ease-in-out-quint
• ease-in-expo
• ease-out-expo
• ease-in-out-expo
• ease-in-sine
• ease-out-sine
• ease-in-out-sine
• ease-in-back
• ease-out-back
• ease-in-out-back
• ease-in-circ
• ease-out-circ
• ease-in-out-circ
• ease-in-elastic
• ease-out-elastic
• ease-in-out-elastic
• ease-in-bounce
• ease-out-bounce
• ease-in-out-bounce
• cubic-bezier(a, b, c, d) 如 CSS 中所示

此外，在 easing类型的表达式中，这些名称可直接使用。

struct AnimationData { curve: easing,}
component Custom inherits Rectangle { property<AnimationData> animation: { // 使用 Easing命名空间。 curve: Easing.ease-in-circ, };
 animate x { // 在 easing表达式中，名称可通过全局作用域直接使用。 easing: ease-out-bounce; }}

##类型转换

Slint 支持不同类型之间的转换。需要显式转换以使 UI描述更健壮，但为了方便起见，允许某些类型之间的隐式转换。

可能的转换如下：

• int 可以隐式转换为 float，反之亦然。 从 float转换为 int 时，该值会被截断。
• int 和 float 可以隐式转换为 string
• physical-length、relative-font-size 和 length只能在已知像素比的上下文中相互隐式转换。
• 单位类型（length、physical-length、duration ...）不能转换为数字（float 或 int），但它们可以相互除以得到一个数字。类似地，一个数字可以乘以这些单位之一。思路是可以乘以 1px 或除以 1px 来执行此类转换
• 字面量 0 可以转换为具有关联单位的任何这些类型。
• 结构体类型如果具有相同的属性名称并且其类型可以转换，则可以与另一个结构体类型转换。 源结构体可以缺少属性，也可以具有额外属性。但不能两者兼有。 -数组通常不能相互转换。如果元素类型可转换，则数组字面量可以转换。
• 可以使用 to-float 函数将字符串转换为浮点数。如果字符串不是有效数字，则该函数返回0。可以使用 is-float() 检查字符串是否包含有效数字
• 可以使用 to-fixed 和 to-precision 将 float转换为格式化的 string，它们分别可以传递小数点后的位数和有效数字的位数。它们的行为类似于其 JavaScript 对应物 toFixed()和 toPrecision()。

export component Example { // OK：int转换为 string property<{a: string, b: int}> prop1: {a:12, b:12 }; // OK：即使缺少 a，它也只会具有默认值 ("") property<{a: string, b: int}> prop2: { b:12 }; // OK：即使 c太多，也会被丢弃 property<{a: string, b: int}> prop3: { a: "x", b:12, c:42 }; //错误：b缺失且 c 是多余的，这无法编译，因为它可能是拼写错误。 // property<{a: string, b: int}> prop4: { a: "x", c:42 };
 property<string> xxx: "42.1"; property<float> xxx1: xxx.to-float(); //42.1 property<bool> xxx2: xxx.is-float(); // true property<int> xxx3:45.8; //45}