{"id":109041,"date":"2026-09-23T08:26:11","date_gmt":"2026-09-23T00:26:11","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/109041.html"},"modified":"2026-09-23T08:26:11","modified_gmt":"2026-09-23T00:26:11","slug":"rustslint-%e5%ae%9e%e7%8e%b0%e6%99%ba%e8%83%bd%e5%ae%b6%e5%b1%85%e6%8e%a7%e5%88%b6%e9%9d%a2%e6%9d%bf%e6%ba%90%e7%a0%81%e5%88%86%e4%ba%ab","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/109041.html","title":{"rendered":"Rust+Slint \u5b9e\u73b0\u667a\u80fd\u5bb6\u5c45\u63a7\u5236\u9762\u677f\u6e90\u7801\u5206\u4eab"},"content":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260923002606-6ab31c9e9fee4.png\" alt=\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\" \/><\/p>\n<\/p>\n<h4>Rust&#043;Slint \u5b9e\u73b0\u667a\u80fd\u5bb6\u5c45\u63a7\u5236\u9762\u677f\u6e90\u7801\u5206\u4eab<\/h4>\n<ul>\n<li>\u4e00\u3001\u6548\u679c\u5c55\u793a<\/li>\n<li>\u4e8c\u3001\u6e90\u7801\u5206\u4eab<\/li>\n<li>\n<ul>\n<li>1\u3001\u5de5\u7a0b\u7ed3\u6784<\/li>\n<li>2\u3001main.rs<\/li>\n<li>3\u3001build.rs<\/li>\n<li>4\u3001main.slint<\/li>\n<li>5\u3001Cargo.toml<\/li>\n<\/ul>\n<\/li>\n<li>\u4e09\u3001\u5b9e\u73b0\u539f\u7406<\/li>\n<li>\n<ul>\n<li>1\u3001\u6574\u4f53\u67b6\u6784<\/li>\n<li>2\u3001\u6570\u636e\u6a21\u578b\u4e0e\u7ed1\u5b9a\u673a\u5236<\/li>\n<li>3\u3001\u56de\u8c03\u673a\u5236\u4e0e\u72b6\u6001\u540c\u6b65<\/li>\n<li>4\u3001\u7ec4\u4ef6\u5316\u8bbe\u8ba1\u4e0e\u56fe\u5f62\u7ed8\u5236<\/li>\n<li>5\u3001\u52a8\u753b\u4e0e\u4ea4\u4e92\u53cd\u9988<\/li>\n<li>6\u3001\u6784\u5efa\u6d41\u7a0b<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>\u4e00\u3001\u6548\u679c\u5c55\u793a<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260923002609-6ab31ca168284.png\" alt=\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\" \/> <img decoding=\"async\" src=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260923002609-6ab31ca1a2b8c.png\" alt=\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\" \/><img decoding=\"async\" src=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260923002609-6ab31ca1dd3ea.png\" alt=\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\" \/><\/p>\n<h2>\u4e8c\u3001\u6e90\u7801\u5206\u4eab<\/h2>\n<h3>1\u3001\u5de5\u7a0b\u7ed3\u6784<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260923002610-6ab31ca223d04.png\" alt=\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\" \/><\/p>\n<h3>2\u3001main.rs<\/h3>\n<p><span class=\"token keyword\">use<\/span> <span class=\"token namespace\">std<span class=\"token punctuation\">::<\/span>cell<span class=\"token punctuation\">::<\/span><\/span><span class=\"token class-name\">Cell<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token keyword\">use<\/span> <span class=\"token namespace\">std<span class=\"token punctuation\">::<\/span>rc<span class=\"token punctuation\">::<\/span><\/span><span class=\"token class-name\">Rc<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token keyword\">use<\/span> <span class=\"token namespace\">slint<span class=\"token punctuation\">::<\/span><\/span><span class=\"token punctuation\">{<\/span><span class=\"token class-name\">Model<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token class-name\">ModelRc<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token class-name\">SharedString<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token class-name\">VecModel<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token class-name\">Timer<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token namespace\">slint<span class=\"token punctuation\">::<\/span><\/span><span class=\"token macro property\">include_modules!<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token keyword\">fn<\/span> <span class=\"token function-definition function\">main<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">-&gt;<\/span> <span class=\"token class-name\">Result<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token namespace\">slint<span class=\"token punctuation\">::<\/span><\/span><span class=\"token class-name\">PlatformError<\/span><span class=\"token operator\">&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">let<\/span> ui <span class=\"token operator\">&#061;<\/span> <span class=\"token class-name\">SmartHomeWindow<\/span><span class=\"token punctuation\">::<\/span><span class=\"token function\">new<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">?<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u2500\u2500 \u521d\u59cb\u5316 6 \u76cf\u706f \u2500\u2500<\/span><br \/>\n    <span class=\"token keyword\">let<\/span> rooms<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Vec<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">&amp;<\/span><span class=\"token keyword\">str<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">i32<\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">&gt;<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token macro property\">vec!<\/span><span class=\"token punctuation\">[<\/span><br \/>\n        <span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;\u5ba2\u5385&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;\u5367\u5ba4&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;\u53a8\u623f&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;\u536b\u751f\u95f4&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">3<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;\u4e66\u623f&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">4<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;\u9633\u53f0&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">5<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    <span class=\"token keyword\">let<\/span> lights<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Vec<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token class-name\">LightData<\/span><span class=\"token operator\">&gt;<\/span> <span class=\"token operator\">&#061;<\/span> rooms<br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">iter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">enumerate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token closure-params\"><span class=\"token closure-punctuation punctuation\">|<\/span><span class=\"token punctuation\">(<\/span>i<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span>name<span class=\"token punctuation\">,<\/span> icon_type<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token closure-punctuation punctuation\">|<\/span><\/span> <span class=\"token class-name\">LightData<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            id<span class=\"token punctuation\">:<\/span> i <span class=\"token keyword\">as<\/span> <span class=\"token keyword\">i32<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            name<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">SharedString<\/span><span class=\"token punctuation\">::<\/span><span class=\"token function\">from<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">*<\/span>name<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            icon_type<span class=\"token punctuation\">:<\/span> <span class=\"token operator\">*<\/span>icon_type<span class=\"token punctuation\">,<\/span><br \/>\n            is_on<span class=\"token punctuation\">:<\/span> i <span class=\"token operator\">&lt;<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            brightness<span class=\"token punctuation\">:<\/span> <span class=\"token keyword\">if<\/span> i <span class=\"token operator\">&#061;&#061;<\/span> <span class=\"token number\">0<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token number\">80<\/span> <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token keyword\">if<\/span> i <span class=\"token operator\">&#061;&#061;<\/span> <span class=\"token number\">1<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token number\">60<\/span> <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token number\">0<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">collect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    <span class=\"token keyword\">let<\/span> lights_model <span class=\"token operator\">&#061;<\/span> <span class=\"token class-name\">Rc<\/span><span class=\"token punctuation\">::<\/span><span class=\"token function\">new<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">VecModel<\/span><span class=\"token punctuation\">::<\/span><span class=\"token function\">from<\/span><span class=\"token punctuation\">(<\/span>lights<span class=\"token punctuation\">.<\/span><span class=\"token function\">clone<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    ui<span class=\"token punctuation\">.<\/span><span class=\"token function\">set_lights<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">ModelRc<\/span><span class=\"token punctuation\">::<\/span><span class=\"token function\">from<\/span><span class=\"token punctuation\">(<\/span>lights_model<span class=\"token punctuation\">.<\/span><span class=\"token function\">clone<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u2500\u2500 \u521d\u59cb\u5316 7 \u5929\u6e29\u5ea6 \u2500\u2500<\/span><br \/>\n    <span class=\"token keyword\">let<\/span> days<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Vec<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">&amp;<\/span><span class=\"token keyword\">str<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">i32<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">i32<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">i32<\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">&gt;<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token macro property\">vec!<\/span><span class=\"token punctuation\">[<\/span><br \/>\n        <span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;\u5468\u4e00&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">32<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">24<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;\u5468\u4e8c&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">30<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">23<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;\u5468\u4e09&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">28<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">22<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;\u5468\u56db&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">31<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">25<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;\u5468\u4e94&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">33<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">26<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;\u5468\u516d&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">29<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">21<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;\u5468\u65e5&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">27<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">20<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    <span class=\"token keyword\">let<\/span> temps<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Vec<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token class-name\">DayTemp<\/span><span class=\"token operator\">&gt;<\/span> <span class=\"token operator\">&#061;<\/span> days<br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">iter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token closure-params\"><span class=\"token closure-punctuation punctuation\">|<\/span><span class=\"token punctuation\">(<\/span>name<span class=\"token punctuation\">,<\/span> high<span class=\"token punctuation\">,<\/span> low<span class=\"token punctuation\">,<\/span> wtype<span class=\"token punctuation\">)<\/span><span class=\"token closure-punctuation punctuation\">|<\/span><\/span> <span class=\"token class-name\">DayTemp<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            day_name<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">SharedString<\/span><span class=\"token punctuation\">::<\/span><span class=\"token function\">from<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">*<\/span>name<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            temp_high<span class=\"token punctuation\">:<\/span> <span class=\"token operator\">*<\/span>high<span class=\"token punctuation\">,<\/span><br \/>\n            temp_low<span class=\"token punctuation\">:<\/span> <span class=\"token operator\">*<\/span>low<span class=\"token punctuation\">,<\/span><br \/>\n            weather_type<span class=\"token punctuation\">:<\/span> <span class=\"token operator\">*<\/span>wtype<span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">collect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    ui<span class=\"token punctuation\">.<\/span><span class=\"token function\">set_temperatures<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">ModelRc<\/span><span class=\"token punctuation\">::<\/span><span class=\"token function\">new<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">VecModel<\/span><span class=\"token punctuation\">::<\/span><span class=\"token function\">from<\/span><span class=\"token punctuation\">(<\/span>temps<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    ui<span class=\"token punctuation\">.<\/span><span class=\"token function\">set_temp_max<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">33<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    ui<span class=\"token punctuation\">.<\/span><span class=\"token function\">set_temp_min<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">20<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u2500\u2500 \u9ed8\u8ba4\u9009\u4e2d\u7b2c\u4e00\u76cf\u706f \u2500\u2500<\/span><br \/>\n    ui<span class=\"token punctuation\">.<\/span><span class=\"token function\">set_selected_light_id<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    ui<span class=\"token punctuation\">.<\/span><span class=\"token function\">set_slider_brightness<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">80<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u2500\u2500 \u5ba0\u7269\u521d\u59cb\u72b6\u6001 \u2500\u2500<\/span><br \/>\n    ui<span class=\"token punctuation\">.<\/span><span class=\"token function\">set_pet_state<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">PetState<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        is_speaking<span class=\"token punctuation\">:<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        speech_text<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">SharedString<\/span><span class=\"token punctuation\">::<\/span><span class=\"token function\">from<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;&#034;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        is_blinking<span class=\"token punctuation\">:<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u2500\u2500 \u7528 Cell \u5305\u88c5\u53ef\u53d8\u72b6\u6001 \u2500\u2500<\/span><br \/>\n    <span class=\"token keyword\">let<\/span> lights_vec <span class=\"token operator\">&#061;<\/span> <span class=\"token class-name\">Rc<\/span><span class=\"token punctuation\">::<\/span><span class=\"token function\">new<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">Cell<\/span><span class=\"token punctuation\">::<\/span><span class=\"token function\">new<\/span><span class=\"token punctuation\">(<\/span>lights<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u2500\u2500 \u56de\u8c03&#xff1a;\u5207\u6362\u706f\u5f00\u5173 \u2500\u2500<\/span><br \/>\n    <span class=\"token keyword\">let<\/span> lights_ref <span class=\"token operator\">&#061;<\/span> lights_vec<span class=\"token punctuation\">.<\/span><span class=\"token function\">clone<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">let<\/span> lights_model_ref <span class=\"token operator\">&#061;<\/span> lights_model<span class=\"token punctuation\">.<\/span><span class=\"token function\">clone<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    ui<span class=\"token punctuation\">.<\/span><span class=\"token function\">on_toggle_light<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">move<\/span> <span class=\"token closure-params\"><span class=\"token closure-punctuation punctuation\">|<\/span>id<span class=\"token closure-punctuation punctuation\">|<\/span><\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">let<\/span> <span class=\"token keyword\">mut<\/span> current<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Vec<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token class-name\">LightData<\/span><span class=\"token operator\">&gt;<\/span> <span class=\"token operator\">&#061;<\/span> lights_ref<span class=\"token punctuation\">.<\/span><span class=\"token function\">take<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">let<\/span> idx <span class=\"token operator\">&#061;<\/span> id <span class=\"token keyword\">as<\/span> <span class=\"token keyword\">usize<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        current<span class=\"token punctuation\">[<\/span>idx<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>is_on <span class=\"token operator\">&#061;<\/span> <span class=\"token operator\">!<\/span>current<span class=\"token punctuation\">[<\/span>idx<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>is_on<span class=\"token punctuation\">;<\/span><br \/>\n        lights_model_ref<span class=\"token punctuation\">.<\/span><span class=\"token function\">set_row_data<\/span><span class=\"token punctuation\">(<\/span>idx<span class=\"token punctuation\">,<\/span> current<span class=\"token punctuation\">[<\/span>idx<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">clone<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        lights_ref<span class=\"token punctuation\">.<\/span><span class=\"token function\">set<\/span><span class=\"token punctuation\">(<\/span>current<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u2500\u2500 \u56de\u8c03&#xff1a;\u9009\u4e2d\u706f&#xff08;\u7528\u4e8e\u8c03\u5149&#xff09; \u2500\u2500<\/span><br \/>\n    <span class=\"token keyword\">let<\/span> ui_weak <span class=\"token operator\">&#061;<\/span> ui<span class=\"token punctuation\">.<\/span><span class=\"token function\">as_weak<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">let<\/span> lights_ref <span class=\"token operator\">&#061;<\/span> lights_vec<span class=\"token punctuation\">.<\/span><span class=\"token function\">clone<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    ui<span class=\"token punctuation\">.<\/span><span class=\"token function\">on_select_light<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">move<\/span> <span class=\"token closure-params\"><span class=\"token closure-punctuation punctuation\">|<\/span>id<span class=\"token closure-punctuation punctuation\">|<\/span><\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">let<\/span> current<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Vec<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token class-name\">LightData<\/span><span class=\"token operator\">&gt;<\/span> <span class=\"token operator\">&#061;<\/span> lights_ref<span class=\"token punctuation\">.<\/span><span class=\"token function\">take<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        lights_ref<span class=\"token punctuation\">.<\/span><span class=\"token function\">set<\/span><span class=\"token punctuation\">(<\/span>current<span class=\"token punctuation\">.<\/span><span class=\"token function\">clone<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token keyword\">let<\/span> <span class=\"token class-name\">Some<\/span><span class=\"token punctuation\">(<\/span>ui<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;<\/span> ui_weak<span class=\"token punctuation\">.<\/span><span class=\"token function\">upgrade<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            ui<span class=\"token punctuation\">.<\/span><span class=\"token function\">set_selected_light_id<\/span><span class=\"token punctuation\">(<\/span>id<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            ui<span class=\"token punctuation\">.<\/span><span class=\"token function\">set_slider_brightness<\/span><span class=\"token punctuation\">(<\/span>current<span class=\"token punctuation\">[<\/span>id <span class=\"token keyword\">as<\/span> <span class=\"token keyword\">usize<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>brightness<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u2500\u2500 \u56de\u8c03&#xff1a;\u8bbe\u7f6e\u4eae\u5ea6 \u2500\u2500<\/span><br \/>\n    <span class=\"token keyword\">let<\/span> lights_ref <span class=\"token operator\">&#061;<\/span> lights_vec<span class=\"token punctuation\">.<\/span><span class=\"token function\">clone<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">let<\/span> lights_model_ref <span class=\"token operator\">&#061;<\/span> lights_model<span class=\"token punctuation\">.<\/span><span class=\"token function\">clone<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    ui<span class=\"token punctuation\">.<\/span><span class=\"token function\">on_set_brightness<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">move<\/span> <span class=\"token closure-params\"><span class=\"token closure-punctuation punctuation\">|<\/span>id<span class=\"token punctuation\">,<\/span> brightness<span class=\"token closure-punctuation punctuation\">|<\/span><\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">let<\/span> <span class=\"token keyword\">mut<\/span> current<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Vec<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token class-name\">LightData<\/span><span class=\"token operator\">&gt;<\/span> <span class=\"token operator\">&#061;<\/span> lights_ref<span class=\"token punctuation\">.<\/span><span class=\"token function\">take<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">let<\/span> idx <span class=\"token operator\">&#061;<\/span> id <span class=\"token keyword\">as<\/span> <span class=\"token keyword\">usize<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        current<span class=\"token punctuation\">[<\/span>idx<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>brightness <span class=\"token operator\">&#061;<\/span> brightness<span class=\"token punctuation\">;<\/span><br \/>\n        lights_model_ref<span class=\"token punctuation\">.<\/span><span class=\"token function\">set_row_data<\/span><span class=\"token punctuation\">(<\/span>idx<span class=\"token punctuation\">,<\/span> current<span class=\"token punctuation\">[<\/span>idx<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">clone<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        lights_ref<span class=\"token punctuation\">.<\/span><span class=\"token function\">set<\/span><span class=\"token punctuation\">(<\/span>current<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u2500\u2500 \u56de\u8c03&#xff1a;\u70b9\u51fb\u5ba0\u7269 \u2500\u2500<\/span><br \/>\n    <span class=\"token keyword\">let<\/span> ui_weak <span class=\"token operator\">&#061;<\/span> ui<span class=\"token punctuation\">.<\/span><span class=\"token function\">as_weak<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">let<\/span> speak_index <span class=\"token operator\">&#061;<\/span> <span class=\"token class-name\">Rc<\/span><span class=\"token punctuation\">::<\/span><span class=\"token function\">new<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">Cell<\/span><span class=\"token punctuation\">::<\/span><span class=\"token function\">new<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0usize<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">let<\/span> phrases<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Vec<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">&amp;<\/span><span class=\"token keyword\">str<\/span><span class=\"token operator\">&gt;<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token macro property\">vec!<\/span><span class=\"token punctuation\">[<\/span><br \/>\n        <span class=\"token string\">&#034;\u4f60\u597d&#xff01;\u6b22\u8fce\u56de\u5bb6&#034;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token string\">&#034;\u4eca\u5929\u5929\u6c14\u4e0d\u9519\u54e6&#034;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token string\">&#034;\u5ba2\u5385\u706f\u5df2\u6253\u5f00&#034;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token string\">&#034;\u6e29\u5ea6\u9002\u5b9c&#xff0c;\u9002\u5408\u4f11\u606f&#034;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token string\">&#034;\u6240\u6709\u8bbe\u5907\u8fd0\u884c\u6b63\u5e38&#034;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token string\">&#034;\u665a\u5b89&#xff0c;\u597d\u68a6&#034;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    ui<span class=\"token punctuation\">.<\/span><span class=\"token function\">on_click_pet<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">move<\/span> <span class=\"token closure-params\"><span class=\"token closure-punctuation punctuation\">|<\/span><span class=\"token closure-punctuation punctuation\">|<\/span><\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token keyword\">let<\/span> <span class=\"token class-name\">Some<\/span><span class=\"token punctuation\">(<\/span>ui<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;<\/span> ui_weak<span class=\"token punctuation\">.<\/span><span class=\"token function\">upgrade<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">let<\/span> idx <span class=\"token operator\">&#061;<\/span> speak_index<span class=\"token punctuation\">.<\/span><span class=\"token function\">get<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">let<\/span> phrase <span class=\"token operator\">&#061;<\/span> phrases<span class=\"token punctuation\">[<\/span>idx <span class=\"token operator\">%<\/span> phrases<span class=\"token punctuation\">.<\/span><span class=\"token function\">len<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            speak_index<span class=\"token punctuation\">.<\/span><span class=\"token function\">set<\/span><span class=\"token punctuation\">(<\/span>idx <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>            ui<span class=\"token punctuation\">.<\/span><span class=\"token function\">set_pet_state<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">PetState<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                is_speaking<span class=\"token punctuation\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                speech_text<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">SharedString<\/span><span class=\"token punctuation\">::<\/span><span class=\"token function\">from<\/span><span class=\"token punctuation\">(<\/span>phrase<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                is_blinking<span class=\"token punctuation\">:<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>            <span class=\"token keyword\">let<\/span> ui_weak2 <span class=\"token operator\">&#061;<\/span> ui<span class=\"token punctuation\">.<\/span><span class=\"token function\">as_weak<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token class-name\">Timer<\/span><span class=\"token punctuation\">::<\/span><span class=\"token function\">single_shot<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                <span class=\"token namespace\">std<span class=\"token punctuation\">::<\/span>time<span class=\"token punctuation\">::<\/span><\/span><span class=\"token class-name\">Duration<\/span><span class=\"token punctuation\">::<\/span><span class=\"token function\">from_millis<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">5000<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                <span class=\"token keyword\">move<\/span> <span class=\"token closure-params\"><span class=\"token closure-punctuation punctuation\">|<\/span><span class=\"token closure-punctuation punctuation\">|<\/span><\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                    <span class=\"token keyword\">if<\/span> <span class=\"token keyword\">let<\/span> <span class=\"token class-name\">Some<\/span><span class=\"token punctuation\">(<\/span>ui<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;<\/span> ui_weak2<span class=\"token punctuation\">.<\/span><span class=\"token function\">upgrade<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                        ui<span class=\"token punctuation\">.<\/span><span class=\"token function\">set_pet_state<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">PetState<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                            is_speaking<span class=\"token punctuation\">:<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                            speech_text<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">SharedString<\/span><span class=\"token punctuation\">::<\/span><span class=\"token function\">from<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;&#034;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                            is_blinking<span class=\"token punctuation\">:<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                    <span class=\"token punctuation\">}<\/span><br \/>\n                <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    ui<span class=\"token punctuation\">.<\/span><span class=\"token function\">run<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h3>3\u3001build.rs<\/h3>\n<p><span class=\"token keyword\">fn<\/span> <span class=\"token function-definition function\">main<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token namespace\">slint_build<span class=\"token punctuation\">::<\/span><\/span><span class=\"token function\">compile<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;ui\/main.slint&#034;<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">unwrap<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h3>4\u3001main.slint<\/h3>\n<p><span class=\"token comment\">\/\/ \u2500\u2500 \u6570\u636e\u7ed3\u6784 \u2500\u2500<\/span><br \/>\nexport <span class=\"token keyword\">struct<\/span> <span class=\"token type-definition class-name\">LightData<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  id<span class=\"token punctuation\">:<\/span> int<span class=\"token punctuation\">,<\/span><br \/>\n  name<span class=\"token punctuation\">:<\/span> string<span class=\"token punctuation\">,<\/span><br \/>\n  icon<span class=\"token operator\">&#8211;<\/span><span class=\"token keyword\">type<\/span><span class=\"token punctuation\">:<\/span> int<span class=\"token punctuation\">,<\/span>  <span class=\"token comment\">\/\/ 0&#061;\u6c99\u53d1 1&#061;\u5e8a 2&#061;\u53a8\u623f 3&#061;\u6d74 4&#061;\u4e66 5&#061;\u8349<\/span><br \/>\n  is<span class=\"token operator\">&#8211;<\/span>on<span class=\"token punctuation\">:<\/span> <span class=\"token keyword\">bool<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  brightness<span class=\"token punctuation\">:<\/span> int<span class=\"token punctuation\">,<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p>export <span class=\"token keyword\">struct<\/span> <span class=\"token type-definition class-name\">DayTemp<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  day<span class=\"token operator\">&#8211;<\/span>name<span class=\"token punctuation\">:<\/span> string<span class=\"token punctuation\">,<\/span><br \/>\n  temp<span class=\"token operator\">&#8211;<\/span>high<span class=\"token punctuation\">:<\/span> int<span class=\"token punctuation\">,<\/span><br \/>\n  temp<span class=\"token operator\">&#8211;<\/span>low<span class=\"token punctuation\">:<\/span> int<span class=\"token punctuation\">,<\/span><br \/>\n  weather<span class=\"token operator\">&#8211;<\/span><span class=\"token keyword\">type<\/span><span class=\"token punctuation\">:<\/span> int<span class=\"token punctuation\">,<\/span>  <span class=\"token comment\">\/\/ 0&#061;\u6674 1&#061;\u591a\u4e91 2&#061;\u96e8<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p>export <span class=\"token keyword\">struct<\/span> <span class=\"token type-definition class-name\">PetState<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  is<span class=\"token operator\">&#8211;<\/span>speaking<span class=\"token punctuation\">:<\/span> <span class=\"token keyword\">bool<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  speech<span class=\"token operator\">&#8211;<\/span>text<span class=\"token punctuation\">:<\/span> string<span class=\"token punctuation\">,<\/span><br \/>\n  is<span class=\"token operator\">&#8211;<\/span>blinking<span class=\"token punctuation\">:<\/span> <span class=\"token keyword\">bool<\/span><span class=\"token punctuation\">,<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u2500\u2500 \u5c0f\u7ec4\u4ef6 \u2500\u2500<\/span><\/p>\n<p>component <span class=\"token class-name\">ToggleSwitch<\/span> inherits <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token keyword\">in<\/span><span class=\"token operator\">&#8211;<\/span>out property <span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">bool<\/span><span class=\"token operator\">&gt;<\/span> is<span class=\"token operator\">&#8211;<\/span>on<span class=\"token punctuation\">:<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  callback <span class=\"token function\">toggled<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  width<span class=\"token punctuation\">:<\/span> 32px<span class=\"token punctuation\">;<\/span> height<span class=\"token punctuation\">:<\/span> 18px<span class=\"token punctuation\">;<\/span> border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> 9px<span class=\"token punctuation\">;<\/span><br \/>\n  background<span class=\"token punctuation\">:<\/span> is<span class=\"token operator\">&#8211;<\/span>on <span class=\"token operator\">?<\/span> #ff9f43 <span class=\"token punctuation\">:<\/span> #2a2f45<span class=\"token punctuation\">;<\/span><br \/>\n  border<span class=\"token operator\">&#8211;<\/span>width<span class=\"token punctuation\">:<\/span> 1px<span class=\"token punctuation\">;<\/span><br \/>\n  border<span class=\"token operator\">&#8211;<\/span>color<span class=\"token punctuation\">:<\/span> is<span class=\"token operator\">&#8211;<\/span>on <span class=\"token operator\">?<\/span> #ffb347 <span class=\"token punctuation\">:<\/span> #3a3f55<span class=\"token punctuation\">;<\/span><br \/>\n  animate background <span class=\"token punctuation\">{<\/span> duration<span class=\"token punctuation\">:<\/span> 200ms<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n  <span class=\"token class-name\">TouchArea<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      mouse<span class=\"token operator\">&#8211;<\/span>cursor<span class=\"token punctuation\">:<\/span> pointer<span class=\"token punctuation\">;<\/span><br \/>\n      clicked <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span> is<span class=\"token operator\">&#8211;<\/span>on <span class=\"token operator\">&#061;<\/span> <span class=\"token operator\">!<\/span>is<span class=\"token operator\">&#8211;<\/span>on<span class=\"token punctuation\">;<\/span> root<span class=\"token punctuation\">.<\/span><span class=\"token function\">toggled<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><br \/>\n  <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      y<span class=\"token punctuation\">:<\/span> 2px<span class=\"token punctuation\">;<\/span><br \/>\n      x<span class=\"token punctuation\">:<\/span> is<span class=\"token operator\">&#8211;<\/span>on <span class=\"token operator\">?<\/span> parent<span class=\"token punctuation\">.<\/span>width <span class=\"token operator\">&#8211;<\/span> 16px <span class=\"token punctuation\">:<\/span> 2px<span class=\"token punctuation\">;<\/span><br \/>\n      width<span class=\"token punctuation\">:<\/span> 14px<span class=\"token punctuation\">;<\/span> height<span class=\"token punctuation\">:<\/span> 14px<span class=\"token punctuation\">;<\/span> border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> 7px<span class=\"token punctuation\">;<\/span><br \/>\n      background<span class=\"token punctuation\">:<\/span> white<span class=\"token punctuation\">;<\/span><br \/>\n      animate x <span class=\"token punctuation\">{<\/span> duration<span class=\"token punctuation\">:<\/span> 200ms<span class=\"token punctuation\">;<\/span> easing<span class=\"token punctuation\">:<\/span> ease<span class=\"token operator\">&#8211;<\/span><span class=\"token keyword\">in<\/span><span class=\"token operator\">&#8211;<\/span>out<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u2500\u2500 \u623f\u95f4\u56fe\u6807&#xff08;\u56fe\u5f62\u7ed8\u5236&#xff09;\u2500\u2500<\/span><br \/>\n<span class=\"token comment\">\/\/ 0&#061;\u6c99\u53d1 1&#061;\u5e8a 2&#061;\u53a8\u623f 3&#061;\u6d74 4&#061;\u4e66 5&#061;\u8349<\/span><br \/>\ncomponent <span class=\"token class-name\">RoomIcon<\/span> inherits <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token keyword\">in<\/span> property <span class=\"token operator\">&lt;<\/span>int<span class=\"token operator\">&gt;<\/span> room<span class=\"token operator\">&#8211;<\/span><span class=\"token keyword\">type<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token keyword\">in<\/span> property <span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">bool<\/span><span class=\"token operator\">&gt;<\/span> active<span class=\"token punctuation\">:<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  width<span class=\"token punctuation\">:<\/span> 20px<span class=\"token punctuation\">;<\/span> height<span class=\"token punctuation\">:<\/span> 20px<span class=\"token punctuation\">;<\/span><\/p>\n<p>  <span class=\"token comment\">\/\/ 0: \u6c99\u53d1<\/span><br \/>\n  <span class=\"token keyword\">if<\/span> room<span class=\"token operator\">&#8211;<\/span><span class=\"token keyword\">type<\/span> <span class=\"token operator\">&#061;&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      width<span class=\"token punctuation\">:<\/span> 18px<span class=\"token punctuation\">;<\/span> height<span class=\"token punctuation\">:<\/span> 10px<span class=\"token punctuation\">;<\/span> border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> 3px<span class=\"token punctuation\">;<\/span><br \/>\n      x<span class=\"token punctuation\">:<\/span> 1px<span class=\"token punctuation\">;<\/span> y<span class=\"token punctuation\">:<\/span> 5px<span class=\"token punctuation\">;<\/span><br \/>\n      background<span class=\"token punctuation\">:<\/span> active <span class=\"token operator\">?<\/span> #ff9f43 <span class=\"token punctuation\">:<\/span> #6b7a99<span class=\"token punctuation\">;<\/span><br \/>\n      <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span> width<span class=\"token punctuation\">:<\/span> 5px<span class=\"token punctuation\">;<\/span> height<span class=\"token punctuation\">:<\/span> 12px<span class=\"token punctuation\">;<\/span> border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> 2px<span class=\"token punctuation\">;<\/span> x<span class=\"token punctuation\">:<\/span> <span class=\"token operator\">&#8211;<\/span>1px<span class=\"token punctuation\">;<\/span> y<span class=\"token punctuation\">:<\/span> <span class=\"token operator\">&#8211;<\/span>2px<span class=\"token punctuation\">;<\/span> background<span class=\"token punctuation\">:<\/span> active <span class=\"token operator\">?<\/span> #ff9f43cc <span class=\"token punctuation\">:<\/span> #6b7a99cc<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n      <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span> width<span class=\"token punctuation\">:<\/span> 5px<span class=\"token punctuation\">;<\/span> height<span class=\"token punctuation\">:<\/span> 12px<span class=\"token punctuation\">;<\/span> border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> 2px<span class=\"token punctuation\">;<\/span> x<span class=\"token punctuation\">:<\/span> 14px<span class=\"token punctuation\">;<\/span> y<span class=\"token punctuation\">:<\/span> <span class=\"token operator\">&#8211;<\/span>2px<span class=\"token punctuation\">;<\/span> background<span class=\"token punctuation\">:<\/span> active <span class=\"token operator\">?<\/span> #ff9f43cc <span class=\"token punctuation\">:<\/span> #6b7a99cc<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><br \/>\n  <span class=\"token comment\">\/\/ 1: \u5e8a<\/span><br \/>\n  <span class=\"token keyword\">if<\/span> room<span class=\"token operator\">&#8211;<\/span><span class=\"token keyword\">type<\/span> <span class=\"token operator\">&#061;&#061;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      width<span class=\"token punctuation\">:<\/span> 18px<span class=\"token punctuation\">;<\/span> height<span class=\"token punctuation\">:<\/span> 12px<span class=\"token punctuation\">;<\/span> border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> 2px<span class=\"token punctuation\">;<\/span><br \/>\n      x<span class=\"token punctuation\">:<\/span> 1px<span class=\"token punctuation\">;<\/span> y<span class=\"token punctuation\">:<\/span> 4px<span class=\"token punctuation\">;<\/span><br \/>\n      background<span class=\"token punctuation\">:<\/span> active <span class=\"token operator\">?<\/span> #ff9f43 <span class=\"token punctuation\">:<\/span> #6b7a99<span class=\"token punctuation\">;<\/span><br \/>\n      <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span> width<span class=\"token punctuation\">:<\/span> 7px<span class=\"token punctuation\">;<\/span> height<span class=\"token punctuation\">:<\/span> 6px<span class=\"token punctuation\">;<\/span> border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> 2px<span class=\"token punctuation\">;<\/span> x<span class=\"token punctuation\">:<\/span> 1px<span class=\"token punctuation\">;<\/span> y<span class=\"token punctuation\">:<\/span> <span class=\"token operator\">&#8211;<\/span>3px<span class=\"token punctuation\">;<\/span> background<span class=\"token punctuation\">:<\/span> active <span class=\"token operator\">?<\/span> #ffb347 <span class=\"token punctuation\">:<\/span> #8892a8<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><br \/>\n  <span class=\"token comment\">\/\/ 2: \u53a8\u623f&#xff08;\u9505&#xff09;<\/span><br \/>\n  <span class=\"token keyword\">if<\/span> room<span class=\"token operator\">&#8211;<\/span><span class=\"token keyword\">type<\/span> <span class=\"token operator\">&#061;&#061;<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      width<span class=\"token punctuation\">:<\/span> 14px<span class=\"token punctuation\">;<\/span> height<span class=\"token punctuation\">:<\/span> 10px<span class=\"token punctuation\">;<\/span> border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> 5px<span class=\"token punctuation\">;<\/span><br \/>\n      x<span class=\"token punctuation\">:<\/span> 3px<span class=\"token punctuation\">;<\/span> y<span class=\"token punctuation\">:<\/span> 6px<span class=\"token punctuation\">;<\/span><br \/>\n      background<span class=\"token punctuation\">:<\/span> active <span class=\"token operator\">?<\/span> #ff9f43 <span class=\"token punctuation\">:<\/span> #6b7a99<span class=\"token punctuation\">;<\/span><br \/>\n      <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span> width<span class=\"token punctuation\">:<\/span> 6px<span class=\"token punctuation\">;<\/span> height<span class=\"token punctuation\">:<\/span> 2px<span class=\"token punctuation\">;<\/span> x<span class=\"token punctuation\">:<\/span> <span class=\"token operator\">&#8211;<\/span>3px<span class=\"token punctuation\">;<\/span> y<span class=\"token punctuation\">:<\/span> 3px<span class=\"token punctuation\">;<\/span> background<span class=\"token punctuation\">:<\/span> active <span class=\"token operator\">?<\/span> #ff9f43 <span class=\"token punctuation\">:<\/span> #6b7a99<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><br \/>\n  <span class=\"token comment\">\/\/ 3: \u6d74&#xff08;\u6c34\u6ef4&#xff09;<\/span><br \/>\n  <span class=\"token keyword\">if<\/span> room<span class=\"token operator\">&#8211;<\/span><span class=\"token keyword\">type<\/span> <span class=\"token operator\">&#061;&#061;<\/span> <span class=\"token number\">3<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      width<span class=\"token punctuation\">:<\/span> 10px<span class=\"token punctuation\">;<\/span> height<span class=\"token punctuation\">:<\/span> 14px<span class=\"token punctuation\">;<\/span> border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> 5px<span class=\"token punctuation\">;<\/span><br \/>\n      x<span class=\"token punctuation\">:<\/span> 5px<span class=\"token punctuation\">;<\/span> y<span class=\"token punctuation\">:<\/span> 3px<span class=\"token punctuation\">;<\/span><br \/>\n      background<span class=\"token punctuation\">:<\/span> active <span class=\"token operator\">?<\/span> #4ecdc4 <span class=\"token punctuation\">:<\/span> #6b7a99<span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><br \/>\n  <span class=\"token comment\">\/\/ 4: \u4e66<\/span><br \/>\n  <span class=\"token keyword\">if<\/span> room<span class=\"token operator\">&#8211;<\/span><span class=\"token keyword\">type<\/span> <span class=\"token operator\">&#061;&#061;<\/span> <span class=\"token number\">4<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      width<span class=\"token punctuation\">:<\/span> 14px<span class=\"token punctuation\">;<\/span> height<span class=\"token punctuation\">:<\/span> 16px<span class=\"token punctuation\">;<\/span> border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> 1px<span class=\"token punctuation\">;<\/span><br \/>\n      x<span class=\"token punctuation\">:<\/span> 3px<span class=\"token punctuation\">;<\/span> y<span class=\"token punctuation\">:<\/span> 2px<span class=\"token punctuation\">;<\/span><br \/>\n      background<span class=\"token punctuation\">:<\/span> active <span class=\"token operator\">?<\/span> #ff9f43 <span class=\"token punctuation\">:<\/span> #6b7a99<span class=\"token punctuation\">;<\/span><br \/>\n      <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span> width<span class=\"token punctuation\">:<\/span> 1px<span class=\"token punctuation\">;<\/span> height<span class=\"token punctuation\">:<\/span> 12px<span class=\"token punctuation\">;<\/span> x<span class=\"token punctuation\">:<\/span> 3px<span class=\"token punctuation\">;<\/span> y<span class=\"token punctuation\">:<\/span> 2px<span class=\"token punctuation\">;<\/span> background<span class=\"token punctuation\">:<\/span> active <span class=\"token operator\">?<\/span> #1a2040 <span class=\"token punctuation\">:<\/span> #<span class=\"token number\">0e1225<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><br \/>\n  <span class=\"token comment\">\/\/ 5: \u8349&#xff08;\u53f6\u5b50&#xff09;<\/span><br \/>\n  <span class=\"token keyword\">if<\/span> room<span class=\"token operator\">&#8211;<\/span><span class=\"token keyword\">type<\/span> <span class=\"token operator\">&#061;&#061;<\/span> <span class=\"token number\">5<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      width<span class=\"token punctuation\">:<\/span> 12px<span class=\"token punctuation\">;<\/span> height<span class=\"token punctuation\">:<\/span> 12px<span class=\"token punctuation\">;<\/span> border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> 6px<span class=\"token punctuation\">;<\/span><br \/>\n      x<span class=\"token punctuation\">:<\/span> 4px<span class=\"token punctuation\">;<\/span> y<span class=\"token punctuation\">:<\/span> 2px<span class=\"token punctuation\">;<\/span><br \/>\n      background<span class=\"token punctuation\">:<\/span> active <span class=\"token operator\">?<\/span> #4ecdc4 <span class=\"token punctuation\">:<\/span> #6b7a99<span class=\"token punctuation\">;<\/span><br \/>\n      <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span> width<span class=\"token punctuation\">:<\/span> 2px<span class=\"token punctuation\">;<\/span> height<span class=\"token punctuation\">:<\/span> 8px<span class=\"token punctuation\">;<\/span> x<span class=\"token punctuation\">:<\/span> 5px<span class=\"token punctuation\">;<\/span> y<span class=\"token punctuation\">:<\/span> 8px<span class=\"token punctuation\">;<\/span> background<span class=\"token punctuation\">:<\/span> active <span class=\"token operator\">?<\/span> #4ecdc4cc <span class=\"token punctuation\">:<\/span> #6b7a99cc<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u2500\u2500 \u5929\u6c14\u56fe\u6807&#xff08;SVG\u56fe\u7247&#xff09;\u2500\u2500<\/span><br \/>\n<span class=\"token comment\">\/\/ 0&#061;\u6674 1&#061;\u591a\u4e91 2&#061;\u96e8<\/span><br \/>\ncomponent <span class=\"token class-name\">WeatherIcon<\/span> inherits <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token keyword\">in<\/span> property <span class=\"token operator\">&lt;<\/span>int<span class=\"token operator\">&gt;<\/span> weather<span class=\"token operator\">&#8211;<\/span><span class=\"token keyword\">type<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token comment\">\/\/  width: 24px; height: 24px;<\/span><\/p>\n<p>  <span class=\"token keyword\">if<\/span> weather<span class=\"token operator\">&#8211;<\/span><span class=\"token keyword\">type<\/span> <span class=\"token operator\">&#061;&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Image<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      source<span class=\"token punctuation\">:<\/span> <span class=\"token operator\">&#064;<\/span>image<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">url<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;..\/images\/weather-sunny.svg&#034;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n   <span class=\"token comment\">\/\/   width: 100%; height: 100%;<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><br \/>\n  <span class=\"token keyword\">if<\/span> weather<span class=\"token operator\">&#8211;<\/span><span class=\"token keyword\">type<\/span> <span class=\"token operator\">&#061;&#061;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Image<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      source<span class=\"token punctuation\">:<\/span> <span class=\"token operator\">&#064;<\/span>image<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">url<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;..\/images\/weather-cloudy.svg&#034;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n     <span class=\"token comment\">\/\/ width: 100%; height: 100%;<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><br \/>\n  <span class=\"token keyword\">if<\/span> weather<span class=\"token operator\">&#8211;<\/span><span class=\"token keyword\">type<\/span> <span class=\"token operator\">&#061;&#061;<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Image<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      source<span class=\"token punctuation\">:<\/span> <span class=\"token operator\">&#064;<\/span>image<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">url<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;..\/images\/weather-rainy.svg&#034;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n     <span class=\"token comment\">\/\/ width: 100%; height: 100%;<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p>component <span class=\"token class-name\">LightCard<\/span> inherits <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token keyword\">in<\/span> property <span class=\"token operator\">&lt;<\/span><span class=\"token class-name\">LightData<\/span><span class=\"token operator\">&gt;<\/span> light<span class=\"token operator\">&#8211;<\/span>data<span class=\"token punctuation\">;<\/span><br \/>\n  callback <span class=\"token function\">toggled<\/span><span class=\"token punctuation\">(<\/span>int<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  callback <span class=\"token function\">selected<\/span><span class=\"token punctuation\">(<\/span>int<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> 12px<span class=\"token punctuation\">;<\/span><br \/>\n  background<span class=\"token punctuation\">:<\/span> light<span class=\"token operator\">&#8211;<\/span>data<span class=\"token punctuation\">.<\/span>is<span class=\"token operator\">&#8211;<\/span>on<br \/>\n      <span class=\"token operator\">?<\/span> <span class=\"token operator\">&#064;<\/span>linear<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">gradient<\/span><span class=\"token punctuation\">(<\/span>135deg<span class=\"token punctuation\">,<\/span> #1a2040 <span class=\"token number\">0<\/span><span class=\"token operator\">%<\/span><span class=\"token punctuation\">,<\/span> #<span class=\"token number\">1e2850<\/span> <span class=\"token number\">100<\/span><span class=\"token operator\">%<\/span><span class=\"token punctuation\">)<\/span><br \/>\n      <span class=\"token punctuation\">:<\/span> <span class=\"token operator\">&#064;<\/span>linear<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">gradient<\/span><span class=\"token punctuation\">(<\/span>135deg<span class=\"token punctuation\">,<\/span> #<span class=\"token number\">0e1225<\/span> <span class=\"token number\">0<\/span><span class=\"token operator\">%<\/span><span class=\"token punctuation\">,<\/span> #<span class=\"token number\">121830<\/span> <span class=\"token number\">100<\/span><span class=\"token operator\">%<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  border<span class=\"token operator\">&#8211;<\/span>width<span class=\"token punctuation\">:<\/span> 1px<span class=\"token punctuation\">;<\/span><br \/>\n  border<span class=\"token operator\">&#8211;<\/span>color<span class=\"token punctuation\">:<\/span> light<span class=\"token operator\">&#8211;<\/span>data<span class=\"token punctuation\">.<\/span>is<span class=\"token operator\">&#8211;<\/span>on <span class=\"token operator\">?<\/span> #ff9f4344 <span class=\"token punctuation\">:<\/span> #ffffff0d<span class=\"token punctuation\">;<\/span><br \/>\n  animate background <span class=\"token punctuation\">{<\/span> duration<span class=\"token punctuation\">:<\/span> 250ms<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n  animate border<span class=\"token operator\">&#8211;<\/span>color <span class=\"token punctuation\">{<\/span> duration<span class=\"token punctuation\">:<\/span> 250ms<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n  <span class=\"token class-name\">TouchArea<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      mouse<span class=\"token operator\">&#8211;<\/span>cursor<span class=\"token punctuation\">:<\/span> pointer<span class=\"token punctuation\">;<\/span><br \/>\n      clicked <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span> root<span class=\"token punctuation\">.<\/span><span class=\"token function\">selected<\/span><span class=\"token punctuation\">(<\/span>light<span class=\"token operator\">&#8211;<\/span>data<span class=\"token punctuation\">.<\/span>id<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><br \/>\n  <span class=\"token class-name\">VerticalLayout<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      padding<span class=\"token punctuation\">:<\/span> 10px<span class=\"token punctuation\">;<\/span> spacing<span class=\"token punctuation\">:<\/span> 4px<span class=\"token punctuation\">;<\/span><br \/>\n      <span class=\"token class-name\">HorizontalLayout<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n          spacing<span class=\"token punctuation\">:<\/span> 6px<span class=\"token punctuation\">;<\/span><br \/>\n          <span class=\"token class-name\">RoomIcon<\/span> <span class=\"token punctuation\">{<\/span> room<span class=\"token operator\">&#8211;<\/span><span class=\"token keyword\">type<\/span><span class=\"token punctuation\">:<\/span> light<span class=\"token operator\">&#8211;<\/span>data<span class=\"token punctuation\">.<\/span>icon<span class=\"token operator\">&#8211;<\/span><span class=\"token keyword\">type<\/span><span class=\"token punctuation\">;<\/span> active<span class=\"token punctuation\">:<\/span> light<span class=\"token operator\">&#8211;<\/span>data<span class=\"token punctuation\">.<\/span>is<span class=\"token operator\">&#8211;<\/span>on<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n          <span class=\"token class-name\">Text<\/span> <span class=\"token punctuation\">{<\/span> text<span class=\"token punctuation\">:<\/span> light<span class=\"token operator\">&#8211;<\/span>data<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">;<\/span> color<span class=\"token punctuation\">:<\/span> #e8e0d4<span class=\"token punctuation\">;<\/span> font<span class=\"token operator\">&#8211;<\/span>size<span class=\"token punctuation\">:<\/span> 11px<span class=\"token punctuation\">;<\/span> font<span class=\"token operator\">&#8211;<\/span>weight<span class=\"token punctuation\">:<\/span> <span class=\"token number\">600<\/span><span class=\"token punctuation\">;<\/span> vertical<span class=\"token operator\">&#8211;<\/span>alignment<span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span> horizontal<span class=\"token operator\">&#8211;<\/span>stretch<span class=\"token punctuation\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span> overflow<span class=\"token punctuation\">:<\/span> elide<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n      <span class=\"token punctuation\">}<\/span><br \/>\n      <span class=\"token comment\">\/\/ \u4eae\u5ea6\u6761\u533a\u57df\u59cb\u7ec8\u4fdd\u7559&#xff0c;\u907f\u514d\u5f00\u5173\u5207\u6362\u65f6\u9ad8\u5ea6\u53d8\u5316<\/span><br \/>\n      <span class=\"token keyword\">if<\/span> light<span class=\"token operator\">&#8211;<\/span>data<span class=\"token punctuation\">.<\/span>is<span class=\"token operator\">&#8211;<\/span>on <span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n          height<span class=\"token punctuation\">:<\/span> 4px<span class=\"token punctuation\">;<\/span> border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> 2px<span class=\"token punctuation\">;<\/span> background<span class=\"token punctuation\">:<\/span> #ffffff12<span class=\"token punctuation\">;<\/span><br \/>\n          <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n              width<span class=\"token punctuation\">:<\/span> parent<span class=\"token punctuation\">.<\/span>width <span class=\"token operator\">*<\/span> light<span class=\"token operator\">&#8211;<\/span>data<span class=\"token punctuation\">.<\/span>brightness <span class=\"token operator\">\/<\/span> <span class=\"token number\">100<\/span><span class=\"token punctuation\">;<\/span><br \/>\n              height<span class=\"token punctuation\">:<\/span> <span class=\"token number\">100<\/span><span class=\"token operator\">%<\/span><span class=\"token punctuation\">;<\/span> border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> 2px<span class=\"token punctuation\">;<\/span><br \/>\n              background<span class=\"token punctuation\">:<\/span> light<span class=\"token operator\">&#8211;<\/span>data<span class=\"token punctuation\">.<\/span>is<span class=\"token operator\">&#8211;<\/span>on <span class=\"token operator\">?<\/span> <span class=\"token operator\">&#064;<\/span>linear<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">gradient<\/span><span class=\"token punctuation\">(<\/span>90deg<span class=\"token punctuation\">,<\/span> #ff9f43<span class=\"token punctuation\">,<\/span> #ffb347<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">:<\/span> transparent<span class=\"token punctuation\">;<\/span><br \/>\n              animate width <span class=\"token punctuation\">{<\/span> duration<span class=\"token punctuation\">:<\/span> 150ms<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n          <span class=\"token punctuation\">}<\/span><br \/>\n      <span class=\"token punctuation\">}<\/span><br \/>\n      <span class=\"token keyword\">if<\/span> <span class=\"token operator\">!<\/span>light<span class=\"token operator\">&#8211;<\/span>data<span class=\"token punctuation\">.<\/span>is<span class=\"token operator\">&#8211;<\/span>on <span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n          height<span class=\"token punctuation\">:<\/span> 4px<span class=\"token punctuation\">;<\/span> border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> 2px<span class=\"token punctuation\">;<\/span> background<span class=\"token punctuation\">:<\/span> transparent<span class=\"token punctuation\">;<\/span><br \/>\n      <span class=\"token punctuation\">}<\/span><br \/>\n      <span class=\"token class-name\">Text<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n          text<span class=\"token punctuation\">:<\/span> light<span class=\"token operator\">&#8211;<\/span>data<span class=\"token punctuation\">.<\/span>brightness <span class=\"token operator\">&#043;<\/span> <span class=\"token string\">&#034;%&#034;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n          color<span class=\"token punctuation\">:<\/span> #ff9f43<span class=\"token punctuation\">;<\/span> font<span class=\"token operator\">&#8211;<\/span>size<span class=\"token punctuation\">:<\/span> 9px<span class=\"token punctuation\">;<\/span><br \/>\n          opacity<span class=\"token punctuation\">:<\/span> light<span class=\"token operator\">&#8211;<\/span>data<span class=\"token punctuation\">.<\/span>is<span class=\"token operator\">&#8211;<\/span>on <span class=\"token operator\">?<\/span> <span class=\"token number\">1<\/span> <span class=\"token punctuation\">:<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span><br \/>\n      <span class=\"token punctuation\">}<\/span><br \/>\n      <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span> vertical<span class=\"token operator\">&#8211;<\/span>stretch<span class=\"token punctuation\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n      <span class=\"token class-name\">HorizontalLayout<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n          alignment<span class=\"token punctuation\">:<\/span> end<span class=\"token punctuation\">;<\/span><br \/>\n          <span class=\"token class-name\">ToggleSwitch<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n              is<span class=\"token operator\">&#8211;<\/span>on<span class=\"token punctuation\">:<\/span> light<span class=\"token operator\">&#8211;<\/span>data<span class=\"token punctuation\">.<\/span>is<span class=\"token operator\">&#8211;<\/span>on<span class=\"token punctuation\">;<\/span><br \/>\n              toggled <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span> root<span class=\"token punctuation\">.<\/span><span class=\"token function\">toggled<\/span><span class=\"token punctuation\">(<\/span>light<span class=\"token operator\">&#8211;<\/span>data<span class=\"token punctuation\">.<\/span>id<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n          <span class=\"token punctuation\">}<\/span><br \/>\n      <span class=\"token punctuation\">}<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p>component <span class=\"token class-name\">TempCard<\/span> inherits <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token keyword\">in<\/span> property <span class=\"token operator\">&lt;<\/span><span class=\"token class-name\">DayTemp<\/span><span class=\"token operator\">&gt;<\/span> day<span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token keyword\">in<\/span> property <span class=\"token operator\">&lt;<\/span>int<span class=\"token operator\">&gt;<\/span> global<span class=\"token operator\">&#8211;<\/span>max<span class=\"token operator\">&#8211;<\/span>temp<span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token keyword\">in<\/span> property <span class=\"token operator\">&lt;<\/span>int<span class=\"token operator\">&gt;<\/span> global<span class=\"token operator\">&#8211;<\/span>min<span class=\"token operator\">&#8211;<\/span>temp<span class=\"token punctuation\">;<\/span><br \/>\n  border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> 8px<span class=\"token punctuation\">;<\/span><br \/>\n  background<span class=\"token punctuation\">:<\/span> <span class=\"token operator\">&#064;<\/span>linear<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">gradient<\/span><span class=\"token punctuation\">(<\/span>180deg<span class=\"token punctuation\">,<\/span> #161c38 <span class=\"token number\">0<\/span><span class=\"token operator\">%<\/span><span class=\"token punctuation\">,<\/span> #<span class=\"token number\">0e1225<\/span> <span class=\"token number\">100<\/span><span class=\"token operator\">%<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  border<span class=\"token operator\">&#8211;<\/span>width<span class=\"token punctuation\">:<\/span> 1px<span class=\"token punctuation\">;<\/span> border<span class=\"token operator\">&#8211;<\/span>color<span class=\"token punctuation\">:<\/span> #ffffff0a<span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token class-name\">HorizontalLayout<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      padding<span class=\"token operator\">&#8211;<\/span>left<span class=\"token punctuation\">:<\/span> 20px<span class=\"token punctuation\">;<\/span><br \/>\n      padding<span class=\"token operator\">&#8211;<\/span>right<span class=\"token punctuation\">:<\/span> 20px<span class=\"token punctuation\">;<\/span><br \/>\n      spacing<span class=\"token punctuation\">:<\/span> 12px<span class=\"token punctuation\">;<\/span><br \/>\n      <span class=\"token class-name\">WeatherIcon<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n          horizontal<span class=\"token operator\">&#8211;<\/span>stretch<span class=\"token punctuation\">:<\/span> <span class=\"token number\">0.5<\/span><span class=\"token punctuation\">;<\/span><br \/>\n          weather<span class=\"token operator\">&#8211;<\/span><span class=\"token keyword\">type<\/span><span class=\"token punctuation\">:<\/span> day<span class=\"token punctuation\">.<\/span>weather<span class=\"token operator\">&#8211;<\/span><span class=\"token keyword\">type<\/span><span class=\"token punctuation\">;<\/span> <\/p>\n<p>      <span class=\"token punctuation\">}<\/span><br \/>\n      <span class=\"token class-name\">VerticalLayout<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n          horizontal<span class=\"token operator\">&#8211;<\/span>stretch<span class=\"token punctuation\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span><br \/>\n          padding<span class=\"token punctuation\">:<\/span> 6px<span class=\"token punctuation\">;<\/span> spacing<span class=\"token punctuation\">:<\/span> 3px<span class=\"token punctuation\">;<\/span><br \/>\n          <span class=\"token class-name\">Text<\/span> <span class=\"token punctuation\">{<\/span> text<span class=\"token punctuation\">:<\/span> day<span class=\"token punctuation\">.<\/span>day<span class=\"token operator\">&#8211;<\/span>name<span class=\"token punctuation\">;<\/span> color<span class=\"token punctuation\">:<\/span> #e8e0d4<span class=\"token punctuation\">;<\/span> font<span class=\"token operator\">&#8211;<\/span>size<span class=\"token punctuation\">:<\/span> 10px<span class=\"token punctuation\">;<\/span> font<span class=\"token operator\">&#8211;<\/span>weight<span class=\"token punctuation\">:<\/span> <span class=\"token number\">600<\/span><span class=\"token punctuation\">;<\/span> horizontal<span class=\"token operator\">&#8211;<\/span>alignment<span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n          <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n              vertical<span class=\"token operator\">&#8211;<\/span>stretch<span class=\"token punctuation\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span><br \/>\n              <span class=\"token class-name\">HorizontalLayout<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                  alignment<span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span><br \/>\n                  <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                      width<span class=\"token punctuation\">:<\/span> 6px<span class=\"token punctuation\">;<\/span> border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> 3px<span class=\"token punctuation\">;<\/span> background<span class=\"token punctuation\">:<\/span> #ffffff0a<span class=\"token punctuation\">;<\/span><br \/>\n                      <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                          y<span class=\"token punctuation\">:<\/span> parent<span class=\"token punctuation\">.<\/span>height <span class=\"token operator\">&#8211;<\/span> <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">.<\/span>height<span class=\"token punctuation\">;<\/span><br \/>\n                          width<span class=\"token punctuation\">:<\/span> <span class=\"token number\">100<\/span><span class=\"token operator\">%<\/span><span class=\"token punctuation\">;<\/span> border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> 3px<span class=\"token punctuation\">;<\/span><br \/>\n                          height<span class=\"token punctuation\">:<\/span> parent<span class=\"token punctuation\">.<\/span>height <span class=\"token operator\">*<\/span> <span class=\"token punctuation\">(<\/span>day<span class=\"token punctuation\">.<\/span>temp<span class=\"token operator\">&#8211;<\/span>high <span class=\"token operator\">&#8211;<\/span> global<span class=\"token operator\">&#8211;<\/span>min<span class=\"token operator\">&#8211;<\/span>temp<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">\/<\/span> <span class=\"token function\">max<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">,<\/span> global<span class=\"token operator\">&#8211;<\/span>max<span class=\"token operator\">&#8211;<\/span>temp <span class=\"token operator\">&#8211;<\/span> global<span class=\"token operator\">&#8211;<\/span>min<span class=\"token operator\">&#8211;<\/span>temp<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                          background<span class=\"token punctuation\">:<\/span> day<span class=\"token punctuation\">.<\/span>temp<span class=\"token operator\">&#8211;<\/span>high <span class=\"token operator\">&gt;&#061;<\/span> <span class=\"token number\">35<\/span> <span class=\"token operator\">?<\/span> #ff6b6b <span class=\"token punctuation\">:<\/span> day<span class=\"token punctuation\">.<\/span>temp<span class=\"token operator\">&#8211;<\/span>high <span class=\"token operator\">&gt;&#061;<\/span> <span class=\"token number\">25<\/span> <span class=\"token operator\">?<\/span> #ff9f43 <span class=\"token punctuation\">:<\/span> #4ecdc4<span class=\"token punctuation\">;<\/span><br \/>\n                          animate height <span class=\"token punctuation\">{<\/span> duration<span class=\"token punctuation\">:<\/span> 300ms<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n                      <span class=\"token punctuation\">}<\/span><br \/>\n                  <span class=\"token punctuation\">}<\/span><br \/>\n              <span class=\"token punctuation\">}<\/span><br \/>\n          <span class=\"token punctuation\">}<\/span><br \/>\n          <span class=\"token class-name\">Text<\/span> <span class=\"token punctuation\">{<\/span> text<span class=\"token punctuation\">:<\/span> day<span class=\"token punctuation\">.<\/span>temp<span class=\"token operator\">&#8211;<\/span>high <span class=\"token operator\">&#043;<\/span> <span class=\"token string\">&#034;\u00b0&#034;<\/span><span class=\"token punctuation\">;<\/span> color<span class=\"token punctuation\">:<\/span> #ff9f43<span class=\"token punctuation\">;<\/span> font<span class=\"token operator\">&#8211;<\/span>size<span class=\"token punctuation\">:<\/span> 10px<span class=\"token punctuation\">;<\/span> font<span class=\"token operator\">&#8211;<\/span>weight<span class=\"token punctuation\">:<\/span> <span class=\"token number\">600<\/span><span class=\"token punctuation\">;<\/span> horizontal<span class=\"token operator\">&#8211;<\/span>alignment<span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n          <span class=\"token class-name\">Text<\/span> <span class=\"token punctuation\">{<\/span> text<span class=\"token punctuation\">:<\/span> day<span class=\"token punctuation\">.<\/span>temp<span class=\"token operator\">&#8211;<\/span>low <span class=\"token operator\">&#043;<\/span> <span class=\"token string\">&#034;\u00b0&#034;<\/span><span class=\"token punctuation\">;<\/span> color<span class=\"token punctuation\">:<\/span> #4ecdc4<span class=\"token punctuation\">;<\/span> font<span class=\"token operator\">&#8211;<\/span>size<span class=\"token punctuation\">:<\/span> 9px<span class=\"token punctuation\">;<\/span> horizontal<span class=\"token operator\">&#8211;<\/span>alignment<span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n      <span class=\"token punctuation\">}<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token punctuation\">}<\/span><\/p>\n<p>component <span class=\"token class-name\">RobotPet<\/span> inherits <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">in<\/span> property <span class=\"token operator\">&lt;<\/span><span class=\"token class-name\">PetState<\/span><span class=\"token operator\">&gt;<\/span> pet<span class=\"token punctuation\">;<\/span><br \/>\n    callback clicked<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">pet<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    background<span class=\"token punctuation\">:<\/span> transparent<span class=\"token punctuation\">;<\/span><br \/>\n    pet<span class=\"token operator\">&#8211;<\/span>touch <span class=\"token punctuation\">:<\/span><span class=\"token operator\">&#061;<\/span> <span class=\"token class-name\">TouchArea<\/span> <span class=\"token punctuation\">{<\/span> mouse<span class=\"token operator\">&#8211;<\/span>cursor<span class=\"token punctuation\">:<\/span> pointer<span class=\"token punctuation\">;<\/span> clicked <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span> root<span class=\"token punctuation\">.<\/span>clicked<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">pet<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token class-name\">VerticalLayout<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    alignment<span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">if<\/span> pet<span class=\"token punctuation\">.<\/span>is<span class=\"token operator\">&#8211;<\/span>speaking<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            height<span class=\"token punctuation\">:<\/span> 36px<span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token comment\">\/\/width: parent.parent.width;<\/span><br \/>\n            border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> 8px<span class=\"token punctuation\">;<\/span> background<span class=\"token punctuation\">:<\/span> #1e2850ee<span class=\"token punctuation\">;<\/span><br \/>\n            border<span class=\"token operator\">&#8211;<\/span>width<span class=\"token punctuation\">:<\/span> 1px<span class=\"token punctuation\">;<\/span> border<span class=\"token operator\">&#8211;<\/span>color<span class=\"token punctuation\">:<\/span> #4ecdc444<span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token class-name\">Text<\/span> <span class=\"token punctuation\">{<\/span> text<span class=\"token punctuation\">:<\/span> pet<span class=\"token punctuation\">.<\/span>speech<span class=\"token operator\">&#8211;<\/span>text<span class=\"token punctuation\">;<\/span> color<span class=\"token punctuation\">:<\/span> #e8e0d4<span class=\"token punctuation\">;<\/span> font<span class=\"token operator\">&#8211;<\/span>size<span class=\"token punctuation\">:<\/span> 10px<span class=\"token punctuation\">;<\/span> horizontal<span class=\"token operator\">&#8211;<\/span>alignment<span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span> vertical<span class=\"token operator\">&#8211;<\/span>alignment<span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span> overflow<span class=\"token punctuation\">:<\/span> elide<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            height<span class=\"token punctuation\">:<\/span> 5px<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        x<span class=\"token punctuation\">:<\/span>parent<span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span> <span class=\"token operator\">&#8211;<\/span> <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        width<span class=\"token punctuation\">:<\/span>8px<span class=\"token punctuation\">;<\/span>height<span class=\"token punctuation\">:<\/span> <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">.<\/span>width<span class=\"token punctuation\">;<\/span><br \/>\n        border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        background<span class=\"token punctuation\">:<\/span> #ff6b6b<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        x<span class=\"token punctuation\">:<\/span>parent<span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span> <span class=\"token operator\">&#8211;<\/span> <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        width<span class=\"token punctuation\">:<\/span>3px<span class=\"token punctuation\">;<\/span>height<span class=\"token punctuation\">:<\/span> 10px<span class=\"token punctuation\">;<\/span><br \/>\n        background<span class=\"token punctuation\">:<\/span> #4ecdc4<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        x<span class=\"token punctuation\">:<\/span>parent<span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span> <span class=\"token operator\">&#8211;<\/span> <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        width<span class=\"token punctuation\">:<\/span>parent<span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span>height<span class=\"token punctuation\">:<\/span> <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">.<\/span>width<span class=\"token punctuation\">;<\/span><br \/>\n        border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        background<span class=\"token punctuation\">:<\/span> <span class=\"token operator\">&#064;<\/span>linear<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">gradient<\/span><span class=\"token punctuation\">(<\/span>180deg<span class=\"token punctuation\">,<\/span> #<span class=\"token number\">1e2850<\/span> <span class=\"token number\">0<\/span><span class=\"token operator\">%<\/span><span class=\"token punctuation\">,<\/span> #161c38 <span class=\"token number\">100<\/span><span class=\"token operator\">%<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u773c\u775b<\/span><br \/>\n        <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span> x<span class=\"token punctuation\">:<\/span> parent<span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">3<\/span> <span class=\"token operator\">&#8211;<\/span> <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span>    y<span class=\"token punctuation\">:<\/span> parent<span class=\"token punctuation\">.<\/span>height<span class=\"token operator\">\/<\/span><span class=\"token number\">4<\/span><span class=\"token punctuation\">;<\/span> width<span class=\"token punctuation\">:<\/span> pet<span class=\"token punctuation\">.<\/span>is<span class=\"token operator\">&#8211;<\/span>blinking <span class=\"token operator\">?<\/span> parent<span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">9<\/span> <span class=\"token punctuation\">:<\/span> parent<span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">10<\/span><span class=\"token punctuation\">;<\/span> height<span class=\"token punctuation\">:<\/span> pet<span class=\"token punctuation\">.<\/span>is<span class=\"token operator\">&#8211;<\/span>blinking <span class=\"token operator\">?<\/span> parent<span class=\"token punctuation\">.<\/span>height<span class=\"token operator\">\/<\/span><span class=\"token number\">9<\/span> <span class=\"token punctuation\">:<\/span> parent<span class=\"token punctuation\">.<\/span>height<span class=\"token operator\">\/<\/span><span class=\"token number\">10<\/span><span class=\"token punctuation\">;<\/span> border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> 4px<span class=\"token punctuation\">;<\/span> background<span class=\"token punctuation\">:<\/span> #4ecdc4<span class=\"token punctuation\">;<\/span> animate height <span class=\"token punctuation\">{<\/span> duration<span class=\"token punctuation\">:<\/span> 100ms<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span> x<span class=\"token punctuation\">:<\/span> parent<span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">3<\/span><span class=\"token operator\">*<\/span><span class=\"token number\">2<\/span> <span class=\"token operator\">&#8211;<\/span> <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span>  y<span class=\"token punctuation\">:<\/span> parent<span class=\"token punctuation\">.<\/span>height<span class=\"token operator\">\/<\/span><span class=\"token number\">4<\/span><span class=\"token punctuation\">;<\/span> width<span class=\"token punctuation\">:<\/span> pet<span class=\"token punctuation\">.<\/span>is<span class=\"token operator\">&#8211;<\/span>blinking <span class=\"token operator\">?<\/span> parent<span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">9<\/span> <span class=\"token punctuation\">:<\/span> parent<span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">10<\/span><span class=\"token punctuation\">;<\/span> height<span class=\"token punctuation\">:<\/span> pet<span class=\"token punctuation\">.<\/span>is<span class=\"token operator\">&#8211;<\/span>blinking <span class=\"token operator\">?<\/span> parent<span class=\"token punctuation\">.<\/span>height<span class=\"token operator\">\/<\/span><span class=\"token number\">9<\/span> <span class=\"token punctuation\">:<\/span> parent<span class=\"token punctuation\">.<\/span>height<span class=\"token operator\">\/<\/span><span class=\"token number\">10<\/span><span class=\"token punctuation\">;<\/span> border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> 4px<span class=\"token punctuation\">;<\/span> background<span class=\"token punctuation\">:<\/span> #4ecdc4<span class=\"token punctuation\">;<\/span> animate height <span class=\"token punctuation\">{<\/span> duration<span class=\"token punctuation\">:<\/span> 100ms<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token comment\">\/\/ \u8138\u988a<\/span><br \/>\n        <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span> x<span class=\"token punctuation\">:<\/span> parent<span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">4<\/span> <span class=\"token operator\">&#8211;<\/span> <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span>    y<span class=\"token punctuation\">:<\/span> parent<span class=\"token punctuation\">.<\/span>height<span class=\"token operator\">\/<\/span><span class=\"token number\">2.0<\/span><span class=\"token punctuation\">;<\/span> width<span class=\"token punctuation\">:<\/span> parent<span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">6<\/span><span class=\"token punctuation\">;<\/span> height<span class=\"token punctuation\">:<\/span> 8px<span class=\"token punctuation\">;<\/span> border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">.<\/span>height<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span> background<span class=\"token punctuation\">:<\/span> pet<span class=\"token punctuation\">.<\/span>is<span class=\"token operator\">&#8211;<\/span>speaking <span class=\"token operator\">?<\/span> #ff6b6b88 <span class=\"token punctuation\">:<\/span> #ff6b6b44<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span> x<span class=\"token punctuation\">:<\/span> parent<span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">4<\/span> <span class=\"token operator\">*<\/span><span class=\"token number\">3<\/span> <span class=\"token operator\">&#8211;<\/span> <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span>  y<span class=\"token punctuation\">:<\/span> parent<span class=\"token punctuation\">.<\/span>height<span class=\"token operator\">\/<\/span><span class=\"token number\">2.0<\/span><span class=\"token punctuation\">;<\/span> width<span class=\"token punctuation\">:<\/span> parent<span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">6<\/span><span class=\"token punctuation\">;<\/span> height<span class=\"token punctuation\">:<\/span> 8px<span class=\"token punctuation\">;<\/span> border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">.<\/span>height<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span> background<span class=\"token punctuation\">:<\/span> pet<span class=\"token punctuation\">.<\/span>is<span class=\"token operator\">&#8211;<\/span>speaking <span class=\"token operator\">?<\/span> #ff6b6b88 <span class=\"token punctuation\">:<\/span> #ff6b6b44<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token comment\">\/\/ \u5634\u5df4<\/span><br \/>\n        <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span> x<span class=\"token punctuation\">:<\/span> parent<span class=\"token punctuation\">.<\/span>width <span class=\"token operator\">\/<\/span> <span class=\"token number\">2<\/span> <span class=\"token operator\">&#8211;<\/span> <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span> y<span class=\"token punctuation\">:<\/span> parent<span class=\"token punctuation\">.<\/span>height<span class=\"token operator\">\/<\/span><span class=\"token number\">1.4<\/span><span class=\"token punctuation\">;<\/span> width<span class=\"token punctuation\">:<\/span> parent<span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">5<\/span><span class=\"token punctuation\">;<\/span> height<span class=\"token punctuation\">:<\/span> pet<span class=\"token punctuation\">.<\/span>is<span class=\"token operator\">&#8211;<\/span>speaking <span class=\"token operator\">?<\/span> 8px <span class=\"token punctuation\">:<\/span> 5px<span class=\"token punctuation\">;<\/span> border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> 2px<span class=\"token punctuation\">;<\/span> background<span class=\"token punctuation\">:<\/span> #ff9f43<span class=\"token punctuation\">;<\/span> animate height <span class=\"token punctuation\">{<\/span> duration<span class=\"token punctuation\">:<\/span> 150ms<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span> <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span>height<span class=\"token punctuation\">:<\/span> 5px<span class=\"token punctuation\">;<\/span><span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token comment\">\/\/ \u8eab\u4f53<\/span><br \/>\n        <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            x<span class=\"token punctuation\">:<\/span> parent<span class=\"token punctuation\">.<\/span>width <span class=\"token operator\">\/<\/span> <span class=\"token number\">2<\/span> <span class=\"token operator\">&#8211;<\/span> <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        width<span class=\"token punctuation\">:<\/span> parent<span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">2.7<\/span><span class=\"token punctuation\">;<\/span> height<span class=\"token punctuation\">:<\/span> <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span> border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> 8px<span class=\"token punctuation\">;<\/span><br \/>\n        background<span class=\"token punctuation\">:<\/span> <span class=\"token operator\">&#064;<\/span>linear<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">gradient<\/span><span class=\"token punctuation\">(<\/span>180deg<span class=\"token punctuation\">,<\/span> #1a2040 <span class=\"token number\">0<\/span><span class=\"token operator\">%<\/span><span class=\"token punctuation\">,<\/span> #14182e <span class=\"token number\">100<\/span><span class=\"token operator\">%<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        border<span class=\"token operator\">&#8211;<\/span>width<span class=\"token punctuation\">:<\/span> 1px<span class=\"token punctuation\">;<\/span> border<span class=\"token operator\">&#8211;<\/span>color<span class=\"token punctuation\">:<\/span> #4ecdc433<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span> x<span class=\"token punctuation\">:<\/span> parent<span class=\"token punctuation\">.<\/span>width <span class=\"token operator\">\/<\/span> <span class=\"token number\">2<\/span> <span class=\"token operator\">&#8211;<\/span> <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span> y<span class=\"token punctuation\">:<\/span> 8px<span class=\"token punctuation\">;<\/span> width<span class=\"token punctuation\">:<\/span> parent<span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">8<\/span><span class=\"token punctuation\">;<\/span> height<span class=\"token punctuation\">:<\/span> parent<span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">8<\/span><span class=\"token punctuation\">;<\/span> border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span> background<span class=\"token punctuation\">:<\/span> pet<span class=\"token punctuation\">.<\/span>is<span class=\"token operator\">&#8211;<\/span>speaking <span class=\"token operator\">?<\/span> #4ecdc4 <span class=\"token punctuation\">:<\/span> #4ecdc444<span class=\"token punctuation\">;<\/span> animate background <span class=\"token punctuation\">{<\/span> duration<span class=\"token punctuation\">:<\/span> 200ms<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token class-name\">Text<\/span> <span class=\"token punctuation\">{<\/span>  width<span class=\"token punctuation\">:<\/span> <span class=\"token number\">100<\/span><span class=\"token operator\">%<\/span><span class=\"token punctuation\">;<\/span> text<span class=\"token punctuation\">:<\/span> <span class=\"token string\">&#034;\u70b9\u51fb\u8bf4\u8bdd&#034;<\/span><span class=\"token punctuation\">;<\/span> color<span class=\"token punctuation\">:<\/span> #5a6380<span class=\"token punctuation\">;<\/span> font<span class=\"token operator\">&#8211;<\/span>size<span class=\"token punctuation\">:<\/span> 8px<span class=\"token punctuation\">;<\/span> horizontal<span class=\"token operator\">&#8211;<\/span>alignment<span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u5206\u6bb5\u5f0f\u8c03\u5149\u6ed1\u5757&#xff08;10\u6bb5&#xff0c;\u6bcf\u6bb510%&#xff0c;\u7eafint\u64cd\u4f5c&#xff09;<\/span><br \/>\ncomponent <span class=\"token class-name\">DimmingSlider<\/span> inherits <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token keyword\">in<\/span> property <span class=\"token operator\">&lt;<\/span>string<span class=\"token operator\">&gt;<\/span> current<span class=\"token operator\">&#8211;<\/span>light<span class=\"token operator\">&#8211;<\/span>name<span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token keyword\">in<\/span> property <span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">bool<\/span><span class=\"token operator\">&gt;<\/span> current<span class=\"token operator\">&#8211;<\/span>light<span class=\"token operator\">&#8211;<\/span>on<span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token keyword\">in<\/span><span class=\"token operator\">&#8211;<\/span>out property <span class=\"token operator\">&lt;<\/span>int<span class=\"token operator\">&gt;<\/span> brightness<span class=\"token punctuation\">;<\/span><br \/>\n  callback brightness<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">changed<\/span><span class=\"token punctuation\">(<\/span>int<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  height<span class=\"token punctuation\">:<\/span> 42px<span class=\"token punctuation\">;<\/span> border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> 10px<span class=\"token punctuation\">;<\/span><br \/>\n  background<span class=\"token punctuation\">:<\/span> <span class=\"token operator\">&#064;<\/span>linear<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">gradient<\/span><span class=\"token punctuation\">(<\/span>90deg<span class=\"token punctuation\">,<\/span> #<span class=\"token number\">121830<\/span> <span class=\"token number\">0<\/span><span class=\"token operator\">%<\/span><span class=\"token punctuation\">,<\/span> #161c38 <span class=\"token number\">100<\/span><span class=\"token operator\">%<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  border<span class=\"token operator\">&#8211;<\/span>width<span class=\"token punctuation\">:<\/span> 1px<span class=\"token punctuation\">;<\/span> border<span class=\"token operator\">&#8211;<\/span>color<span class=\"token punctuation\">:<\/span> #ffffff0d<span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token class-name\">HorizontalLayout<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      padding<span class=\"token operator\">&#8211;<\/span>left<span class=\"token punctuation\">:<\/span> 10px<span class=\"token punctuation\">;<\/span> padding<span class=\"token operator\">&#8211;<\/span>right<span class=\"token punctuation\">:<\/span> 10px<span class=\"token punctuation\">;<\/span> spacing<span class=\"token punctuation\">:<\/span> 8px<span class=\"token punctuation\">;<\/span><br \/>\n      <span class=\"token class-name\">VerticalLayout<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n          width<span class=\"token punctuation\">:<\/span> 60px<span class=\"token punctuation\">;<\/span> alignment<span class=\"token punctuation\">:<\/span> start<span class=\"token punctuation\">;<\/span><br \/>\n          <span class=\"token class-name\">Text<\/span> <span class=\"token punctuation\">{<\/span> text<span class=\"token punctuation\">:<\/span> current<span class=\"token operator\">&#8211;<\/span>light<span class=\"token operator\">&#8211;<\/span>name<span class=\"token punctuation\">;<\/span> color<span class=\"token punctuation\">:<\/span> #e8e0d4<span class=\"token punctuation\">;<\/span> font<span class=\"token operator\">&#8211;<\/span>size<span class=\"token punctuation\">:<\/span> 10px<span class=\"token punctuation\">;<\/span> font<span class=\"token operator\">&#8211;<\/span>weight<span class=\"token punctuation\">:<\/span> <span class=\"token number\">600<\/span><span class=\"token punctuation\">;<\/span> overflow<span class=\"token punctuation\">:<\/span> elide<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n          <span class=\"token class-name\">Text<\/span> <span class=\"token punctuation\">{<\/span> text<span class=\"token punctuation\">:<\/span> current<span class=\"token operator\">&#8211;<\/span>light<span class=\"token operator\">&#8211;<\/span>on <span class=\"token operator\">?<\/span> brightness <span class=\"token operator\">&#043;<\/span> <span class=\"token string\">&#034;%&#034;<\/span> <span class=\"token punctuation\">:<\/span> <span class=\"token string\">&#034;\u5df2\u5173\u95ed&#034;<\/span><span class=\"token punctuation\">;<\/span> color<span class=\"token punctuation\">:<\/span> current<span class=\"token operator\">&#8211;<\/span>light<span class=\"token operator\">&#8211;<\/span>on <span class=\"token operator\">?<\/span> #ff9f43 <span class=\"token punctuation\">:<\/span> #6b7a99<span class=\"token punctuation\">;<\/span> font<span class=\"token operator\">&#8211;<\/span>size<span class=\"token punctuation\">:<\/span> 9px<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n      <span class=\"token punctuation\">}<\/span><br \/>\n      <span class=\"token comment\">\/\/ \u5206\u6bb5\u6ed1\u5757\u6761<\/span><br \/>\n      <span class=\"token class-name\">HorizontalLayout<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n          vertical<span class=\"token operator\">&#8211;<\/span>stretch<span class=\"token punctuation\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span> spacing<span class=\"token punctuation\">:<\/span> 2px<span class=\"token punctuation\">;<\/span><br \/>\n          <span class=\"token keyword\">for<\/span> seg<span class=\"token punctuation\">[<\/span>idx<span class=\"token punctuation\">]<\/span> <span class=\"token keyword\">in<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">3<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">4<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">5<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">6<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">7<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">8<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">9<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">10<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n              horizontal<span class=\"token operator\">&#8211;<\/span>stretch<span class=\"token punctuation\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span><br \/>\n              border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> 2px<span class=\"token punctuation\">;<\/span><br \/>\n              background<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">(<\/span>seg <span class=\"token operator\">*<\/span> <span class=\"token number\">10<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&lt;&#061;<\/span> root<span class=\"token punctuation\">.<\/span>brightness<br \/>\n                  <span class=\"token operator\">?<\/span> <span class=\"token operator\">&#064;<\/span>linear<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">gradient<\/span><span class=\"token punctuation\">(<\/span>180deg<span class=\"token punctuation\">,<\/span> #ff9f43 <span class=\"token number\">0<\/span><span class=\"token operator\">%<\/span><span class=\"token punctuation\">,<\/span> #ffb347 <span class=\"token number\">100<\/span><span class=\"token operator\">%<\/span><span class=\"token punctuation\">)<\/span><br \/>\n                  <span class=\"token punctuation\">:<\/span> #1a1f35<span class=\"token punctuation\">;<\/span><br \/>\n              animate background <span class=\"token punctuation\">{<\/span> duration<span class=\"token punctuation\">:<\/span> 100ms<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n              <span class=\"token class-name\">TouchArea<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                  mouse<span class=\"token operator\">&#8211;<\/span>cursor<span class=\"token punctuation\">:<\/span> pointer<span class=\"token punctuation\">;<\/span><br \/>\n                  clicked <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                      root<span class=\"token punctuation\">.<\/span>brightness <span class=\"token operator\">&#061;<\/span> seg <span class=\"token operator\">*<\/span> <span class=\"token number\">10<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                      root<span class=\"token punctuation\">.<\/span>brightness<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">changed<\/span><span class=\"token punctuation\">(<\/span>seg <span class=\"token operator\">*<\/span> <span class=\"token number\">10<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                  <span class=\"token punctuation\">}<\/span><br \/>\n              <span class=\"token punctuation\">}<\/span><br \/>\n          <span class=\"token punctuation\">}<\/span><br \/>\n      <span class=\"token punctuation\">}<\/span><br \/>\n      <span class=\"token comment\">\/\/ \u6570\u503c\u663e\u793a<\/span><br \/>\n      <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n          width<span class=\"token punctuation\">:<\/span> 34px<span class=\"token punctuation\">;<\/span> height<span class=\"token punctuation\">:<\/span> 20px<span class=\"token punctuation\">;<\/span> border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> 5px<span class=\"token punctuation\">;<\/span> background<span class=\"token punctuation\">:<\/span> #ff9f4318<span class=\"token punctuation\">;<\/span><br \/>\n          <span class=\"token class-name\">Text<\/span> <span class=\"token punctuation\">{<\/span> text<span class=\"token punctuation\">:<\/span> brightness <span class=\"token operator\">&#043;<\/span> <span class=\"token string\">&#034;%&#034;<\/span><span class=\"token punctuation\">;<\/span> color<span class=\"token punctuation\">:<\/span> #ff9f43<span class=\"token punctuation\">;<\/span> font<span class=\"token operator\">&#8211;<\/span>size<span class=\"token punctuation\">:<\/span> 10px<span class=\"token punctuation\">;<\/span> font<span class=\"token operator\">&#8211;<\/span>weight<span class=\"token punctuation\">:<\/span> <span class=\"token number\">600<\/span><span class=\"token punctuation\">;<\/span> horizontal<span class=\"token operator\">&#8211;<\/span>alignment<span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span> vertical<span class=\"token operator\">&#8211;<\/span>alignment<span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n      <span class=\"token punctuation\">}<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u2500\u2500 \u4e3b\u7a97\u53e3 \u2500\u2500<\/span><br \/>\nexport component <span class=\"token class-name\">SmartHomeWindow<\/span> inherits <span class=\"token class-name\">Window<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  title<span class=\"token punctuation\">:<\/span> <span class=\"token string\">&#034;\u667a\u80fd\u5bb6\u5c45&#034;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  preferred<span class=\"token operator\">&#8211;<\/span>width<span class=\"token punctuation\">:<\/span> 800px<span class=\"token punctuation\">;<\/span> preferred<span class=\"token operator\">&#8211;<\/span>height<span class=\"token punctuation\">:<\/span> 480px<span class=\"token punctuation\">;<\/span><br \/>\n  min<span class=\"token operator\">&#8211;<\/span>width<span class=\"token punctuation\">:<\/span> 800px<span class=\"token punctuation\">;<\/span> min<span class=\"token operator\">&#8211;<\/span>height<span class=\"token punctuation\">:<\/span> 480px<span class=\"token punctuation\">;<\/span><br \/>\n  background<span class=\"token punctuation\">:<\/span> <span class=\"token operator\">&#064;<\/span>linear<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">gradient<\/span><span class=\"token punctuation\">(<\/span>180deg<span class=\"token punctuation\">,<\/span> #0a0e1a <span class=\"token number\">0<\/span><span class=\"token operator\">%<\/span><span class=\"token punctuation\">,<\/span> #<span class=\"token number\">121830<\/span> <span class=\"token number\">100<\/span><span class=\"token operator\">%<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>  <span class=\"token keyword\">in<\/span> property <span class=\"token operator\">&lt;<\/span><span class=\"token punctuation\">[<\/span><span class=\"token class-name\">LightData<\/span><span class=\"token punctuation\">]<\/span><span class=\"token operator\">&gt;<\/span> lights<span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token keyword\">in<\/span> property <span class=\"token operator\">&lt;<\/span><span class=\"token punctuation\">[<\/span><span class=\"token class-name\">DayTemp<\/span><span class=\"token punctuation\">]<\/span><span class=\"token operator\">&gt;<\/span> temperatures<span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token keyword\">in<\/span><span class=\"token operator\">&#8211;<\/span>out property <span class=\"token operator\">&lt;<\/span>int<span class=\"token operator\">&gt;<\/span> selected<span class=\"token operator\">&#8211;<\/span>light<span class=\"token operator\">&#8211;<\/span>id<span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token keyword\">in<\/span><span class=\"token operator\">&#8211;<\/span>out property <span class=\"token operator\">&lt;<\/span>int<span class=\"token operator\">&gt;<\/span> slider<span class=\"token operator\">&#8211;<\/span>brightness<span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token keyword\">in<\/span> property <span class=\"token operator\">&lt;<\/span><span class=\"token class-name\">PetState<\/span><span class=\"token operator\">&gt;<\/span> pet<span class=\"token operator\">&#8211;<\/span>state<span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token keyword\">in<\/span> property <span class=\"token operator\">&lt;<\/span>int<span class=\"token operator\">&gt;<\/span> temp<span class=\"token operator\">&#8211;<\/span>max<span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token keyword\">in<\/span> property <span class=\"token operator\">&lt;<\/span>int<span class=\"token operator\">&gt;<\/span> temp<span class=\"token operator\">&#8211;<\/span>min<span class=\"token punctuation\">;<\/span><\/p>\n<p>  callback toggle<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">light<\/span><span class=\"token punctuation\">(<\/span>int<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  callback select<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">light<\/span><span class=\"token punctuation\">(<\/span>int<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  callback set<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">brightness<\/span><span class=\"token punctuation\">(<\/span>int<span class=\"token punctuation\">,<\/span> int<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  callback click<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">pet<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>  <span class=\"token class-name\">VerticalLayout<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      padding<span class=\"token punctuation\">:<\/span> 8px<span class=\"token punctuation\">;<\/span> spacing<span class=\"token punctuation\">:<\/span> 6px<span class=\"token punctuation\">;<\/span><\/p>\n<p>      <span class=\"token comment\">\/\/ \u2550\u2550\u2550 \u9876\u90e8\u680f \u2550\u2550\u2550<\/span><br \/>\n      <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n          height<span class=\"token punctuation\">:<\/span> 32px<span class=\"token punctuation\">;<\/span> border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> 8px<span class=\"token punctuation\">;<\/span> background<span class=\"token punctuation\">:<\/span> #ffffff06<span class=\"token punctuation\">;<\/span><br \/>\n          <span class=\"token class-name\">HorizontalLayout<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n              padding<span class=\"token operator\">&#8211;<\/span>left<span class=\"token punctuation\">:<\/span> 10px<span class=\"token punctuation\">;<\/span> padding<span class=\"token operator\">&#8211;<\/span>right<span class=\"token punctuation\">:<\/span> 10px<span class=\"token punctuation\">;<\/span> spacing<span class=\"token punctuation\">:<\/span> 8px<span class=\"token punctuation\">;<\/span><br \/>\n              <span class=\"token class-name\">Text<\/span> <span class=\"token punctuation\">{<\/span> text<span class=\"token punctuation\">:<\/span> <span class=\"token string\">&#034;\\\\u{1F3E0} \u667a\u80fd\u5bb6\u5c45&#034;<\/span><span class=\"token punctuation\">;<\/span> color<span class=\"token punctuation\">:<\/span> #e8e0d4<span class=\"token punctuation\">;<\/span> font<span class=\"token operator\">&#8211;<\/span>size<span class=\"token punctuation\">:<\/span> 13px<span class=\"token punctuation\">;<\/span> font<span class=\"token operator\">&#8211;<\/span>weight<span class=\"token punctuation\">:<\/span> <span class=\"token number\">700<\/span><span class=\"token punctuation\">;<\/span> vertical<span class=\"token operator\">&#8211;<\/span>alignment<span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n              <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span> y<span class=\"token punctuation\">:<\/span>parent<span class=\"token punctuation\">.<\/span>height<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span> <span class=\"token operator\">&#8211;<\/span> <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">.<\/span>height<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span>horizontal<span class=\"token operator\">&#8211;<\/span>stretch<span class=\"token punctuation\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n              <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span> y<span class=\"token punctuation\">:<\/span>parent<span class=\"token punctuation\">.<\/span>height<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span> <span class=\"token operator\">&#8211;<\/span> <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">.<\/span>height<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span>width<span class=\"token punctuation\">:<\/span> 6px<span class=\"token punctuation\">;<\/span> height<span class=\"token punctuation\">:<\/span> 6px<span class=\"token punctuation\">;<\/span> border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> 3px<span class=\"token punctuation\">;<\/span> background<span class=\"token punctuation\">:<\/span> #4ecdc4<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n              <span class=\"token class-name\">Text<\/span> <span class=\"token punctuation\">{<\/span> text<span class=\"token punctuation\">:<\/span> <span class=\"token string\">&#034;\u5728\u7ebf&#034;<\/span><span class=\"token punctuation\">;<\/span> color<span class=\"token punctuation\">:<\/span> #4ecdc4<span class=\"token punctuation\">;<\/span> font<span class=\"token operator\">&#8211;<\/span>size<span class=\"token punctuation\">:<\/span> 9px<span class=\"token punctuation\">;<\/span> vertical<span class=\"token operator\">&#8211;<\/span>alignment<span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n          <span class=\"token punctuation\">}<\/span><br \/>\n      <span class=\"token punctuation\">}<\/span><\/p>\n<p>      <span class=\"token comment\">\/\/ \u2550\u2550\u2550 \u706f\u5149\u7f51\u683c &#043; \u5ba0\u7269 \u2550\u2550\u2550<\/span><br \/>\n      <span class=\"token class-name\">HorizontalLayout<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n          vertical<span class=\"token operator\">&#8211;<\/span>stretch<span class=\"token punctuation\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span> spacing<span class=\"token punctuation\">:<\/span> 6px<span class=\"token punctuation\">;<\/span><\/p>\n<p>          <span class=\"token comment\">\/\/ \u706f\u5149\u7f51\u683c 3&#215;2<\/span><br \/>\n          <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n              horizontal<span class=\"token operator\">&#8211;<\/span>stretch<span class=\"token punctuation\">:<\/span> <span class=\"token number\">3<\/span><span class=\"token punctuation\">;<\/span><br \/>\n              border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> 10px<span class=\"token punctuation\">;<\/span> background<span class=\"token punctuation\">:<\/span> #ffffff04<span class=\"token punctuation\">;<\/span><br \/>\n              <span class=\"token class-name\">VerticalLayout<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                  x<span class=\"token punctuation\">:<\/span> 6px<span class=\"token punctuation\">;<\/span> y<span class=\"token punctuation\">:<\/span> 6px<span class=\"token punctuation\">;<\/span><br \/>\n                  width<span class=\"token punctuation\">:<\/span> parent<span class=\"token punctuation\">.<\/span>width <span class=\"token operator\">&#8211;<\/span> 12px<span class=\"token punctuation\">;<\/span><br \/>\n                  height<span class=\"token punctuation\">:<\/span> parent<span class=\"token punctuation\">.<\/span>height <span class=\"token operator\">&#8211;<\/span> 12px<span class=\"token punctuation\">;<\/span><br \/>\n                  spacing<span class=\"token punctuation\">:<\/span> 6px<span class=\"token punctuation\">;<\/span><br \/>\n                  <span class=\"token comment\">\/\/ \u7b2c\u4e00\u884c: \u706f 0, 1, 2<\/span><br \/>\n                  <span class=\"token class-name\">HorizontalLayout<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                      spacing<span class=\"token punctuation\">:<\/span> 6px<span class=\"token punctuation\">;<\/span><br \/>\n                      <span class=\"token class-name\">LightCard<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                          horizontal<span class=\"token operator\">&#8211;<\/span>stretch<span class=\"token punctuation\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                          light<span class=\"token operator\">&#8211;<\/span>data<span class=\"token punctuation\">:<\/span> root<span class=\"token punctuation\">.<\/span>lights<span class=\"token punctuation\">[<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                          <span class=\"token function\">toggled<\/span><span class=\"token punctuation\">(<\/span>id<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span> root<span class=\"token punctuation\">.<\/span>toggle<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">light<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n                          <span class=\"token function\">selected<\/span><span class=\"token punctuation\">(<\/span>id<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span> root<span class=\"token punctuation\">.<\/span>select<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">light<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n                      <span class=\"token punctuation\">}<\/span><br \/>\n                      <span class=\"token class-name\">LightCard<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                          horizontal<span class=\"token operator\">&#8211;<\/span>stretch<span class=\"token punctuation\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                          light<span class=\"token operator\">&#8211;<\/span>data<span class=\"token punctuation\">:<\/span> root<span class=\"token punctuation\">.<\/span>lights<span class=\"token punctuation\">[<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                          <span class=\"token function\">toggled<\/span><span class=\"token punctuation\">(<\/span>id<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span> root<span class=\"token punctuation\">.<\/span>toggle<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">light<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n                          <span class=\"token function\">selected<\/span><span class=\"token punctuation\">(<\/span>id<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span> root<span class=\"token punctuation\">.<\/span>select<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">light<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n                      <span class=\"token punctuation\">}<\/span><br \/>\n                      <span class=\"token class-name\">LightCard<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                          horizontal<span class=\"token operator\">&#8211;<\/span>stretch<span class=\"token punctuation\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                          light<span class=\"token operator\">&#8211;<\/span>data<span class=\"token punctuation\">:<\/span> root<span class=\"token punctuation\">.<\/span>lights<span class=\"token punctuation\">[<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                          <span class=\"token function\">toggled<\/span><span class=\"token punctuation\">(<\/span>id<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span> root<span class=\"token punctuation\">.<\/span>toggle<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">light<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n                          <span class=\"token function\">selected<\/span><span class=\"token punctuation\">(<\/span>id<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span> root<span class=\"token punctuation\">.<\/span>select<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">light<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n                      <span class=\"token punctuation\">}<\/span><br \/>\n                  <span class=\"token punctuation\">}<\/span><br \/>\n                  <span class=\"token comment\">\/\/ \u7b2c\u4e8c\u884c: \u706f 3, 4, 5<\/span><br \/>\n                  <span class=\"token class-name\">HorizontalLayout<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                      spacing<span class=\"token punctuation\">:<\/span> 6px<span class=\"token punctuation\">;<\/span><br \/>\n                      <span class=\"token class-name\">LightCard<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                          horizontal<span class=\"token operator\">&#8211;<\/span>stretch<span class=\"token punctuation\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                          light<span class=\"token operator\">&#8211;<\/span>data<span class=\"token punctuation\">:<\/span> root<span class=\"token punctuation\">.<\/span>lights<span class=\"token punctuation\">[<\/span><span class=\"token number\">3<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                          <span class=\"token function\">toggled<\/span><span class=\"token punctuation\">(<\/span>id<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span> root<span class=\"token punctuation\">.<\/span>toggle<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">light<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">3<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n                          <span class=\"token function\">selected<\/span><span class=\"token punctuation\">(<\/span>id<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span> root<span class=\"token punctuation\">.<\/span>select<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">light<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">3<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n                      <span class=\"token punctuation\">}<\/span><br \/>\n                      <span class=\"token class-name\">LightCard<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                          horizontal<span class=\"token operator\">&#8211;<\/span>stretch<span class=\"token punctuation\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                          light<span class=\"token operator\">&#8211;<\/span>data<span class=\"token punctuation\">:<\/span> root<span class=\"token punctuation\">.<\/span>lights<span class=\"token punctuation\">[<\/span><span class=\"token number\">4<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                          <span class=\"token function\">toggled<\/span><span class=\"token punctuation\">(<\/span>id<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span> root<span class=\"token punctuation\">.<\/span>toggle<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">light<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">4<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n                          <span class=\"token function\">selected<\/span><span class=\"token punctuation\">(<\/span>id<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span> root<span class=\"token punctuation\">.<\/span>select<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">light<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">4<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n                      <span class=\"token punctuation\">}<\/span><br \/>\n                      <span class=\"token class-name\">LightCard<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                          horizontal<span class=\"token operator\">&#8211;<\/span>stretch<span class=\"token punctuation\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                          light<span class=\"token operator\">&#8211;<\/span>data<span class=\"token punctuation\">:<\/span> root<span class=\"token punctuation\">.<\/span>lights<span class=\"token punctuation\">[<\/span><span class=\"token number\">5<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                          <span class=\"token function\">toggled<\/span><span class=\"token punctuation\">(<\/span>id<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span> root<span class=\"token punctuation\">.<\/span>toggle<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">light<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">5<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n                          <span class=\"token function\">selected<\/span><span class=\"token punctuation\">(<\/span>id<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span> root<span class=\"token punctuation\">.<\/span>select<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">light<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">5<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n                      <span class=\"token punctuation\">}<\/span><br \/>\n                  <span class=\"token punctuation\">}<\/span><br \/>\n              <span class=\"token punctuation\">}<\/span><br \/>\n          <span class=\"token punctuation\">}<\/span><\/p>\n<p>          <span class=\"token comment\">\/\/ \u5ba0\u7269<\/span><br \/>\n          <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n              width<span class=\"token punctuation\">:<\/span> 180px<span class=\"token punctuation\">;<\/span><br \/>\n              <span class=\"token class-name\">RobotPet<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                  width<span class=\"token punctuation\">:<\/span> <span class=\"token number\">100<\/span><span class=\"token operator\">%<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                 <span class=\"token comment\">\/\/ height: 100%;<\/span><br \/>\n                  pet<span class=\"token punctuation\">:<\/span> root<span class=\"token punctuation\">.<\/span>pet<span class=\"token operator\">&#8211;<\/span>state<span class=\"token punctuation\">;<\/span><br \/>\n                  clicked<span class=\"token operator\">&#8211;<\/span>pet <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span> root<span class=\"token punctuation\">.<\/span>click<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">pet<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n              <span class=\"token punctuation\">}<\/span><br \/>\n          <span class=\"token punctuation\">}<\/span><br \/>\n      <span class=\"token punctuation\">}<\/span><\/p>\n<p>      <span class=\"token comment\">\/\/ \u2550\u2550\u2550 \u6e29\u5ea6\u9884\u62a5 \u2550\u2550\u2550<\/span><br \/>\n      <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n          height<span class=\"token punctuation\">:<\/span> 80px<span class=\"token punctuation\">;<\/span> border<span class=\"token operator\">&#8211;<\/span>radius<span class=\"token punctuation\">:<\/span> 10px<span class=\"token punctuation\">;<\/span> background<span class=\"token punctuation\">:<\/span> #ffffff04<span class=\"token punctuation\">;<\/span><br \/>\n          <span class=\"token class-name\">HorizontalLayout<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n              padding<span class=\"token punctuation\">:<\/span> 6px<span class=\"token punctuation\">;<\/span> spacing<span class=\"token punctuation\">:<\/span> 4px<span class=\"token punctuation\">;<\/span><br \/>\n              <span class=\"token class-name\">VerticalLayout<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                  width<span class=\"token punctuation\">:<\/span> 80px<span class=\"token punctuation\">;<\/span> spacing<span class=\"token punctuation\">:<\/span> 1px<span class=\"token punctuation\">;<\/span><br \/>\n                  <span class=\"token class-name\">Text<\/span> <span class=\"token punctuation\">{<\/span> text<span class=\"token punctuation\">:<\/span> <span class=\"token string\">&#034;7\u5929&#034;<\/span><span class=\"token punctuation\">;<\/span> color<span class=\"token punctuation\">:<\/span> #e8e0d4<span class=\"token punctuation\">;<\/span> font<span class=\"token operator\">&#8211;<\/span>size<span class=\"token punctuation\">:<\/span> 14px<span class=\"token punctuation\">;<\/span> font<span class=\"token operator\">&#8211;<\/span>weight<span class=\"token punctuation\">:<\/span> <span class=\"token number\">600<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n                  <span class=\"token class-name\">Text<\/span> <span class=\"token punctuation\">{<\/span> text<span class=\"token punctuation\">:<\/span> <span class=\"token string\">&#034;\u6e29\u5ea6&#034;<\/span><span class=\"token punctuation\">;<\/span> color<span class=\"token punctuation\">:<\/span> #8892a8<span class=\"token punctuation\">;<\/span> font<span class=\"token operator\">&#8211;<\/span>size<span class=\"token punctuation\">:<\/span> 13px<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n              <span class=\"token punctuation\">}<\/span><br \/>\n              <span class=\"token keyword\">for<\/span> day <span class=\"token keyword\">in<\/span> root<span class=\"token punctuation\">.<\/span>temperatures <span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Rectangle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                  horizontal<span class=\"token operator\">&#8211;<\/span>stretch<span class=\"token punctuation\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                  <span class=\"token class-name\">TempCard<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                      width<span class=\"token punctuation\">:<\/span> parent<span class=\"token punctuation\">.<\/span>width<span class=\"token punctuation\">;<\/span> height<span class=\"token punctuation\">:<\/span> parent<span class=\"token punctuation\">.<\/span>height<span class=\"token punctuation\">;<\/span><br \/>\n                      day<span class=\"token punctuation\">:<\/span> day<span class=\"token punctuation\">;<\/span><br \/>\n                      global<span class=\"token operator\">&#8211;<\/span>max<span class=\"token operator\">&#8211;<\/span>temp<span class=\"token punctuation\">:<\/span> root<span class=\"token punctuation\">.<\/span>temp<span class=\"token operator\">&#8211;<\/span>max<span class=\"token punctuation\">;<\/span><br \/>\n                      global<span class=\"token operator\">&#8211;<\/span>min<span class=\"token operator\">&#8211;<\/span>temp<span class=\"token punctuation\">:<\/span> root<span class=\"token punctuation\">.<\/span>temp<span class=\"token operator\">&#8211;<\/span>min<span class=\"token punctuation\">;<\/span><br \/>\n                  <span class=\"token punctuation\">}<\/span><br \/>\n              <span class=\"token punctuation\">}<\/span><br \/>\n          <span class=\"token punctuation\">}<\/span><br \/>\n      <span class=\"token punctuation\">}<\/span><\/p>\n<p>      <span class=\"token comment\">\/\/ \u2550\u2550\u2550 \u8c03\u5149\u63a7\u5236 \u2550\u2550\u2550<\/span><br \/>\n      <span class=\"token class-name\">DimmingSlider<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n          current<span class=\"token operator\">&#8211;<\/span>light<span class=\"token operator\">&#8211;<\/span>name<span class=\"token punctuation\">:<\/span> root<span class=\"token punctuation\">.<\/span>lights<span class=\"token punctuation\">[<\/span>root<span class=\"token punctuation\">.<\/span>selected<span class=\"token operator\">&#8211;<\/span>light<span class=\"token operator\">&#8211;<\/span>id<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">;<\/span><br \/>\n          current<span class=\"token operator\">&#8211;<\/span>light<span class=\"token operator\">&#8211;<\/span>on<span class=\"token punctuation\">:<\/span> root<span class=\"token punctuation\">.<\/span>lights<span class=\"token punctuation\">[<\/span>root<span class=\"token punctuation\">.<\/span>selected<span class=\"token operator\">&#8211;<\/span>light<span class=\"token operator\">&#8211;<\/span>id<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>is<span class=\"token operator\">&#8211;<\/span>on<span class=\"token punctuation\">;<\/span><br \/>\n          brightness <span class=\"token operator\">&lt;&#061;<\/span><span class=\"token operator\">&gt;<\/span> root<span class=\"token punctuation\">.<\/span>slider<span class=\"token operator\">&#8211;<\/span>brightness<span class=\"token punctuation\">;<\/span><br \/>\n          brightness<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">changed<\/span><span class=\"token punctuation\">(<\/span>val<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n              root<span class=\"token punctuation\">.<\/span>set<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">brightness<\/span><span class=\"token punctuation\">(<\/span>root<span class=\"token punctuation\">.<\/span>selected<span class=\"token operator\">&#8211;<\/span>light<span class=\"token operator\">&#8211;<\/span>id<span class=\"token punctuation\">,<\/span> val<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n          <span class=\"token punctuation\">}<\/span><br \/>\n      <span class=\"token punctuation\">}<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h3>5\u3001Cargo.toml<\/h3>\n<p><span class=\"token punctuation\">[<\/span>package<span class=\"token punctuation\">]<\/span><br \/>\nname <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#034;slint-smarthome&#034;<\/span><br \/>\nversion <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#034;0.1.0&#034;<\/span><br \/>\nedition <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#034;2021&#034;<\/span><br \/>\nbuild <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#034;build.rs&#034;<\/span><\/p>\n<p><span class=\"token punctuation\">[<\/span>dependencies<span class=\"token punctuation\">]<\/span><br \/>\nslint <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#034;1.17&#034;<\/span><\/p>\n<p><span class=\"token punctuation\">[<\/span>build<span class=\"token operator\">&#8211;<\/span>dependencies<span class=\"token punctuation\">]<\/span><br \/>\nslint<span class=\"token operator\">&#8211;<\/span>build <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#034;1.17&#034;<\/span><\/p>\n<h2>\u4e09\u3001\u5b9e\u73b0\u539f\u7406<\/h2>\n<h3>1\u3001\u6574\u4f53\u67b6\u6784<\/h3>\n<p>\u672c\u9879\u76ee\u91c7\u7528 Rust &#043; Slint \u7684\u524d\u540e\u7aef\u5206\u79bb\u67b6\u6784&#xff1a;Rust \u8d1f\u8d23\u4e1a\u52a1\u903b\u8f91\u4e0e\u6570\u636e\u7ba1\u7406&#xff0c;Slint \u8d1f\u8d23\u754c\u9762\u58f0\u660e\u4e0e\u6e32\u67d3\u3002\u4e24\u8005\u901a\u8fc7 Slint \u81ea\u52a8\u751f\u6210\u7684\u7c7b\u578b\u5b89\u5168\u63a5\u53e3\u8fdb\u884c\u901a\u4fe1&#xff0c;\u65e0\u9700\u624b\u52a8\u7f16\u5199 FFI \u7ed1\u5b9a\u3002<\/p>\n<p>  #mermaid-svg-A1yihBpigPPxqZDw{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-A1yihBpigPPxqZDw .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-A1yihBpigPPxqZDw .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-A1yihBpigPPxqZDw .error-icon{fill:#552222;}#mermaid-svg-A1yihBpigPPxqZDw .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-A1yihBpigPPxqZDw .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-A1yihBpigPPxqZDw .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-A1yihBpigPPxqZDw .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-A1yihBpigPPxqZDw .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-A1yihBpigPPxqZDw .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-A1yihBpigPPxqZDw .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-A1yihBpigPPxqZDw .marker{fill:#333333;stroke:#333333;}#mermaid-svg-A1yihBpigPPxqZDw .marker.cross{stroke:#333333;}#mermaid-svg-A1yihBpigPPxqZDw svg{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-A1yihBpigPPxqZDw p{margin:0;}#mermaid-svg-A1yihBpigPPxqZDw .label{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;color:#333;}#mermaid-svg-A1yihBpigPPxqZDw .cluster-label text{fill:#333;}#mermaid-svg-A1yihBpigPPxqZDw .cluster-label span{color:#333;}#mermaid-svg-A1yihBpigPPxqZDw .cluster-label span p{background-color:transparent;}#mermaid-svg-A1yihBpigPPxqZDw .label text,#mermaid-svg-A1yihBpigPPxqZDw span{fill:#333;color:#333;}#mermaid-svg-A1yihBpigPPxqZDw .node rect,#mermaid-svg-A1yihBpigPPxqZDw .node circle,#mermaid-svg-A1yihBpigPPxqZDw .node ellipse,#mermaid-svg-A1yihBpigPPxqZDw .node polygon,#mermaid-svg-A1yihBpigPPxqZDw .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-A1yihBpigPPxqZDw .rough-node .label text,#mermaid-svg-A1yihBpigPPxqZDw .node .label text,#mermaid-svg-A1yihBpigPPxqZDw .image-shape .label,#mermaid-svg-A1yihBpigPPxqZDw .icon-shape .label{text-anchor:middle;}#mermaid-svg-A1yihBpigPPxqZDw .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-A1yihBpigPPxqZDw .rough-node .label,#mermaid-svg-A1yihBpigPPxqZDw .node .label,#mermaid-svg-A1yihBpigPPxqZDw .image-shape .label,#mermaid-svg-A1yihBpigPPxqZDw .icon-shape .label{text-align:center;}#mermaid-svg-A1yihBpigPPxqZDw .node.clickable{cursor:pointer;}#mermaid-svg-A1yihBpigPPxqZDw .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-A1yihBpigPPxqZDw .arrowheadPath{fill:#333333;}#mermaid-svg-A1yihBpigPPxqZDw .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-A1yihBpigPPxqZDw .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-A1yihBpigPPxqZDw .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-A1yihBpigPPxqZDw .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-A1yihBpigPPxqZDw .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-A1yihBpigPPxqZDw .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-A1yihBpigPPxqZDw .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-A1yihBpigPPxqZDw .cluster text{fill:#333;}#mermaid-svg-A1yihBpigPPxqZDw .cluster span{color:#333;}#mermaid-svg-A1yihBpigPPxqZDw div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-A1yihBpigPPxqZDw .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-A1yihBpigPPxqZDw rect.text{fill:none;stroke-width:0;}#mermaid-svg-A1yihBpigPPxqZDw .icon-shape,#mermaid-svg-A1yihBpigPPxqZDw .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-A1yihBpigPPxqZDw .icon-shape p,#mermaid-svg-A1yihBpigPPxqZDw .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-A1yihBpigPPxqZDw .icon-shape .label rect,#mermaid-svg-A1yihBpigPPxqZDw .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-A1yihBpigPPxqZDw .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-A1yihBpigPPxqZDw .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-A1yihBpigPPxqZDw :root{&#8211;mermaid-font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;}<\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>main.rs \u4e1a\u52a1\u903b\u8f91<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>slint::include_modules! \u751f\u6210\u63a5\u53e3<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>SmartHomeWindow \u754c\u9762<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>LightCard \u706f\u5149\u5361\u7247<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>TempCard \u6e29\u5ea6\u5361\u7247<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>RobotPet \u5ba0\u7269\u7ec4\u4ef6<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>DimmingSlider \u8c03\u5149\u6ed1\u5757<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u56de\u8c03 toggle-light \/ select-light<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u6570\u636e\u7ed1\u5b9a temperatures<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u56de\u8c03 click-pet<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u56de\u8c03 set-brightness<\/p>\n<p><\/span><\/p>\n<h3>2\u3001\u6570\u636e\u6a21\u578b\u4e0e\u7ed1\u5b9a\u673a\u5236<\/h3>\n<p>Slint \u4f7f\u7528\u58f0\u660e\u5f0f UI \u8bed\u8a00&#xff0c;\u901a\u8fc7 export struct \u5b9a\u4e49\u8de8\u8bed\u8a00\u6570\u636e\u7ed3\u6784\u3002Rust \u4fa7\u901a\u8fc7 slint::include_modules!() \u5b8f\u5f15\u5165\u8fd9\u4e9b\u7ed3\u6784&#xff0c;\u5b9e\u73b0\u7c7b\u578b\u5b89\u5168\u7684\u53cc\u5411\u7ed1\u5b9a\u3002<\/p>\n<p><span class=\"token comment\">\/\/ main.slint \u4e2d\u5b9a\u4e49<\/span><br \/>\nexport <span class=\"token keyword\">struct<\/span> <span class=\"token type-definition class-name\">LightData<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  id<span class=\"token punctuation\">:<\/span> int<span class=\"token punctuation\">,<\/span><br \/>\n  name<span class=\"token punctuation\">:<\/span> string<span class=\"token punctuation\">,<\/span><br \/>\n  icon<span class=\"token operator\">&#8211;<\/span><span class=\"token keyword\">type<\/span><span class=\"token punctuation\">:<\/span> int<span class=\"token punctuation\">,<\/span><br \/>\n  is<span class=\"token operator\">&#8211;<\/span>on<span class=\"token punctuation\">:<\/span> <span class=\"token keyword\">bool<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  brightness<span class=\"token punctuation\">:<\/span> int<span class=\"token punctuation\">,<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p>Rust \u4fa7\u521b\u5efa VecModel \u4f5c\u4e3a\u6570\u636e\u6e90&#xff0c;\u901a\u8fc7 ModelRc \u4f20\u9012\u7ed9 UI&#xff1a;<\/p>\n<p><span class=\"token keyword\">let<\/span> lights_model <span class=\"token operator\">&#061;<\/span> <span class=\"token class-name\">Rc<\/span><span class=\"token punctuation\">::<\/span><span class=\"token function\">new<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">VecModel<\/span><span class=\"token punctuation\">::<\/span><span class=\"token function\">from<\/span><span class=\"token punctuation\">(<\/span>lights<span class=\"token punctuation\">.<\/span><span class=\"token function\">clone<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\nui<span class=\"token punctuation\">.<\/span><span class=\"token function\">set_lights<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">ModelRc<\/span><span class=\"token punctuation\">::<\/span><span class=\"token function\">from<\/span><span class=\"token punctuation\">(<\/span>lights_model<span class=\"token punctuation\">.<\/span><span class=\"token function\">clone<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>\u5f53 UI \u4e2d\u4fee\u6539\u6570\u636e\u65f6&#xff0c;\u901a\u8fc7 set_row_data \u66f4\u65b0\u6a21\u578b&#xff0c;Slint \u81ea\u52a8\u89e6\u53d1\u754c\u9762\u5237\u65b0&#xff0c;\u65e0\u9700\u624b\u52a8\u64cd\u4f5c DOM\u3002<\/p>\n<h3>3\u3001\u56de\u8c03\u673a\u5236\u4e0e\u72b6\u6001\u540c\u6b65<\/h3>\n<p>Slint \u7684 callback \u673a\u5236\u5b9e\u73b0\u4e86 UI \u4e8b\u4ef6\u5230 Rust \u903b\u8f91\u7684\u4f20\u9012\u3002\u4ee5\u706f\u5149\u5f00\u5173\u4e3a\u4f8b&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ main.slint \u4e2d\u58f0\u660e<\/span><br \/>\ncallback toggle<span class=\"token operator\">&#8211;<\/span><span class=\"token function\">light<\/span><span class=\"token punctuation\">(<\/span>int<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token comment\">\/\/ main.rs \u4e2d\u6ce8\u518c<\/span><br \/>\nui<span class=\"token punctuation\">.<\/span><span class=\"token function\">on_toggle_light<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">move<\/span> <span class=\"token closure-params\"><span class=\"token closure-punctuation punctuation\">|<\/span>id<span class=\"token closure-punctuation punctuation\">|<\/span><\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">let<\/span> <span class=\"token keyword\">mut<\/span> current<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Vec<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token class-name\">LightData<\/span><span class=\"token operator\">&gt;<\/span> <span class=\"token operator\">&#061;<\/span> lights_ref<span class=\"token punctuation\">.<\/span><span class=\"token function\">take<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">let<\/span> idx <span class=\"token operator\">&#061;<\/span> id <span class=\"token keyword\">as<\/span> <span class=\"token keyword\">usize<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    current<span class=\"token punctuation\">[<\/span>idx<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>is_on <span class=\"token operator\">&#061;<\/span> <span class=\"token operator\">!<\/span>current<span class=\"token punctuation\">[<\/span>idx<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>is_on<span class=\"token punctuation\">;<\/span><br \/>\n    lights_model_ref<span class=\"token punctuation\">.<\/span><span class=\"token function\">set_row_data<\/span><span class=\"token punctuation\">(<\/span>idx<span class=\"token punctuation\">,<\/span> current<span class=\"token punctuation\">[<\/span>idx<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">clone<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    lights_ref<span class=\"token punctuation\">.<\/span><span class=\"token function\">set<\/span><span class=\"token punctuation\">(<\/span>current<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>\u8fd9\u91cc\u4f7f\u7528 Rc&lt;Cell&lt;Vec&lt;LightData&gt;&gt;&gt; \u5305\u88c5\u53ef\u53d8\u72b6\u6001&#xff0c;\u914d\u5408 take() \/ set() \u5b9e\u73b0\u501f\u7528\u68c0\u67e5\u5668\u53cb\u597d\u7684\u72b6\u6001\u66f4\u65b0\u3002\u6bcf\u6b21\u4fee\u6539\u540e\u8c03\u7528 set_row_data \u901a\u77e5\u6a21\u578b\u66f4\u65b0&#xff0c;Slint \u81ea\u52a8\u91cd\u7ed8\u5bf9\u5e94\u7ec4\u4ef6\u3002<\/p>\n<h3>4\u3001\u7ec4\u4ef6\u5316\u8bbe\u8ba1\u4e0e\u56fe\u5f62\u7ed8\u5236<\/h3>\n<p>Slint \u652f\u6301\u7ec4\u4ef6\u5316\u5f00\u53d1&#xff0c;\u672c\u9879\u76ee\u5c06\u754c\u9762\u62c6\u5206\u4e3a\u591a\u4e2a\u53ef\u590d\u7528\u7ec4\u4ef6&#xff1a;<\/p>\n<ul>\n<li>LightCard&#xff1a;\u706f\u5149\u5361\u7247&#xff0c;\u5305\u542b\u56fe\u6807\u3001\u540d\u79f0\u3001\u4eae\u5ea6\u6761\u548c\u5f00\u5173<\/li>\n<li>TempCard&#xff1a;\u6e29\u5ea6\u5361\u7247&#xff0c;\u5305\u542b\u5929\u6c14\u56fe\u6807\u548c\u6e29\u5ea6\u67f1\u72b6\u56fe<\/li>\n<li>RobotPet&#xff1a;\u5ba0\u7269\u7ec4\u4ef6&#xff0c;\u5305\u542b\u8868\u60c5\u3001\u8eab\u4f53\u548c\u5bf9\u8bdd\u6c14\u6ce1<\/li>\n<li>DimmingSlider&#xff1a;\u5206\u6bb5\u5f0f\u8c03\u5149\u6ed1\u5757<\/li>\n<\/ul>\n<p>\u56fe\u6807\u91c7\u7528\u7eaf\u56fe\u5f62\u7ed8\u5236\u800c\u975e\u56fe\u7247\u8d44\u6e90&#xff0c;\u4f8b\u5982\u6c99\u53d1\u56fe\u6807&#xff1a;<\/p>\n<p>if room-type &#061;&#061; 0: Rectangle {<br \/>\n    width: 18px; height: 10px; border-radius: 3px;<br \/>\n    x: 1px; y: 5px;<br \/>\n    background: active ? #ff9f43 : #6b7a99;<br \/>\n    Rectangle { width: 5px; height: 12px; border-radius: 2px; x: -1px; y: -2px; background: active ? #ff9f43cc : #6b7a99cc; }<br \/>\n    Rectangle { width: 5px; height: 12px; border-radius: 2px; x: 14px; y: -2px; background: active ? #ff9f43cc : #6b7a99cc; }<br \/>\n}<\/p>\n<p>\u901a\u8fc7 if \u6761\u4ef6\u6e32\u67d3\u4e0d\u540c\u56fe\u5f62&#xff0c;\u914d\u5408 active \u5c5e\u6027\u5b9e\u73b0\u5f00\u5173\u72b6\u6001\u7684\u89c6\u89c9\u53cd\u9988\u3002<\/p>\n<h3>5\u3001\u52a8\u753b\u4e0e\u4ea4\u4e92\u53cd\u9988<\/h3>\n<p>Slint \u5185\u7f6e\u52a8\u753b\u7cfb\u7edf&#xff0c;\u901a\u8fc7 animate \u5173\u952e\u5b57\u58f0\u660e\u5c5e\u6027\u8fc7\u6e21&#xff1a;<\/p>\n<p>animate background { duration: 200ms; }<br \/>\nanimate x { duration: 200ms; easing: ease-in-out; }<\/p>\n<p>\u5ba0\u7269\u5bf9\u8bdd\u529f\u80fd\u4f7f\u7528 Timer::single_shot \u5b9e\u73b0\u5b9a\u65f6\u6062\u590d&#xff1a;<\/p>\n<p><span class=\"token class-name\">Timer<\/span><span class=\"token punctuation\">::<\/span><span class=\"token function\">single_shot<\/span><span class=\"token punctuation\">(<\/span><br \/>\n    <span class=\"token namespace\">std<span class=\"token punctuation\">::<\/span>time<span class=\"token punctuation\">::<\/span><\/span><span class=\"token class-name\">Duration<\/span><span class=\"token punctuation\">::<\/span><span class=\"token function\">from_millis<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">5000<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token keyword\">move<\/span> <span class=\"token closure-params\"><span class=\"token closure-punctuation punctuation\">|<\/span><span class=\"token closure-punctuation punctuation\">|<\/span><\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token keyword\">let<\/span> <span class=\"token class-name\">Some<\/span><span class=\"token punctuation\">(<\/span>ui<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;<\/span> ui_weak2<span class=\"token punctuation\">.<\/span><span class=\"token function\">upgrade<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            ui<span class=\"token punctuation\">.<\/span><span class=\"token function\">set_pet_state<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">PetState<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                is_speaking<span class=\"token punctuation\">:<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                speech_text<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">SharedString<\/span><span class=\"token punctuation\">::<\/span><span class=\"token function\">from<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;&#034;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                is_blinking<span class=\"token punctuation\">:<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<h3>6\u3001\u6784\u5efa\u6d41\u7a0b<\/h3>\n<p>build.rs \u5728\u7f16\u8bd1\u65f6\u8c03\u7528 slint_build::compile \u5c06 .slint \u6587\u4ef6\u7f16\u8bd1\u4e3a Rust \u4ee3\u7801&#xff1a;<\/p>\n<p><span class=\"token keyword\">fn<\/span> <span class=\"token function-definition function\">main<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token namespace\">slint_build<span class=\"token punctuation\">::<\/span><\/span><span class=\"token function\">compile<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;ui\/main.slint&#034;<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">unwrap<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p>\u7f16\u8bd1\u4ea7\u7269\u901a\u8fc7 include_modules!() \u5b8f\u5728\u8fd0\u884c\u65f6\u5f15\u5165&#xff0c;\u5b9e\u73b0 UI \u5b9a\u4e49\u4e0e\u4e1a\u52a1\u903b\u8f91\u7684\u5b8c\u5168\u89e3\u8026\u3002<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260923002610-6ab31ca2417da.png\" alt=\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>RustSlint \u5b9e\u73b0\u667a\u80fd\u5bb6\u5c45\u63a7\u5236\u9762\u677f\u6e90\u7801\u5206\u4eab\u4e00\u3001\u6548\u679c\u5c55\u793a\u4e8c\u3001\u6e90\u7801\u5206\u4eab1\u3001\u5de5\u7a0b\u7ed3\u67842\u3001main.rs3\u3001build.rs4\u3001main.slint5\u3001Cargo.toml\u4e09\u3001\u5b9e\u73b0\u539f\u74061\u3001\u6574\u4f53\u67b6\u67842\u3001\u6570\u636e\u6a21\u578b\u4e0e\u7ed1\u5b9a\u673a\u52363\u3001\u56de\u8c03\u673a\u5236\u4e0e\u72b6\u6001\u540c\u6b654\u3001\u7ec4\u4ef6\u5316\u8bbe\u8ba1\u4e0e\u56fe\u5f62\u7ed8\u52365\u3001\u52a8\u753b\u4e0e\u4ea4\u4e92\u53cd\u99886\u3001\u6784\u5efa\u6d41\u7a0b\u4e00\u3001\u6548\u679c\u5c55\u793a \u4e8c\u3001\u6e90\u7801\u5206\u4eab<br \/>\n1\u3001\u5de5\u7a0b\u7ed3\u6784 2\u3001main.rs<br \/>\nuse std::cell::Cell;<br \/>\nuse std::rc::Rc;<br \/>\nuse slint::{Model, Mode<\/p>\n","protected":false},"author":2,"featured_media":109035,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[206,190,2115],"topic":[],"class_list":["post-109041","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-rust","tag-190","tag-2115"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Rust+Slint \u5b9e\u73b0\u667a\u80fd\u5bb6\u5c45\u63a7\u5236\u9762\u677f\u6e90\u7801\u5206\u4eab - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wsisp.com\/helps\/109041.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Rust+Slint \u5b9e\u73b0\u667a\u80fd\u5bb6\u5c45\u63a7\u5236\u9762\u677f\u6e90\u7801\u5206\u4eab - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"RustSlint \u5b9e\u73b0\u667a\u80fd\u5bb6\u5c45\u63a7\u5236\u9762\u677f\u6e90\u7801\u5206\u4eab\u4e00\u3001\u6548\u679c\u5c55\u793a\u4e8c\u3001\u6e90\u7801\u5206\u4eab1\u3001\u5de5\u7a0b\u7ed3\u67842\u3001main.rs3\u3001build.rs4\u3001main.slint5\u3001Cargo.toml\u4e09\u3001\u5b9e\u73b0\u539f\u74061\u3001\u6574\u4f53\u67b6\u67842\u3001\u6570\u636e\u6a21\u578b\u4e0e\u7ed1\u5b9a\u673a\u52363\u3001\u56de\u8c03\u673a\u5236\u4e0e\u72b6\u6001\u540c\u6b654\u3001\u7ec4\u4ef6\u5316\u8bbe\u8ba1\u4e0e\u56fe\u5f62\u7ed8\u52365\u3001\u52a8\u753b\u4e0e\u4ea4\u4e92\u53cd\u99886\u3001\u6784\u5efa\u6d41\u7a0b\u4e00\u3001\u6548\u679c\u5c55\u793a \u4e8c\u3001\u6e90\u7801\u5206\u4eab 1\u3001\u5de5\u7a0b\u7ed3\u6784 2\u3001main.rs use std::cell::Cell; use std::rc::Rc; use slint::{Model, Mode\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/109041.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2026-09-23T00:26:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260923002606-6ab31c9e9fee4.png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/109041.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/109041.html\",\"name\":\"Rust+Slint \u5b9e\u73b0\u667a\u80fd\u5bb6\u5c45\u63a7\u5236\u9762\u677f\u6e90\u7801\u5206\u4eab - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2026-09-23T00:26:11+00:00\",\"dateModified\":\"2026-09-23T00:26:11+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/109041.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/109041.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/109041.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Rust+Slint \u5b9e\u73b0\u667a\u80fd\u5bb6\u5c45\u63a7\u5236\u9762\u677f\u6e90\u7801\u5206\u4eab\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Rust+Slint \u5b9e\u73b0\u667a\u80fd\u5bb6\u5c45\u63a7\u5236\u9762\u677f\u6e90\u7801\u5206\u4eab - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wsisp.com\/helps\/109041.html","og_locale":"zh_CN","og_type":"article","og_title":"Rust+Slint \u5b9e\u73b0\u667a\u80fd\u5bb6\u5c45\u63a7\u5236\u9762\u677f\u6e90\u7801\u5206\u4eab - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"RustSlint \u5b9e\u73b0\u667a\u80fd\u5bb6\u5c45\u63a7\u5236\u9762\u677f\u6e90\u7801\u5206\u4eab\u4e00\u3001\u6548\u679c\u5c55\u793a\u4e8c\u3001\u6e90\u7801\u5206\u4eab1\u3001\u5de5\u7a0b\u7ed3\u67842\u3001main.rs3\u3001build.rs4\u3001main.slint5\u3001Cargo.toml\u4e09\u3001\u5b9e\u73b0\u539f\u74061\u3001\u6574\u4f53\u67b6\u67842\u3001\u6570\u636e\u6a21\u578b\u4e0e\u7ed1\u5b9a\u673a\u52363\u3001\u56de\u8c03\u673a\u5236\u4e0e\u72b6\u6001\u540c\u6b654\u3001\u7ec4\u4ef6\u5316\u8bbe\u8ba1\u4e0e\u56fe\u5f62\u7ed8\u52365\u3001\u52a8\u753b\u4e0e\u4ea4\u4e92\u53cd\u99886\u3001\u6784\u5efa\u6d41\u7a0b\u4e00\u3001\u6548\u679c\u5c55\u793a \u4e8c\u3001\u6e90\u7801\u5206\u4eab 1\u3001\u5de5\u7a0b\u7ed3\u6784 2\u3001main.rs use std::cell::Cell; use std::rc::Rc; use slint::{Model, Mode","og_url":"https:\/\/www.wsisp.com\/helps\/109041.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-09-23T00:26:11+00:00","og_image":[{"url":"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260923002606-6ab31c9e9fee4.png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"14 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/109041.html","url":"https:\/\/www.wsisp.com\/helps\/109041.html","name":"Rust+Slint \u5b9e\u73b0\u667a\u80fd\u5bb6\u5c45\u63a7\u5236\u9762\u677f\u6e90\u7801\u5206\u4eab - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2026-09-23T00:26:11+00:00","dateModified":"2026-09-23T00:26:11+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/109041.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/109041.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/109041.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"Rust+Slint \u5b9e\u73b0\u667a\u80fd\u5bb6\u5c45\u63a7\u5236\u9762\u677f\u6e90\u7801\u5206\u4eab"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/109041","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=109041"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/109041\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media\/109035"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=109041"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=109041"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=109041"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=109041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}