《Rust+Slint：跨平台GUI应用》第五章 基础元素

ftpeak2025-11-05 8:15

本文带你吃透 Image、Path、Rectangle、Text 四大核心元素，从基础用法到进阶技巧，每个属性都配实战代码，上手就能用！

一、Image 元素

Image元素的作用就是让图片完美适配界面，它是 Slint 中展示图片的核心组件，支持图片上色、对齐、平铺、缩放等多种效果，轻松满足不同场景的图片展示需求。

核心属性详解

1. 基础配置：source（图片源）

这是最核心的属性，用于指定图片路径，支持本地文件和网络图片，通过@image-url宏定义。

slint

复制代码 
    VerticalLayout{ // 垂直布局
        spacing: 5px;   // 间距
        Image {
            // 本地图片（相对当前.slint文件路径）图片大小：64x64
            source: @image-url("../img/cartoon_small.png");
        }
        
        Image {
            // 本地图片（相对当前.slint文件路径）图片大小：256x256
            source: @image-url("../img/cartoon_normal.png");
        }

        Image {
            // 本地图片（相对当前.slint文件路径）图片大小：512x512
            source: @image-url("../img/cartoon_big.png");
        }
    }

👉执行结果如下：

尽管图片的大小都有不同，但Image元素配合布局元素，实现了将图片进行统一大小的拉伸。

2. 创意上色：colorize（颜色蒙版）

将图片作为透明度蒙版，用指定颜色或渐变重新绘制，让图片风格统一适配界面。

slint

复制代码 
    width: 200px;
    height: 200px;
    background: #ffffff;    // 背景颜色为白色

    GridLayout{ // 网格布局
        spacing: 20px;   // 间距
        Image {
            row: 0; // 1行
            col: 0; // 1列
            width: 45%; // 宽占45%，换算为90px
            height: 45%;// 宽占45%，换算为90px
            // 本地图片（相对当前.slint文件路径）图片大小：204x300
            source: @image-url("../img/Slint_logo.png");
        }

        Image {
            row: 0; // 1行
            col: 1; // 2列
            width: 45%; // 宽占45%，换算为90px
            height: 45%;// 宽占45%，换算为90px
            // 本地图片（相对当前.slint文件路径）图片大小：204x300
            source: @image-url("../img/Slint_logo.png");
            colorize: darkorange; // 橙色蒙版
        }
        
        Image {
            row: 1; // 2行
            col: 0; // 1列
            width: 45%; // 宽占45%，换算为90px
            height: 45%;    // 宽占45%，换算为90px
            // 本地图片（相对当前.slint文件路径）图片大小：256x256
            source: @image-url("../img/cartoon_normal.png");
            
        }

        Image {
            row: 1; // 2行
            col: 1; // 2列
            width: 45%; // 宽占45%，换算为90px
            height: 45%;// 高占45%，换算为90px
            // 本地图片（相对当前.slint文件路径）图片大小：256x256
            source: @image-url("../img/cartoon_normal.png");
            colorize: darkorange; // 橙色蒙版
        }
    }

👉执行结果：

👉注意：上图中的第一列为原图，第二列为添加颜色蒙版后的不同效果。

如果图片的背景色不是"透明色"，那么颜色蒙版会覆盖掉全部图片（如上图第二行、第二列），颜色蒙版只会覆盖掉没有透明色的区域，而不会影响到透明色区域（如上图第一行、第二列）。

3. 精准对齐：horizontal-alignment/vertical-alignment

控制图片在容器内的对齐方式，默认均为居中，支持左 / 右 / 上 / 下对齐。

slint

复制代码 
        Image {
            row: 0; // 1行
            col: 0; // 1列
            width: 45%; // 宽占45%，换算为90px
            height: 45%;// 宽占45%，换算为90px
            horizontal-alignment: left; // 水平居左
            // 本地图片（相对当前.slint文件路径）图片大小：204x300
            source: @image-url("../img/Slint_logo.png");
        }

        Image {
            row: 0; // 1行
            col: 1; // 2列
            width: 45%; // 宽占45%，换算为90px
            height: 45%;// 宽占45%，换算为90px
            horizontal-alignment: right;    // 水平居右
            // 本地图片（相对当前.slint文件路径）图片大小：204x300
            source: @image-url("../img/Slint_logo.png");
            colorize: darkorange; // 橙色蒙版
        }

👉执行结果：

可以看到，Slint_logo.png图片，一个被设置为水平偏左，而另一个显示为水平偏右。

4. 平铺填充：horizontal-tiling/vertical-tiling

当图片尺寸小于容器时，可设置平铺方式，支持普通重复和整数倍缩放重复。

slint

复制代码 
    background: black;
    // 水平+垂直整数倍平铺（无拉伸变形）
    Image {
        width: 64px;    // 宽度
        height: 64px;   // 高度
        source: @image-url("../img/cartoon_small.png");// 图片大小 64x64
        horizontal-tiling: round;   // 默认平铺,最小程度拉伸
        vertical-tiling: round; // 默认平铺，最小程度拉升
    }

👉由于Image区域被设定为"width: 64px；height: 64px"，与cartoon_small.png的大小（64x64）一致，所以不用平铺和拉伸。

平铺的阈值为图片像素的50%，如果不能整数倍数，那么就以图片的50%为阈值，如果超出整数倍的像素大于平铺图像数量的50%，则强行加入平铺，进行缩放；而如果不足50%的像素，则会通过拉伸进行强行平铺。

复制代码 
    background: black;
    // 水平+垂直整数倍平铺（无拉伸变形）
    Image {
        width: 96px;    // 宽度
        height: 96px;   // 高度
        source: @image-url("../img/cartoon_small.png");// 图片大小 64x64
        horizontal-tiling: round;   // 默认平铺,最小程度拉伸
        vertical-tiling: round; // 默认平铺，最小程度拉升
    }

👉由于超出量没有超过50%的像素数量，所以只是拉伸，而没有重复平铺。

复制代码 
    background: black;
    // 水平+垂直整数倍平铺（无拉伸变形）
    Image {
        width: 97px;    // 宽度
        height: 97px;   // 高度
        source: @image-url("../img/cartoon_small.png");// 图片大小 64x64
        horizontal-tiling: round;   // 默认平铺,最小程度拉伸
        vertical-tiling: round; // 默认平铺，最小程度拉升
    }

👉查看代码，97是64的150%+1，仅仅剩余量超过了50%像素基础上外加1个像素，就触发了重复平铺（缩放以适应剩余的49%的剩余像素数量）。

而我们使用时，完全没必要去注意上面的细节，只需要记住Image的大小和平铺图片即可：

复制代码 
    background: black;
    // 水平+垂直整数倍平铺（无拉伸变形）
    Image {
        width: 400px;    // 宽度
        height: 400px;   // 高度
        source: @image-url("../img/cartoon_small.png");// 图片大小 64x64
        horizontal-tiling: round;   // 默认平铺,最小程度拉伸
        vertical-tiling: round; // 默认平铺，最小程度拉升
    }

另外在平铺时，我们在上面已经完成了 横向+纵向 的二维平铺，您也可以单独指定平铺的维度方向（横向平铺、纵向平铺）：

复制代码 
    background: black;
    // 水平+垂直整数倍平铺（无拉伸变形）
    Image {
        width: 400px;    // 宽度
        height: 400px;   // 高度
        source: @image-url("../img/cartoon_small.png");// 图片大小 64x64
        horizontal-tiling: round;   // 默认横向平铺,最小程度拉伸
    }
复制代码 
    background: black;
    // 水平+垂直整数倍平铺（无拉伸变形）
    Image {
        width: 400px;    // 宽度
        height: 400px;   // 高度
        source: @image-url("../img/cartoon_small.png");// 图片大小 64x64
        vertical-tiling: round; // 默认平铺，最小程度拉升
    }
5. 自适应缩放：image-fit

控制图片如何适配容器尺寸，保留比例或拉伸填充，是最常用的属性之一。

slint

复制代码 
    // 设置整个容器的背景颜色为黑色
    background: black;
    
    // 创建水平布局容器，用于横向排列内部元素
    HorizontalLayout{
        spacing: 10px; // 设置布局内各子元素之间的水平间距为10px
        
        // 第一个图片元素：使用fill模式适配容器
        Image {
            width: 100px;  // 图片宽度固定为100px
            height: 200px; // 图片高度固定为200px
            source: @image-url("../img/cartoon_small.png"); // 图片路径
            image-fit: fill; // 拉伸图片以完全填充容器（可能会改变图片原始比例）
        }
        
        // 第二个图片元素：使用contain模式适配容器
        Image {
            width: 100px;
            height: 200px;
            source: @image-url("../img/cartoon_small.png");
            image-fit: contain; // 保持图片原始比例，完整显示在容器内（可能留有空白）
        }
        
        // 第三个图片元素：使用cover模式适配容器
        Image {
            width: 100px;
            height: 200px;
            source: @image-url("../img/cartoon_small.png");
            image-fit: cover; // 保持图片原始比例，填满容器（超出容器的部分会被裁剪）
        }
    }
6. 缩放质量：image-rendering

控制图片缩放时的渲染算法，平滑模式适合照片，像素化模式适合像素画。

slint

复制代码 
// 像素化缩放（保留像素风格）
Image {
    width: 400px;
    height: 400px;
    source: @image-url("../img/cartoon_small.png");
    image-rendering: pixelated;
}

进阶技巧：九切片缩放与无障碍

  • 九切片缩放：适合边框、气泡等可拉伸素材，指定四个方向的保留区域，避免拉伸变形。 例如：要利用以下图片的边框来拼凑自己想要的组件背景（这在自定义组件时特别有用）。

    slint

    复制代码 
        Image {
        source: @image-url("../img/border3D.png", nine-slice(40 40 40 40)); // 上右下左各40px保留
        width: 400px;   // 重新拼凑图像的宽度
        height: 100px;  // 重新拼凑图像的高度
    }

重新拼凑完的Image如下：

  • 无障碍设置：给图片添加描述，或标记为纯装饰元素。 slint

    复制代码 
    // 有意义图片（屏幕阅读器会读取）
Image {
    source: @image-url("slint-logo.png");
    accessible-label: "Slint官方logo";
}

// 纯装饰图片（排除在无障碍树外）
Image {
    source: @image-url("mini-banner.png");
    accessible-role: none;
}

当有视力残疾等用户，想要听过读屏幕来获取当前界面信息时，以上两张图片都会被显示，但是只有第一章图片的"Slint官方logo"这几个字会被纳入到无障碍读屏幕的信息树中，这也就意味着这几个字会被屏幕阅读器为残障人士说出来。而另外的一张图片由于为"无障碍设置"项设定了"none"，这也就意味这屏幕阅读器不会将其收录，自然也不会读，最终残障人士无法感知到这个图片的存在。

二、Path 元素

Path元素的作用是绘制任意复杂图形，它支持用 SVG 命令或 Slint 标记语法，绘制自定义形状、曲线、弧线等，是打造独特 UI 的利器。

核心属性速览

  • fill：形状填充颜色（默认透明）
  • stroke：轮廓颜色（默认透明）
  • stroke-width：轮廓宽度（默认 0）
  • fill-rule：填充规则（nonzero/evenodd）
  • viewbox-*：定义视图窗口，控制图形缩放

两种绘制方式：SVG 命令 vs 标记语法

1. SVG 命令方式（简洁高效）

直接使用 SVG 路径字符串，适合熟悉 SVG 的开发者，一行代码搞定复杂形状。

slint

复制代码 
// 定义一个自定义组件ArcRectangle，继承自Path（路径组件，用于绘制自定义图形）
export component ArcRectangle inherits Path {
    // 组件默认宽度为100px
    width: 100px;
    // 组件默认高度为100px
    height: 100px;
    // 路径绘制命令：通过一系列坐标指令绘制图形
    // M(移动到)→L(直线到)→A(弧线到)→L(直线到)→Z(闭合路径)
    // 具体解析：
    // M 0 0：移动画笔到坐标(0, 0)（左上角起点）
    // L 0 100：从(0,0)画直线到(0,100)（左侧边）
    // A 1 1 0 0 0 100 100：从(0,100)画弧线到(100,100)（底部弧线，参数含义：x半径1、y半径1、旋转0°、大弧0、顺时针0）
    // L 100 0：从(100,100)画直线到(100,0)（右侧边）
    // Z：闭合路径，从(100,0)回到起点(0,0)（顶部边）
    commands: "M 0 0 L 0 100 A 1 1 0 0 0 100 100 L 100 0 Z";
    // 图形边框颜色为红色
    stroke: red;
    // 边框宽度为1px
    stroke-width: 1px;
    // 图形填充色为浅蓝色
    fill: lightblue;
}
2. Slint 标记语法（直观易读）

用 Slint 内置的子元素描述路径，适合复杂路径或需要动态调整的场景。

slint

复制代码 
// 定义一个自定义组件ArcRectangle，继承自Path（路径组件，用于绘制自定义图形）
export component ArcRectangle inherits Path {
    // 组件默认宽度为100px
    width: 100px;
    // 组件默认高度为100px
    height: 100px;
    // 路径绘制命令：通过一系列坐标指令绘制图形
    // M(移动到)→L(直线到)→A(弧线到)→L(直线到)→Z(闭合路径)
    // 具体解析：
    // M 0 0：移动画笔到坐标(0, 0)（左上角起点）
    // L 0 100：从(0,0)画直线到(0,100)（左侧边）
    // A 1 1 0 0 0 100 100：从(0,100)画弧线到(100,100)（底部弧线，参数含义：x半径1、y半径1、旋转0°、大弧0、顺时针0）
    // L 100 0：从(100,100)画直线到(100,0)（右侧边）
    // Z：闭合路径，从(100,0)回到起点(0,0)（顶部边）
    commands: "M 0 0 L 0 100 A 1 1 0 0 0 100 100 L 100 0 Z";
    // 图形边框颜色为红色
    stroke: red;
    // 边框宽度为1px
    stroke-width: 1px;
    // 图形填充色为浅蓝色
    fill: lightblue;
}

图形创建后，可以在其它组件中被使用：

复制代码 
// 定义主窗口组件my_view，继承自Window（顶级窗口容器）
export component my_view inherits Window {

    // 第一个ArcRectangle实例：使用默认属性
    ArcRectangle {
        // 可选：通过属性赋值覆盖默认值（此处仅修改位置，其他用默认）
        x: 50px;  // 组件左上角x坐标（距离窗口左侧50px）
        y: 50px;  // 组件左上角y坐标（距离窗口顶部50px）
    }

    // 第二个ArcRectangle实例：自定义属性（覆盖默认配置）
    ArcRectangle {
        width: 150px;  // 覆盖默认宽度，改为150px
        height: 150px; // 覆盖默认高度，改为150px
        x: 160px;      // 位置x坐标（距离窗口左侧160px）
        y: 120px;      // 位置y坐标（距离窗口顶部120px）
        stroke: green; // 覆盖边框颜色，改为绿色
        stroke-width:5px; // 覆盖边框宽度，改为5px
        fill: yellow;  // 覆盖填充色，改为黄色
        fill-rule: evenodd; // 填充规则：奇偶规则（根据射线穿过路径的次数奇偶判断是否填充）
    }
}

常用路径子元素

  • MoveTo：移动起点，开启新路径
  • LineTo：绘制直线
  • ArcTo：绘制椭圆弧（可控制弧度、方向）
  • CubicTo：三次贝塞尔曲线（两个控制点）
  • QuadraticTo：二次贝塞尔曲线（一个控制点）
  • Close：闭合路径

实用技巧：裁剪与抗锯齿

  • 裁剪：设置clip: true，只显示视图窗口内的图形部分。
  • 抗锯齿：默认开启（anti-alias: true），性能敏感场景可关闭以提升帧率。

三、Rectangle 元素

Rectangle是用来构建界面的基础形状与容器。也就是说它是最常用的基础元素，不仅能绘制矩形、圆形、圆角框，还能作为容器裁剪子元素，支持渐变、边框、阴影等效果。

核心用法示例

1. 基础矩形与圆角

slint

复制代码 
// 1. 纯色矩形（无圆角、纯填充色的基础矩形）
Rectangle {
    x: 10px;  // 组件左上角x坐标：距离窗口左侧10px
    y: 10px;  // 组件左上角y坐标：距离窗口顶部10px
    width: 180px;  // 矩形宽度：180px（控制水平尺寸）
    height: 180px; // 矩形高度：180px（控制垂直尺寸）
    background: #315afd; // 矩形背景色：深蓝色（十六进制颜色值）
}

// 2. 圆角矩形（四个角统一设置圆角的矩形）
Rectangle {
    x: 10px;  // 组件左上角x坐标：距离窗口左侧10px
    y: 210px; // 组件左上角y坐标：距离窗口顶部210px（与上方矩形间距20px）
    width: 180px;  // 矩形宽度：180px
    height: 180px; // 矩形高度：180px
    background: green; // 矩形背景色：绿色
    border-radius: 30px; // 圆角半径：30px（数值越大，角越圆润，四个角圆角一致）
}

// 3. 圆形（通过"宽高相等+圆角=边长的一半"实现）
Rectangle {
    x: 10px;  // 组件左上角x坐标：距离窗口左侧10px
    y: 410px; // 组件左上角y坐标：距离窗口顶部410px（与上方矩形间距20px）
    width: 180px;  // 矩形宽度：180px（需与高度保持一致，才能形成正圆）
    height: 180px; // 矩形高度：180px（与宽度相等，为圆形的直径）
    background: yellow; // 圆形填充色：黄色
    border-radius: self.width/2; // 圆角半径=宽度的1/2（180px/2=90px），四个角圆弧拼接成正圆
}
2. 边框与渐变背景

slint

复制代码 
// 定义一个带渐变背景效果的窗口组件，继承自Slint的顶级Window容器
export component GradientRect inherits Window {
    // 第一个矩形：带红色边框的基础矩形（用于外层边框装饰）
    Rectangle {
        width: 200px;  // 矩形宽度：200px（作为外层边框，尺寸略大于内部渐变矩形）
        height: 200px; // 矩形高度：200px（与宽度一致，保持方形）
        border-color: red; // 边框颜色：红色
        border-width: 2px; // 边框宽度：2px（Slint中border-width默认值为0，必须显式设置才会显示边框）
        // 注：该矩形未设置x/y坐标，默认值为0，即位于窗口左上角
    }

    // 定义一个名为rainbow的属性，类型为<brush>（画笔/填充样式），存储线性渐变规则
    property <brush> rainbow: @linear-gradient(
        40deg, // 渐变方向：与水平方向成40度角（角度值越大，渐变倾斜越明显）
        red 0%,    // 渐变起点（0%位置）：红色
        orange 10%,// 10%位置：橙色
        yellow 20%,// 20%位置：黄色
        green 30%, // 30%位置：绿色
        cyan 40%,  // 40%位置：青色
        blue 50%,  // 50%位置：蓝色
        purple 70% // 70%位置到终点：紫色（后续位置自动填充紫色至100%）
    );

    // 第二个矩形：使用渐变背景的内层矩形（核心渐变展示区域）
    Rectangle {
        width: 180px;  // 矩形宽度：180px（小于外层边框矩形，形成边框包裹效果）
        height: 180px; // 矩形高度：180px（与宽度一致，保持方形）
        background: rainbow; // 背景填充：使用上面定义的rainbow线性渐变
        // 注：未设置x/y坐标，默认值为0，与外层矩形重叠，因尺寸更小，呈现"边框包裹渐变内容"的效果
    }
}
3. 裁剪子元素与阴影

slint

复制代码 
// 定义一个带特殊效果（裁剪、阴影）的窗口组件，继承自Slint的顶级Window容器
export component GradientRect inherits Window {
    // 第一个矩形：演示子元素裁剪效果（父元素范围内显示子元素，超出部分隐藏）
    Rectangle {
        x: 50px;  // 父矩形左上角x坐标：距离窗口左侧50px
        y: 50px;  // 父矩形左上角y坐标：距离窗口顶部50px
        width: 150px;  // 父矩形宽度：150px（作为裁剪区域的边界）
        height: 150px; // 父矩形高度：150px（作为裁剪区域的边界）
        background: darkslategray; // 父矩形背景色：深石板灰（方便区分裁剪区域）
        clip: true; // 开启裁剪功能：子元素超出父矩形范围的部分会被隐藏（核心属性）

        // 子矩形（用于演示裁剪效果）
        Rectangle {
            x: -40px;  // 子矩形左上角x坐标：超出父矩形左侧40px（父矩形x=50，子x=-40，实际左边界在50-40=10px处）
            y: -40px;  // 子矩形左上角y坐标：超出父矩形顶部40px（父矩形y=50，子y=-40，实际上边界在50-40=10px处）
            width: 100px;  // 子矩形宽度：100px
            height: 100px; // 子矩形高度：100px
            background: lightslategray; // 子矩形背景色：浅石板灰（与父矩形区分）
            // 效果：子矩形左上角超出父矩形，超出部分因父矩形clip:true被隐藏，仅显示在父矩形范围内的部分
        }
    }

    // 第二个矩形：演示阴影效果（为元素添加阴影，增强视觉层次感）
    Rectangle {
        x: 250px;  // 矩形左上角x坐标：距离窗口左侧250px（与左侧裁剪矩形拉开距离）
        y: 50px;   // 矩形左上角y坐标：距离窗口顶部50px（与左侧矩形对齐顶部）
        width: 200px;  // 矩形宽度：200px
        height: 200px; // 矩形高度：200px
        background: green; // 矩形背景色：绿色（主体颜色）

        // 阴影相关属性（共同构成阴影效果）
        drop-shadow-blur: 10px; // 阴影模糊程度：10px（数值越大，阴影越模糊）
        drop-shadow-color: rgba(0,0,0,0.3); // 阴影颜色：黑色带30%透明度（rgba格式：红,绿,蓝,透明度）
        drop-shadow-offset-x: 15px; // 阴影水平偏移：向右偏移15px（正值右移，负值左移）
        drop-shadow-offset-y: 15px; // 阴影垂直偏移：向下偏移15px（正值下移，负值上移）
        // 效果：矩形右下方出现一个模糊、半透明的黑色阴影，模拟光线照射的立体感
    }
}

四、Text 元素

Text元素这作用是界面中的文本展示与样式定制，既：用于展示文字，支持字体、颜色、对齐、换行、描边等全方位样式控制，满足各类文本展示需求。

基础样式配置

slint

复制代码 
Text {
    text: "你好 Slint！"; // 显示的文本内容：包含中文问候语和Slint标识
    color: #3586f4; // 文本颜色：十六进制颜色值（浅蓝色，#3586f4对应一种明亮的蓝色）
    font-size: 40pt; // 字体大小：40点（pt为印刷单位，40pt属于较大字体，视觉上更醒目）
    font-family: "楷体"; // 字体样式：使用楷体（中文字体）
    font-weight: 800; // 字重（字体粗细）：800属于加粗范围（100最细，400正常，900最粗），此处文本会显示为粗体
    font-italic: true; // 斜体设置：true表示启用斜体效果，文本将以倾斜样式显示
}

对齐与换行

slint

复制代码 
// 垂直布局容器：内部的子元素会按垂直方向依次排列
VerticalLayout {
    // 第一个矩形：用于演示文本在容器内的对齐方式
    Rectangle {
        width: 200px;  // 矩形宽度：200px
        height: 50px;  // 矩形高度：50px（作为文本的容器，高度足够容纳一行文本）
        border-width: 1px;  // 矩形边框宽度：1px（显示细边框，方便观察文本与容器的位置关系）
        border-color: #000000;  // 边框颜色：黑色（#000000为纯黑，增强边框可见性）

        // 矩形内的文本组件（演示对齐效果）
        Text {
            text: "对齐示例";  // 显示的文本内容
            width: 200px;  // 文本宽度与父矩形一致（确保对齐范围与容器匹配）
            height: 50px;  // 文本高度与父矩形一致（充满容器高度，方便垂直对齐）
            horizontal-alignment: left;  // 水平对齐：左对齐（文本靠容器左侧显示）
            vertical-alignment: center;  // 垂直对齐：居中（文本在容器垂直方向中间位置显示）
        }
    }

    // 第二个矩形：用于演示文本的自动换行功能
    Rectangle {
        width: 200px;  // 矩形宽度：200px（固定宽度，限制文本显示范围）
        height: 50px;  // 矩形高度：50px（高度固定，文本超出时会自动换行而不是溢出）
        border-width: 1px;  // 矩形边框宽度：1px（显示边框，明确文本的显示范围）
        border-color: #000000;  // 边框颜色：黑色（与第一个矩形保持一致，便于对比）

        // 矩形内的文本组件（演示自动换行）
        Text {
            text: "这是一段很长的文本，设置word-wrap后会自动在单词边界换行";  // 长文本内容（用于触发换行）
            width: 180px;  // 文本宽度：180px（小于父矩形宽度，预留边框空间）
            wrap: word-wrap;  // 换行方式：单词换行（在单词之间的空格处换行，避免拆分单词）
            // wrap: char-wrap;  // 可选换行方式：字符换行（可在任意字符间换行，适合中文等无空格文本，仅Qt/Software渲染器支持）
        }
    }
}

溢出处理与字符间距

slint

复制代码 
// 垂直布局容器：内部所有子元素将按照从上到下的垂直方向依次排列，自动分配垂直间距
VerticalLayout {
    // 第一个文本组件：演示中文长文本超出固定宽度时，用省略号替代溢出部分（避免乱码）
    Text {
        text: "这是一段超出宽度的长文本，溢出部分会被省略";  // 测试用中文长文本：长度超过下方设置的200px宽度
        font-family: "宋体";  // 指定中文字体（宋体），确保中文显示正常，避免溢出截断时出现乱码
        font-size: 14pt;  // 字体大小：14点（适中大小，便于观察溢出效果）
        width: 200px;  // 固定文本宽度：200px（限制显示范围，触发文本溢出）
        overflow: elide;  // 溢出处理方式：显示省略号（...）替代溢出部分（核心属性，中文需配合中文字体使用）
        // overflow: clip;  // 可选溢出处理方式：直接裁剪溢出部分（不显示省略号，为Slint默认值）
    }

    // 第二个文本组件：演示字符间距调整（增加/减少字符之间的空隙）
    Text {
        text: "字符间距示例";  // 演示文本：简洁明了，便于观察间距变化
        font-size: 30pt;  // 字体大小：30点（较大字体，让字符间距变化更直观）
        letter-spacing: 4px;  // 字符间距：增加4px（数值越大间距越宽；负值则减少间距，如-2px）
    }
}

进阶效果：文本描边

给文本添加轮廓，打造醒目效果，支持描边位置（外部 / 居中）。

slint

复制代码 
Text {
    text: "描边文本";  // 文本内容：明确展示"描边"效果的示例文字
    font-size: 80px;  // 字体大小：80px（较大尺寸，让描边效果更清晰可见）
    color: white;  // 文本填充色：白色（文本内部的颜色，作为主体颜色）
    stroke: darkblue;  // 描边颜色：深蓝色（文本边缘轮廓的颜色，与填充色形成对比）
    stroke-width: 2px;  // 描边宽度：2px（轮廓线条的粗细，数值越大描边越粗）
    stroke-style: center;  // 描边位置：center表示描边线条居中分布在文本边缘（即一半在文本内部，一半在外部）；可选outside表示描边完全在文本外部
    // 整体效果：白色填充的文本边缘有一圈2px宽的深蓝色描边，增强文本的立体感和辨识度
}

无障碍支持

Text 元素默认已配置无障碍属性，accessible-label自动等于text值，屏幕阅读器会自动读取，无需额外配置。

本章总结

以上四个元素是 Slint UI 开发的基石：Image 搞定图片展示，Path 绘制自定义图形，Rectangle 搭建基础布局与容器，Text 处理文本样式。每个元素的属性都可灵活组合，打造出丰富多样的 UI 效果。

下一章节我将带您掌握对"手势"，既：对操作者触摸界面时的"轻拂 / 快速滑动操作"的支持！再见！

相关推荐
寻找华年的锦瑟3 小时前
Qt Quick Application&&Qt Quick Application (compat)
开发语言·qt
国服第二切图仔3 小时前
Rust开发实战之WebSocket通信实现（tokio-tungstenite）
开发语言·websocket·rust
echoyu.3 小时前
java源代码、字节码、jvm、jit、aot的关系
java·开发语言·jvm·八股
麦麦大数据4 小时前
MacOS 安装Python 3.13【同时保留旧版本】
开发语言·python·macos·python安装
上去我就QWER6 小时前
Qt中如何获取系统版本信息
开发语言·qt
我是苏苏7 小时前
C#高级：程序查询写法性能优化提升策略（附带Gzip算法示例）
开发语言·算法·c#
木木子99997 小时前
业务架构、应用架构、数据架构、技术架构
java·开发语言·架构
大佬，救命！！！12 小时前
C++多线程同步与互斥
开发语言·c++·学习笔记·多线程·互斥锁·同步与互斥·死锁和避免策略
赵文宇（温玉）12 小时前
构建内网离线的“github.com“,完美解决内网Go开发依赖
开发语言·golang·github
热门推荐
01GitHub 镜像站点02综合整理：pdf预览显示：你尝试预览的文件可能对你的计算机有害。如果你信任此文件以及其来源，请打开此文件以看其内容，如何解决以正常预览文件03UV安装并设置国内源04《大数据技术原理与应用》实验报告三 熟悉HBase常用操作05Linux下V2Ray安装配置指南06BongoCat - 跨平台键盘猫动画工具07npm使用国内淘宝镜像的方法08jdk21下载、安装（Windows、Linux、macOS）09NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南10安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）