在 VS Code 中创建你的第一个 Slint 文件Hello World 完整指南【免费下载链接】slintSlint is an open-source declarative GUI toolkit to build native user interfaces for Rust, C, JavaScript, or Python apps.项目地址: https://gitcode.com/GitHub_Trending/sl/slint导读本文基于 Slint 官方 VS Code 扩展“入门向导Welcome Walkthrough”中的create_slint_file.md步骤讲解如何在 VS Code 中创建并验证你的第一个.slint文件。你将掌握 Slint 声明式 UI 语言的最小可运行骨架——从导入标准组件、声明组件、使用布局与文本、到借助扩展的语法高亮与实时预览验证界面效果为后续在 Rust、C、JavaScript 或 Python 项目中嵌入 Slint UI 打下基础。一个文件三步上手在 Slint 中用户界面完全由.slint文件描述。官方入门向导给出了一个堪称“HelloWorld 最小范式”的完整示例——只需将其复制粘贴到你的新.slint文件中即可运行import { Button, VerticalBox } from std-widgets.slint; export component Demo { VerticalBox { alignment: start; Text { text: Hello World!; font-size: 2rem; horizontal-alignment: center; } HorizontalLayout { alignment: center; Button { text: OK; } } } }该示例虽然只有 20 行却完整覆盖了 Slint 语言的四个核心语法要素import语句从标准组件库std-widgets.slint引入Button与VerticalBoxexport component声明导出一个可供宿主程序Rust/C/JS/Python实例化的根组件Demo布局系统VerticalBox纵向排列内容、HorizontalLayout横向排列内容内置元素Text显示文本、Button提供可点击的按钮控件。关键一步保存为 .slint 扩展名入门向导特别强调了一句话Make sure to save the file with .slint extension for VSCode to accept that it is indeed a Slint file.即必须将文件保存为.slint扩展名VS Code 才会将其识别为 Slint 文件。这并非随意约定而是由扩展的清单文件editors/vscode/package.json中声明的语言绑定决定的languages: [ { id: slint, aliases: [Slint], extensions: [.slint, .60], configuration: language-configuration.json, ... } ]扩展将.slint以及历史遗留的.60后缀映射到slint语言 ID。只有扩展名匹配VS Code 才会应用 TextMate 语法高亮slint.tmLanguage.jsonscope 为source.slint激活 Slint 语言服务器LSP提供自动补全、跳转定义、重构与错误诊断在编辑器标题栏显示Show Preview预览按钮菜单贡献点editor/title的when条件为resourceLangId slint见 editors/vscode/package.json。因此一个常见错误就是新建文件时使用了默认的Untitled-1或错误后缀如.txt导致编辑器不提供任何 Slint 能力。解决方式有两种使用扩展提供的向导命令Create New Project from Template或在命令面板中选择新建 Slint 文件直接以helloworld.slint之类的名字保存文件。提示slint语言 ID 的括号自动补全、代码折叠标记// region/// endregion、缩进规则等细节可在 editors/vscode/language-configuration.json 中查看。逐行拆解 Hello Worldimport从标准组件库引入控件第一行从std-widgets.slint导入Button与VerticalBoximport { Button, VerticalBox } from std-widgets.slint;std-widgets.slint是 Slint 内置的“标准小部件”入口聚合了跨平台样式风格fluent、material、cupertino、cosmic、qt 等下的常用控件。从源码结构看VerticalBox是标准布局组件的封装其定义位于 internal/compiler/widgets/common/layout.slintexport component VerticalBox inherits VerticalLayout { spacing: StyleMetrics.layout-spacing; padding: StyleMetrics.layout-padding; }即VerticalBox继承自内置布局元素VerticalLayout并自动套用当前主题的间距layout-spacing与内边距layout-padding让子元素纵向排列时无需手动逐个设置间距。Button则定义在 internal/compiler/widgets/fluent/button.slint 等各样式目录下公开了一组实用属性与回调export component Button { in property string text; in property image icon; in property bool primary; in property bool enabled i-touch-area.enabled; out property bool pressed: self.enabled i-touch-area.pressed; in-out property bool checked; callback clicked; }可以看到text用于设置按钮文字clicked是点击回调enabled、primary、checkable、checked等分别控制可用性、强调样式、可选中状态与选中值。这些都是你在后续开发中可以直接使用的公开接口。export component声明可复用的根组件export component Demo { ... }component是 Slint 中封装一段 UI 的容器export使其对宿主程序可见。编译后宿主代码如 Rust 的slint::include_modules!、C 的slint::include!、Python 的load_file、JS 的loadFile就能实例化名为Demo的组件并与其属性、回调交互。Demo的根节点是VerticalBox它既是布局容器也是组件的可视根。VerticalBox 与 alignment控制纵向排布VerticalBox { alignment: start; ... }VerticalBox内部按从上到下的顺序摆放子元素。alignment: start表示内容整体向顶部对齐与布局方向一致的那一端。alignment的可选值通常包括start、center、end、space-between、space-around等用于控制子元素在主轴方向上的整体分布这里取start让内容靠上、视觉更紧凑。Text显示文本的内置元素Text { text: Hello World!; font-size: 2rem; horizontal-alignment: center; }text要显示的字符串这里是Hello World!font-size字号2rem为相对单位相对根元素字号的两倍与 px 等单位同样受支持horizontal-alignment: center文本在自身宽度范围内水平居中。Text是 Slint 内置元素完整属性color、font-family、font-weight、wrap、overflow等可参考扩展源码中内置元素的帮助映射表editors/vscode/src/common.ts。HorizontalLayout 与 Button一行中的交互控件HorizontalLayout { alignment: center; Button { text: OK; } }HorizontalLayout是内置的横向布局元素将子元素从左到右排列alignment: center使按钮在水平方向居中。按钮通过text: OK设置显示文字。在实际应用中你还可以为其绑定clicked回调例如clicked { /* 响应逻辑 */ }。语法文件VS Code 如何“看懂” Slint保存为.slint后扩展通过 TextMate 语法文件 editors/vscode/slint.tmLanguage.json 对代码进行着色。该语法规则以source.slint为作用域识别component、import、property、callback等关键字、std-widgets.slint这类字符串与数值常量。此外editors/vscode/package.json 还声明了两类注入语法slint.injection.json在 Rust 源码的slint!{ ... }宏内嵌入 Slint 高亮slint.markdown-injection.json在 Markdown 的slint代码块内嵌入 Slint 高亮。这意味着你不仅在.slint文件中获得高亮在 Rust 内联宏和本文档这类 Markdown 示例中同样能得到着色与校验。向导中内置的“Hello World”示例正是采用 Markdown 代码块承载.slint内容配合该注入语法即可正确渲染。从向导到实战用代码片段秒建新文件除了欢迎向导扩展还内置了 Hello World 代码片段editors/vscode/snippets/slint.json。在.slint文件中输入前缀hello world window并确认即可生成一个带窗口基座inherits Window的完整示例import { AboutSlint, VerticalBox } from std-widgets.slint; export component MainWindow inherits Window { VerticalBox { Text { text: Hello World!; } AboutSlint { preferred-height: 150px; } } }与向导示例相比它增加了inherits Window让组件成为一个可显示的顶层窗口和AboutSlint展示 Slint 品牌信息的组件。注意snippet 中的MainWindow明确继承了Window元素因为要作为窗口运行而向导示例的Demo未继承Window更强调“纯 UI 组件”的形态。在 VS Code 的预览功能下两者都能实时渲染若要在真实应用中作为窗口展示请为根组件加上inherits Window。若希望进一步接近实战可以参考仓库中大量以import { ... } from std-widgets.slint开头的真实示例例如 examples/memory/memory.slint、examples/iot-dashboard/iot-dashboard.slint观察真实项目中组件组织、属性绑定与回调的写法。保存后立即获得实时预览完成保存后扩展的slint.showPreview命令与语言服务器的slint/showPreview命令见 editors/vscode/src/lsp_commands.ts会协同工作。扩展入口 editors/vscode/src/common.ts 将编辑器当前文档 URI 传给语言服务器由 LSP 端渲染预览。预览保持打开时你输入的任何修改都会实时反映到界面上这对 Hello World 这类布局/样式调优场景非常高效。预览背后由 Slint 语言服务器slint-lsp驱动扩展会自动选择随包分发的二进制见 editors/vscode/src/extension.ts。若需要调整预览样式可在扩展设置中配置slint.preview.style如fluent、material、native或通过slint.lsp-args向 LSP 传递额外参数配置项定义见 editors/vscode/package.json。小结与下一步至此你已经走通了 Slint 开发的最小闭环新建文件并以.slint后缀保存让 VS Code 识别为 Slint 文件从std-widgets.slint导入标准组件用export component声明根组件用VerticalBox/HorizontalLayout组织布局、Text/Button呈现内容借助语法高亮、自动补全与实时预览验证界面效果。接下来你可以做三件事深化学习一是给Button的clicked回调绑定交互逻辑二是参考 internal/compiler/widgets 目录下的标准组件源码了解Button、VerticalBox等控件的完整属性三是阅读 examples 目录中的完整项目学习如何在 Rust、C、JavaScript、Python 宿主代码中加载.slint文件并驱动界面。【免费下载链接】slintSlint is an open-source declarative GUI toolkit to build native user interfaces for Rust, C, JavaScript, or Python apps.项目地址: https://gitcode.com/GitHub_Trending/sl/slint创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 在 VS Code 中创建你的第一个 Slint 文件：Hello World 完整指南
在 VS Code 中创建你的第一个 Slint 文件Hello World 完整指南【免费下载链接】slintSlint is an open-source declarative GUI toolkit to build native user interfaces for Rust, C, JavaScript, or Python apps.项目地址: https://gitcode.com/GitHub_Trending/sl/slint导读本文基于 Slint 官方 VS Code 扩展“入门向导Welcome Walkthrough”中的create_slint_file.md步骤讲解如何在 VS Code 中创建并验证你的第一个.slint文件。你将掌握 Slint 声明式 UI 语言的最小可运行骨架——从导入标准组件、声明组件、使用布局与文本、到借助扩展的语法高亮与实时预览验证界面效果为后续在 Rust、C、JavaScript 或 Python 项目中嵌入 Slint UI 打下基础。一个文件三步上手在 Slint 中用户界面完全由.slint文件描述。官方入门向导给出了一个堪称“HelloWorld 最小范式”的完整示例——只需将其复制粘贴到你的新.slint文件中即可运行import { Button, VerticalBox } from std-widgets.slint; export component Demo { VerticalBox { alignment: start; Text { text: Hello World!; font-size: 2rem; horizontal-alignment: center; } HorizontalLayout { alignment: center; Button { text: OK; } } } }该示例虽然只有 20 行却完整覆盖了 Slint 语言的四个核心语法要素import语句从标准组件库std-widgets.slint引入Button与VerticalBoxexport component声明导出一个可供宿主程序Rust/C/JS/Python实例化的根组件Demo布局系统VerticalBox纵向排列内容、HorizontalLayout横向排列内容内置元素Text显示文本、Button提供可点击的按钮控件。关键一步保存为 .slint 扩展名入门向导特别强调了一句话Make sure to save the file with .slint extension for VSCode to accept that it is indeed a Slint file.即必须将文件保存为.slint扩展名VS Code 才会将其识别为 Slint 文件。这并非随意约定而是由扩展的清单文件editors/vscode/package.json中声明的语言绑定决定的languages: [ { id: slint, aliases: [Slint], extensions: [.slint, .60], configuration: language-configuration.json, ... } ]扩展将.slint以及历史遗留的.60后缀映射到slint语言 ID。只有扩展名匹配VS Code 才会应用 TextMate 语法高亮slint.tmLanguage.jsonscope 为source.slint激活 Slint 语言服务器LSP提供自动补全、跳转定义、重构与错误诊断在编辑器标题栏显示Show Preview预览按钮菜单贡献点editor/title的when条件为resourceLangId slint见 editors/vscode/package.json。因此一个常见错误就是新建文件时使用了默认的Untitled-1或错误后缀如.txt导致编辑器不提供任何 Slint 能力。解决方式有两种使用扩展提供的向导命令Create New Project from Template或在命令面板中选择新建 Slint 文件直接以helloworld.slint之类的名字保存文件。提示slint语言 ID 的括号自动补全、代码折叠标记// region/// endregion、缩进规则等细节可在 editors/vscode/language-configuration.json 中查看。逐行拆解 Hello Worldimport从标准组件库引入控件第一行从std-widgets.slint导入Button与VerticalBoximport { Button, VerticalBox } from std-widgets.slint;std-widgets.slint是 Slint 内置的“标准小部件”入口聚合了跨平台样式风格fluent、material、cupertino、cosmic、qt 等下的常用控件。从源码结构看VerticalBox是标准布局组件的封装其定义位于 internal/compiler/widgets/common/layout.slintexport component VerticalBox inherits VerticalLayout { spacing: StyleMetrics.layout-spacing; padding: StyleMetrics.layout-padding; }即VerticalBox继承自内置布局元素VerticalLayout并自动套用当前主题的间距layout-spacing与内边距layout-padding让子元素纵向排列时无需手动逐个设置间距。Button则定义在 internal/compiler/widgets/fluent/button.slint 等各样式目录下公开了一组实用属性与回调export component Button { in property string text; in property image icon; in property bool primary; in property bool enabled i-touch-area.enabled; out property bool pressed: self.enabled i-touch-area.pressed; in-out property bool checked; callback clicked; }可以看到text用于设置按钮文字clicked是点击回调enabled、primary、checkable、checked等分别控制可用性、强调样式、可选中状态与选中值。这些都是你在后续开发中可以直接使用的公开接口。export component声明可复用的根组件export component Demo { ... }component是 Slint 中封装一段 UI 的容器export使其对宿主程序可见。编译后宿主代码如 Rust 的slint::include_modules!、C 的slint::include!、Python 的load_file、JS 的loadFile就能实例化名为Demo的组件并与其属性、回调交互。Demo的根节点是VerticalBox它既是布局容器也是组件的可视根。VerticalBox 与 alignment控制纵向排布VerticalBox { alignment: start; ... }VerticalBox内部按从上到下的顺序摆放子元素。alignment: start表示内容整体向顶部对齐与布局方向一致的那一端。alignment的可选值通常包括start、center、end、space-between、space-around等用于控制子元素在主轴方向上的整体分布这里取start让内容靠上、视觉更紧凑。Text显示文本的内置元素Text { text: Hello World!; font-size: 2rem; horizontal-alignment: center; }text要显示的字符串这里是Hello World!font-size字号2rem为相对单位相对根元素字号的两倍与 px 等单位同样受支持horizontal-alignment: center文本在自身宽度范围内水平居中。Text是 Slint 内置元素完整属性color、font-family、font-weight、wrap、overflow等可参考扩展源码中内置元素的帮助映射表editors/vscode/src/common.ts。HorizontalLayout 与 Button一行中的交互控件HorizontalLayout { alignment: center; Button { text: OK; } }HorizontalLayout是内置的横向布局元素将子元素从左到右排列alignment: center使按钮在水平方向居中。按钮通过text: OK设置显示文字。在实际应用中你还可以为其绑定clicked回调例如clicked { /* 响应逻辑 */ }。语法文件VS Code 如何“看懂” Slint保存为.slint后扩展通过 TextMate 语法文件 editors/vscode/slint.tmLanguage.json 对代码进行着色。该语法规则以source.slint为作用域识别component、import、property、callback等关键字、std-widgets.slint这类字符串与数值常量。此外editors/vscode/package.json 还声明了两类注入语法slint.injection.json在 Rust 源码的slint!{ ... }宏内嵌入 Slint 高亮slint.markdown-injection.json在 Markdown 的slint代码块内嵌入 Slint 高亮。这意味着你不仅在.slint文件中获得高亮在 Rust 内联宏和本文档这类 Markdown 示例中同样能得到着色与校验。向导中内置的“Hello World”示例正是采用 Markdown 代码块承载.slint内容配合该注入语法即可正确渲染。从向导到实战用代码片段秒建新文件除了欢迎向导扩展还内置了 Hello World 代码片段editors/vscode/snippets/slint.json。在.slint文件中输入前缀hello world window并确认即可生成一个带窗口基座inherits Window的完整示例import { AboutSlint, VerticalBox } from std-widgets.slint; export component MainWindow inherits Window { VerticalBox { Text { text: Hello World!; } AboutSlint { preferred-height: 150px; } } }与向导示例相比它增加了inherits Window让组件成为一个可显示的顶层窗口和AboutSlint展示 Slint 品牌信息的组件。注意snippet 中的MainWindow明确继承了Window元素因为要作为窗口运行而向导示例的Demo未继承Window更强调“纯 UI 组件”的形态。在 VS Code 的预览功能下两者都能实时渲染若要在真实应用中作为窗口展示请为根组件加上inherits Window。若希望进一步接近实战可以参考仓库中大量以import { ... } from std-widgets.slint开头的真实示例例如 examples/memory/memory.slint、examples/iot-dashboard/iot-dashboard.slint观察真实项目中组件组织、属性绑定与回调的写法。保存后立即获得实时预览完成保存后扩展的slint.showPreview命令与语言服务器的slint/showPreview命令见 editors/vscode/src/lsp_commands.ts会协同工作。扩展入口 editors/vscode/src/common.ts 将编辑器当前文档 URI 传给语言服务器由 LSP 端渲染预览。预览保持打开时你输入的任何修改都会实时反映到界面上这对 Hello World 这类布局/样式调优场景非常高效。预览背后由 Slint 语言服务器slint-lsp驱动扩展会自动选择随包分发的二进制见 editors/vscode/src/extension.ts。若需要调整预览样式可在扩展设置中配置slint.preview.style如fluent、material、native或通过slint.lsp-args向 LSP 传递额外参数配置项定义见 editors/vscode/package.json。小结与下一步至此你已经走通了 Slint 开发的最小闭环新建文件并以.slint后缀保存让 VS Code 识别为 Slint 文件从std-widgets.slint导入标准组件用export component声明根组件用VerticalBox/HorizontalLayout组织布局、Text/Button呈现内容借助语法高亮、自动补全与实时预览验证界面效果。接下来你可以做三件事深化学习一是给Button的clicked回调绑定交互逻辑二是参考 internal/compiler/widgets 目录下的标准组件源码了解Button、VerticalBox等控件的完整属性三是阅读 examples 目录中的完整项目学习如何在 Rust、C、JavaScript、Python 宿主代码中加载.slint文件并驱动界面。【免费下载链接】slintSlint is an open-source declarative GUI toolkit to build native user interfaces for Rust, C, JavaScript, or Python apps.项目地址: https://gitcode.com/GitHub_Trending/sl/slint创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考