使用 Slint 构建跨平台 Energy Monitor 演示应用从桌面、MCU 到 Web 的多端运行指南【免费下载链接】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/slintEnergy Monitor 是 Slint 官方仓库 demos/energy-monitor 中一个完整的多平台演示应用展示了同一套.slint声明式 UI 如何在桌面、嵌入式 Linux、MCU 微控制器、Android、Node.js、Web 与 iOS 等差异巨大的目标环境上运行。本文以该演示为核心讲解其基于 Open-Meteo 的实时天气数据接入方式、Cargo feature 驱动的多后端构建机制以及每种平台从准备环境到实际运行的完整命令与注意事项帮助你理解 Slint「一套 UI、多端部署」的真实落地形态。应用概览一个用于展示 Slint 多端能力的能源监控面板Energy Monitor Demo 是一个模拟家庭能源监控面板的界面程序包含仪表盘、用量统计、余额图表、天气、设置等多个页面并针对不同屏幕尺寸提供响应式布局。从 demos/energy-monitor/ui/desktop_window.slint 的源码可以看到主窗口通过三个断点区分界面形态big-break-point: 1366px桌面大屏mid-break-point: 799px嵌入式中等屏幕mobile-break-point: 444px手机窄屏。配合 theme.slint 与 pages/pages.slint 中定义的OverviewAdapter、UsageAdapter、WeatherAdapter、SettingsAdapter等全局适配器Rust / JavaScript 宿主代码可以在运行时读写 UI 状态。该演示的独特价值在于它同时提供 Rust、Node.js 两种宿主实现且 Rust 版本通过 feature 开关在同一份源码上支持从no_stdMCU 到带网络栈的桌面环境的编译是学习 Slint 多平台工程化的理想样本。实时天气数据Open-Meteo 免费接入与位置配置应用的核心动态数据源是 Open-Meteo 实现Node.js 端由 main.js 平行实现。地理位置环境变量应用通过两个环境变量控制天气查询的地理位置默认值均为柏林Berlin环境变量含义默认值柏林WEATHER_LAT纬度latitude52.520008WEATHER_LONG经度longitude13.404954Rust 源码中的读取顺序见 weather.rs是先尝试编译期环境变量option_env!(WEATHER_LAT)适用于无法访问运行环境变量的 MCU 场景再尝试运行时std::env::var_os桌面等场景最后回退到柏林默认坐标。因此在使用时既可以直接WEATHER_LATxx WEATHER_LONGyy cargo run ...运行也可以在编译阶段注入固定值。请求构造与数据模型天气请求 URL 的构造方式为https://api.open-meteo.com/v1/forecast ?latitude{lat}longitude{long} currenttemperature_2m,weather_code dailytemperature_2m_max,temperature_2m_min,weather_code timezoneautoforecast_days3其中forecast_days3对应源码中const FORECAST_DAYS: usize 33 天预报。响应通过serde反序列化为ForecastResponse结构current携带当前温度与天气代码daily携带每天的最高/最低温度与天气代码数组。WMO 天气代码到界面文案与图标的映射Open-Meteo 返回的是标准 WMO 天气代码应用将其翻译为可读文本见 weather.rs0晴Clear sky、1基本晴Mainly clear、2局部多云Partly cloudy、3阴Overcast45/48雾Fog、51..55毛毛雨Drizzle、61/63/65小雨/中雨/大雨、71..75降雪、80..82阵雨、95..99雷暴其他代码归为Unknown。图标的选择逻辑同样与天气代码绑定weather.rs2显示cloudy3及以上显示cloud其余显示sunny图标资源位于 ui/assetssunny.svg、cloudy.svg、cloud.svg等。后台线程与事件循环安全更新Rust 实现将网络请求放在独立线程中setup使用thread::spawn启动一个线程内部创建tokio::runtime::Runtime并block_on(weather_worker_loop)weather.rs。请求完成后通过window_weak.upgrade_in_event_loop(...)回到 Slint 事件循环线程再调用WeatherAdapter的set_current_temperature、set_current_day、set_current_weather_description、set_week_model等方法更新 UI避免跨线程直接操作 UI 对象。与之配合的还有 src/controllers/header.rs 中的头部时钟一个 300ms 周期的Timer持续刷新HeaderAdapter的日期、时间12 小时制与 AM/PM 后缀。平台兼容性同一套 UI 的五种运行方式桌面Windows / macOS / Linux与嵌入式 Linux在仓库根目录执行cargo run --manifest-path demos/energy-monitor/Cargo.toml默认 feature见 Cargo.toml为[slint/default, network, chrono, slint/backend-android-activity-06]桌面环境下 Slint 会自动选择 winit 等原生后端直接弹出桌面窗口。微控制器MCU与桌面模拟器在 Raspberry Pi Pico 等小设备上运行的方法参考 examples/mcu-board-support 目录下的说明其中包含各开发板的 feature 与烧录命令例如mcu-board-support/pico-st7789配合--target thumbv6m-none-eabi构建后使用elf2uf2-rs烧录。Energy Monitor 的 Rust 入口在启用mcu-board-support时切换为no_std#[mcu_board_support::entry]模式见 src/main.rs。若没有实体开发板可以在桌面模拟器上运行 MCU 版本代码cargo run --manifest-path demos/energy-monitor/Cargo.toml --no-default-features --featuressimulator --releasesimulatorfeature[mcu-board-support, slint/renderer-software, slint/backend-winit, slint/std]使用软件渲染器在桌面窗口内模拟 MCU 的显示环境便于在开发板上调试 UI 与逻辑。Android先完成 Slint 官方文档中 Android 环境的搭建安装 Android SDK/NDK、配置ANDROID_HOME等然后在仓库根目录执行cargo apk run --manifest-path demos/energy-monitor/Cargo.toml --target aarch64-linux-android --lib该命令依赖默认 feature 中的slint/backend-android-activity-06后端源码中 lib.rs 还提供了#[no_mangle] fn android_main(app: slint::android::AndroidApp)入口供 android-activity 框架调用。Node.js进入 demo 目录安装依赖并启动cd demos/energy-monitor pnpm install pnpm startpnpm start会先执行prestart脚本cd ../../api/node/ pnpm run build pnpm compile把 Node 绑定编译好后由 main.js 通过slint.loadFile(new URL(ui/desktop_window.slint, import.meta.url))动态加载 UI 并创建MainWindow。位置同样通过WEATHER_LAT/WEATHER_LONG环境变量设置默认柏林main.js。Node 端还以setInterval(..., 300)实现实时时钟、以setInterval(..., 4000)实现展厅 Kiosk 模式的 4 秒自动翻页。WebWebAssembly先用 cargo 安装 wasm-pack然后构建 WebAssembly 版本cargo install wasm-pack cd demos/energy-monitor/ wasm-pack build --release --target web --no-default-features --features slint/backend-winit,slint/renderer-femtovg,chrono python3 -m http.server构建产物pkg/由 index.html 通过script typemoduleimport init from ./pkg/energy_monitor.js加载随后在浏览器中打开http://localhost:8000即可体验。页面使用renderer-femtovg软件渲染器绘制到canvaschronofeature 提供日期处理。Rust 入口通过#[cfg_attr(target_arch wasm32, wasm_bindgen(start))]标记lib.rs便于浏览器自动调用。iOS该演示支持交叉编译到 iPhone、iPad 及对应模拟器。前置条件一台 macOS 电脑安装最新版 Xcode安装 Xcodegenxcodegen命令行工具安装 Rust并添加目标与模拟器工具链rustup target add aarch64-apple-ios rustup target add aarch64-apple-ios-sim构建步骤在 demo 目录执行xcodegen -s ios-project.yml生成 Xcode 工程.xcodeproj用 Xcode 打开生成的.xcodeproj在 Xcode 中直接运行、部署与调试。工程配置见 demos/energy-monitor/ios-project.yml它声明了bundleIdPrefix: dev.slint.demos、iOS 16.6 的部署目标并在postCompileScripts中调用仓库脚本 scripts/build_for_ios_with_cargo.bash 完成 Cargo 交叉编译。深入源码功能开关与模块组织从 Cargo.toml 可以看出该 demo 的依赖与 feature 设计非常克制是理解 Slint 多后端组合的绝佳样例Feature内容作用defaultslint/default、network、chrono、slint/backend-android-activity-06桌面 / Android 的完整功能形态networkreqwest、serde、tokio启用天气网络请求chronochrono依赖启用日期时间格式化与头部时钟simulatormcu-board-support、slint/renderer-software、slint/backend-winit、slint/stdMCU 代码的桌面模拟运行对应地lib.rs 中controllers模块、header与weather子模块均以#[cfg(feature ...)]条件编译main.rs在启用mcu-board-support时进入no_std裸机入口否则调用energy_monitor::main()。天气模块内部还有一个值得注意的细节在启用mcu-board-support时lat()/long()不再读取运行时环境变量MCU 没有进程环境只能依赖编译期注入或默认柏林坐标weather.rs这体现了不同目标平台对代码实现的隐性约束。UI 侧blocks、widgets、pages 三层目录分别放置可复用块、通用控件与页面组件mcu_window.slint 等窗口组件则对应不同目标尺寸。Kiosk 模式展厅大屏自动轮播的逻辑在 Rust 端由 lib.rs 中的 4 秒Timer实现当SettingsAdapter.kiosk_mode_checked为真时周期性切换MenuOverviewAdapter.current_page到下一页并循环。小结Energy Monitor Demo 的价值不在于界面本身而在于它演示了 Slint 声明式 UI 在工程层面的可移植性一份.slint描述配合 Cargo feature 与各平台后端winit、android-activity、renderer-software、renderer-femtovg、MCU board support即可覆盖从no_std微控制器到桌面、移动端与浏览器的完整目标矩阵Node.js 版本则展示了同一套 UI 文件在 JavaScript 宿主下的复用。若想进一步研究可重点阅读 demos/energy-monitor/src/controllers/weather.rs天气数据管线、demos/energy-monitor/main.jsNode 平行实现以及 examples/mcu-board-supportMCU 后端接入方式并结合本文各平台的命令逐一实操验证。【免费下载链接】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），仅供参考
使用 Slint 构建跨平台 Energy Monitor 演示应用：从桌面、MCU 到 Web 的多端运行指南
使用 Slint 构建跨平台 Energy Monitor 演示应用从桌面、MCU 到 Web 的多端运行指南【免费下载链接】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/slintEnergy Monitor 是 Slint 官方仓库 demos/energy-monitor 中一个完整的多平台演示应用展示了同一套.slint声明式 UI 如何在桌面、嵌入式 Linux、MCU 微控制器、Android、Node.js、Web 与 iOS 等差异巨大的目标环境上运行。本文以该演示为核心讲解其基于 Open-Meteo 的实时天气数据接入方式、Cargo feature 驱动的多后端构建机制以及每种平台从准备环境到实际运行的完整命令与注意事项帮助你理解 Slint「一套 UI、多端部署」的真实落地形态。应用概览一个用于展示 Slint 多端能力的能源监控面板Energy Monitor Demo 是一个模拟家庭能源监控面板的界面程序包含仪表盘、用量统计、余额图表、天气、设置等多个页面并针对不同屏幕尺寸提供响应式布局。从 demos/energy-monitor/ui/desktop_window.slint 的源码可以看到主窗口通过三个断点区分界面形态big-break-point: 1366px桌面大屏mid-break-point: 799px嵌入式中等屏幕mobile-break-point: 444px手机窄屏。配合 theme.slint 与 pages/pages.slint 中定义的OverviewAdapter、UsageAdapter、WeatherAdapter、SettingsAdapter等全局适配器Rust / JavaScript 宿主代码可以在运行时读写 UI 状态。该演示的独特价值在于它同时提供 Rust、Node.js 两种宿主实现且 Rust 版本通过 feature 开关在同一份源码上支持从no_stdMCU 到带网络栈的桌面环境的编译是学习 Slint 多平台工程化的理想样本。实时天气数据Open-Meteo 免费接入与位置配置应用的核心动态数据源是 Open-Meteo 实现Node.js 端由 main.js 平行实现。地理位置环境变量应用通过两个环境变量控制天气查询的地理位置默认值均为柏林Berlin环境变量含义默认值柏林WEATHER_LAT纬度latitude52.520008WEATHER_LONG经度longitude13.404954Rust 源码中的读取顺序见 weather.rs是先尝试编译期环境变量option_env!(WEATHER_LAT)适用于无法访问运行环境变量的 MCU 场景再尝试运行时std::env::var_os桌面等场景最后回退到柏林默认坐标。因此在使用时既可以直接WEATHER_LATxx WEATHER_LONGyy cargo run ...运行也可以在编译阶段注入固定值。请求构造与数据模型天气请求 URL 的构造方式为https://api.open-meteo.com/v1/forecast ?latitude{lat}longitude{long} currenttemperature_2m,weather_code dailytemperature_2m_max,temperature_2m_min,weather_code timezoneautoforecast_days3其中forecast_days3对应源码中const FORECAST_DAYS: usize 33 天预报。响应通过serde反序列化为ForecastResponse结构current携带当前温度与天气代码daily携带每天的最高/最低温度与天气代码数组。WMO 天气代码到界面文案与图标的映射Open-Meteo 返回的是标准 WMO 天气代码应用将其翻译为可读文本见 weather.rs0晴Clear sky、1基本晴Mainly clear、2局部多云Partly cloudy、3阴Overcast45/48雾Fog、51..55毛毛雨Drizzle、61/63/65小雨/中雨/大雨、71..75降雪、80..82阵雨、95..99雷暴其他代码归为Unknown。图标的选择逻辑同样与天气代码绑定weather.rs2显示cloudy3及以上显示cloud其余显示sunny图标资源位于 ui/assetssunny.svg、cloudy.svg、cloud.svg等。后台线程与事件循环安全更新Rust 实现将网络请求放在独立线程中setup使用thread::spawn启动一个线程内部创建tokio::runtime::Runtime并block_on(weather_worker_loop)weather.rs。请求完成后通过window_weak.upgrade_in_event_loop(...)回到 Slint 事件循环线程再调用WeatherAdapter的set_current_temperature、set_current_day、set_current_weather_description、set_week_model等方法更新 UI避免跨线程直接操作 UI 对象。与之配合的还有 src/controllers/header.rs 中的头部时钟一个 300ms 周期的Timer持续刷新HeaderAdapter的日期、时间12 小时制与 AM/PM 后缀。平台兼容性同一套 UI 的五种运行方式桌面Windows / macOS / Linux与嵌入式 Linux在仓库根目录执行cargo run --manifest-path demos/energy-monitor/Cargo.toml默认 feature见 Cargo.toml为[slint/default, network, chrono, slint/backend-android-activity-06]桌面环境下 Slint 会自动选择 winit 等原生后端直接弹出桌面窗口。微控制器MCU与桌面模拟器在 Raspberry Pi Pico 等小设备上运行的方法参考 examples/mcu-board-support 目录下的说明其中包含各开发板的 feature 与烧录命令例如mcu-board-support/pico-st7789配合--target thumbv6m-none-eabi构建后使用elf2uf2-rs烧录。Energy Monitor 的 Rust 入口在启用mcu-board-support时切换为no_std#[mcu_board_support::entry]模式见 src/main.rs。若没有实体开发板可以在桌面模拟器上运行 MCU 版本代码cargo run --manifest-path demos/energy-monitor/Cargo.toml --no-default-features --featuressimulator --releasesimulatorfeature[mcu-board-support, slint/renderer-software, slint/backend-winit, slint/std]使用软件渲染器在桌面窗口内模拟 MCU 的显示环境便于在开发板上调试 UI 与逻辑。Android先完成 Slint 官方文档中 Android 环境的搭建安装 Android SDK/NDK、配置ANDROID_HOME等然后在仓库根目录执行cargo apk run --manifest-path demos/energy-monitor/Cargo.toml --target aarch64-linux-android --lib该命令依赖默认 feature 中的slint/backend-android-activity-06后端源码中 lib.rs 还提供了#[no_mangle] fn android_main(app: slint::android::AndroidApp)入口供 android-activity 框架调用。Node.js进入 demo 目录安装依赖并启动cd demos/energy-monitor pnpm install pnpm startpnpm start会先执行prestart脚本cd ../../api/node/ pnpm run build pnpm compile把 Node 绑定编译好后由 main.js 通过slint.loadFile(new URL(ui/desktop_window.slint, import.meta.url))动态加载 UI 并创建MainWindow。位置同样通过WEATHER_LAT/WEATHER_LONG环境变量设置默认柏林main.js。Node 端还以setInterval(..., 300)实现实时时钟、以setInterval(..., 4000)实现展厅 Kiosk 模式的 4 秒自动翻页。WebWebAssembly先用 cargo 安装 wasm-pack然后构建 WebAssembly 版本cargo install wasm-pack cd demos/energy-monitor/ wasm-pack build --release --target web --no-default-features --features slint/backend-winit,slint/renderer-femtovg,chrono python3 -m http.server构建产物pkg/由 index.html 通过script typemoduleimport init from ./pkg/energy_monitor.js加载随后在浏览器中打开http://localhost:8000即可体验。页面使用renderer-femtovg软件渲染器绘制到canvaschronofeature 提供日期处理。Rust 入口通过#[cfg_attr(target_arch wasm32, wasm_bindgen(start))]标记lib.rs便于浏览器自动调用。iOS该演示支持交叉编译到 iPhone、iPad 及对应模拟器。前置条件一台 macOS 电脑安装最新版 Xcode安装 Xcodegenxcodegen命令行工具安装 Rust并添加目标与模拟器工具链rustup target add aarch64-apple-ios rustup target add aarch64-apple-ios-sim构建步骤在 demo 目录执行xcodegen -s ios-project.yml生成 Xcode 工程.xcodeproj用 Xcode 打开生成的.xcodeproj在 Xcode 中直接运行、部署与调试。工程配置见 demos/energy-monitor/ios-project.yml它声明了bundleIdPrefix: dev.slint.demos、iOS 16.6 的部署目标并在postCompileScripts中调用仓库脚本 scripts/build_for_ios_with_cargo.bash 完成 Cargo 交叉编译。深入源码功能开关与模块组织从 Cargo.toml 可以看出该 demo 的依赖与 feature 设计非常克制是理解 Slint 多后端组合的绝佳样例Feature内容作用defaultslint/default、network、chrono、slint/backend-android-activity-06桌面 / Android 的完整功能形态networkreqwest、serde、tokio启用天气网络请求chronochrono依赖启用日期时间格式化与头部时钟simulatormcu-board-support、slint/renderer-software、slint/backend-winit、slint/stdMCU 代码的桌面模拟运行对应地lib.rs 中controllers模块、header与weather子模块均以#[cfg(feature ...)]条件编译main.rs在启用mcu-board-support时进入no_std裸机入口否则调用energy_monitor::main()。天气模块内部还有一个值得注意的细节在启用mcu-board-support时lat()/long()不再读取运行时环境变量MCU 没有进程环境只能依赖编译期注入或默认柏林坐标weather.rs这体现了不同目标平台对代码实现的隐性约束。UI 侧blocks、widgets、pages 三层目录分别放置可复用块、通用控件与页面组件mcu_window.slint 等窗口组件则对应不同目标尺寸。Kiosk 模式展厅大屏自动轮播的逻辑在 Rust 端由 lib.rs 中的 4 秒Timer实现当SettingsAdapter.kiosk_mode_checked为真时周期性切换MenuOverviewAdapter.current_page到下一页并循环。小结Energy Monitor Demo 的价值不在于界面本身而在于它演示了 Slint 声明式 UI 在工程层面的可移植性一份.slint描述配合 Cargo feature 与各平台后端winit、android-activity、renderer-software、renderer-femtovg、MCU board support即可覆盖从no_std微控制器到桌面、移动端与浏览器的完整目标矩阵Node.js 版本则展示了同一套 UI 文件在 JavaScript 宿主下的复用。若想进一步研究可重点阅读 demos/energy-monitor/src/controllers/weather.rs天气数据管线、demos/energy-monitor/main.jsNode 平行实现以及 examples/mcu-board-supportMCU 后端接入方式并结合本文各平台的命令逐一实操验证。【免费下载链接】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），仅供参考
