调试技巧

本页分享我们在 Slint 中构建的各种技巧和工具，帮助你在设计与开发过程中排查可能遇到的各种问题。

调试属性值

使用 debug() 函数将属性值打印到 stderr。它支持多个参数和不同类型。非标量类型（例如 struct 类型）通常表示为单行 json 字符串。

示例

TouchArea {
    moved => {
        // a single constant string argument
        debug("moved");

        // output: moved
    }

    pointer-event(event) => {
        // multiple variable arguments with different types
        debug(self.mouse-x, self.mouse-y, event);

        // output: 135(px) 402(px) { button: other, kind: move, modifiers: { alt: false, control: false, meta: false, shift: false } }
    }
}

slint

慢动作动画

用户界面中的动画需要经过精心设计，以具有正确的持续时间，元素位置或大小的变化也需要遵循缓动曲线。

要检查应用中的动画，请在运行程序前设置 SLINT_SLOW_ANIMATIONS 环境变量。该变量接受一个无符号整数值，表示自动将所有动画的步骤全局放慢的倍数。这意味着你无需手动修改 .slint 标记并重新编译。例如，SLINT_SLOW_ANIMATIONS=4 会将动画放慢四倍。

用户界面缩放

在整个 .slint 文件中使用逻辑像素长度，让 Slint 能够根据屏幕的设备像素比动态计算物理像素的数量。要了解各个元素在不同设备像素比的屏幕上渲染时的效果，请在运行程序前设置 SLINT_SCALE_FACTOR 环境变量。该变量接受一个浮点数，用于将逻辑像素长度转换为物理像素长度。例如，SLINT_SCALE_FACTOR=2 会以每个逻辑像素的宽高都变为两倍的方式渲染用户界面。

注意：此覆盖在后端层面应用，与渲染器无关。winit 和 linuxkms 后端支持它。

为提升性能而调试

Slint 尝试利用硬件加速，确保在保持动画流畅的同时，渲染用户界面消耗的 CPU 资源最少。然而，根据用户界面的复杂度、图形驱动程序的质量或系统中 GPU 的性能，你可能会遇到瓶颈并感到卡顿。要解决这个问题，请在运行程序前设置 SLINT_DEBUG_PERFORMANCE 环境变量，以检查帧率。以下选项会影响帧率的检查和报告：

refresh_lazy：仅在渲染实际帧时测量帧率，例如由于正在运行的动画、用户交互，或其他导致用户界面出现视觉差异的状态变化。如果没有变化，则报告较低的帧率。使用此选项可以验证在没有视觉变化时不会发生不必要的重绘。例如，在一个显示带有一秒闪烁一次光标的文本输入框的用户界面中，报告的帧率应为 2。
refresh_full_speed：即使没有任何变化，用户界面也会持续刷新。这种持续刷新会导致系统负载升高。使用此选项可以找出妨碍你实现流畅动画的任何瓶颈。它还会禁用软件渲染器的局部渲染。
console：帧率会打印到控制台的 stderr。
overlay：帧率会作为覆盖文本标签显示在每个窗口的用户界面之上。

将这些选项组合使用，用逗号分隔。你必须选择一种帧率测量方法与一种报告方法的组合。例如，SLINT_DEBUG_PERFORMANCE=refresh_full_speed,overlay 会在每个窗口中反复重新渲染整个用户界面，并在左上角打印达到的帧率。相比之下，SLINT_DEBUG_PERFORMANCE=refresh_lazy,console,overlay 仅在用户界面中发生变化时测量帧率，测得的数值既会打印到 stderr，也会作为覆盖文本标签渲染。

环境变量必须在运行程序之前设置。如果应用运行在没有标准库的微控制器上，则必须在编译期间设置该环境变量。

调优渲染性能

如果你对性能不满意，可能值得深入进行低层次调查。诸如 RenderDoc 这样的工具允许记录应用的渲染输出，并能让你详细了解 Slint 的渲染器为用户界面生成的 OpenGL/Vulkan 命令。

一般经验法则是，最好尽量减少每帧的命令数量。在 OpenGL 中，你会看到 glDrawArrays() 和 glDrawElementsInstanced* 调用填充颜色缓冲区。减少调用数量通常能提升性能。

例如，如果你通过用渐变填充矩形来绘制一系列柱状图，你会观察到每个矩形本身就是一次绘制调用：

component BarChart inherits Rectangle {
    background: black;
    height: 150px;
    HorizontalLayout {
        spacing: 10px;
        for i in 5: Rectangle {
            height: 10px + i * 20px;
            width: 20px;
            background: @linear-gradient(180deg, #f00 0%, #0f0);
        }
    }
}

slint

例如，在使用 Skia 渲染器时，如果你用纯色替换渐变，这些调用会全部批处理为一次调用。但当 UI 设计要求使用渐变时，就无法这样做。不过也许还有另一种方法。如果柱状图的底层数据很少变化，可能值得将整个图表一次性渲染到纹理中，从而用一次调用替换多次调用。这可以通过将

cache-rendering-hint 设置在 BarChar 自身上为 true 来实现，它会包围并捕获各个柱状图。

请注意，大量使用此技术会增加 GPU 内存占用和内存吞吐量。