在以下各节中，我们分享了多年来积累的经验。这些经验将帮助你规避一些陷阱、应对棘手情况，并提升 UI 代码的可维护性。

可访问性

在设计自定义组件时，请尽早考虑声明 可访问性属性。至少需要声明一个 role（角色），必要时还应包含 label（标签）以及 actions（操作）。

如果你在 Windows 上进行开发，那么 Accessibility Insights 工具是帮助你发现并修复可访问性问题的得力助手。

如果你在 macOS 上进行开发，Accessibility Inspector 提供类似的功能。请注意，它要求应用程序以 bundle（应用包）形式构建。

component CustomButton {    // ...    in property <string> text;
    accessible-role: button;    accessible-label: self.text;    accessible-action-default => { /* simulate click */ }}

分离代码、UI 和资源

许多项目起初很小，只有寥寥几个文件。但不知不觉中，团队扩大了，文件也增多了，"只见树木不见森林"的情况变得越来越常见。我们建议从以下基本目录结构开始：

my-project├── src│   ├── main.cpp / main.rs / main.js / main.py│        <this is where your main business logic lives>├── ui    ├── app-window.slint <the entry point for your Slint UI>    ├── <additional .slint files here>    ├── images        ├── logo.svg        ├── highlight-marker.svg        ├── <all your images go here>

plaintext

翻译

• 当向 UI 添加面向用户的字符串时，请尽早考虑通过将它们包装在 @tr("...") 中来将它们标记为 可翻译字符串。
• 避免使用 + 拼接字符串，优先使用 {} 占位符。这样翻译人员就可以重新排列参数顺序，以获得最自然的翻译。

Caution

export component Example {    property <string> name;
    Text {        text: "Ink Level Controls"; // Oooops, forgot to mark as translatable    }    Text {        text: @tr("Hello, ") + name; // Oooops, this is difficult to translate    }}

Tip

export component Example {    property <string> name;
    Text {        text: @tr("Ink Level Controls");    }    Text {        text: @tr("Hello, {}", name); // Good, now the translator can re-order    }}