调试技巧 | K8s Docs

在本页中，我们将分享 Slint 内置的不同技巧和工具，帮助你在设计和开发过程中追踪可能遇到的各种问题。

##调试属性值

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

示例

slint

TouchArea { moved => { // 一个常量字符串参数 debug("moved");
 // 输出：moved }
 pointer-event(event) => { //多个不同类型的变量参数 debug(self.mouse-x, self.mouse-y, event);
 // 输出：135(px)402(px) { button: other, kind: move, modifiers: { alt: false, control: false, meta: false, shift: false } } }}

##慢动作动画

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

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

用户界面缩放

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

注意：目前，只有 FemtoVG 和 Skia渲染器支持此环境变量。

##性能改进调试

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

refresh_lazy：仅在实际渲染帧时测量帧率，例如由于正在运行的动画、用户交互或导致用户界面视觉差异的其他状态变化。如果没有变化，则报告较低的帧率。使用此选项可以验证在没有视觉变化时不会发生不必要的重绘。例如，在显示带有每秒闪烁一次光标的文本输入字段的用户界面中，报告的帧率应为二。
refresh_full_speed：即使没有任何变化，用户界面也会持续刷新。这种持续刷新会对系统造成更高的负载。使用此选项可以识别阻止你实现流畅动画的任何瓶颈。同时使用 software渲染器时还会禁用部分渲染。
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* 调用填充颜色缓冲区。减少调用次数往往可以提高性能。

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

slint

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

例如，在使用 Skia渲染器时，如果你用纯色替换渐变，则所有调用将被合并为一次调用。但是当 UI 设计需要使用渐变时，这是不可能的。但是可能有另一种方法。如果你的柱状图的基础数据很少更改，可能值得将整个图表渲染为一次纹理，从而用一次调用替换多次调用。这可以通过将 cache-rendering-hint 在 BarChar自身上设置为 true 来完成，它包围并捕获各个柱状图。

请注意，大量使用此技术是以增加 GPU内存使用和内存吞吐量为代价的。

用户界面缩放 ​

用户界面缩放