【xilem0.4基础语法学与练】第54课 state_machine 官方示例代码深度解析

前言源码来源xilem/examples/state_machine.rs适配版本Xilem 0.4 / Masonry 0.4一、完整源码// Copyright 2024 the Xilem Authors// SPDX-License-Identifier: Apache-2.0//! A state machine to detect whether the button was pressed an even or an odd number of times.usemasonry::layout::AsUnit;usewinit::error::EventLoopError;usexilem::core::one_of::{OneOf,OneOf3};usexilem::style::Styleas_;usexilem::view::{flex_col,label,prose,spinner,text_button};usexilem::{EventLoop,WidgetView,WindowOptions,Xilem};/// The state of the entire application.////// This is owned by Xilem, used to construct the view tree, and updated by event handlers.structStateMachine{state:IsEven,/// The history of which transitions were taken in this run.history:String,}#[derive(Copy, Clone, Debug)]enumIsEven{Initial,Odd,Even,Halt,Success,}fnstate_machine(app_data:mutStateMachine)-implWidgetViewStateMachineuse{matchapp_data.state{// The first time we use OneOf in a conditional statement, we need// to specify the number of OneOf variants used - 3 in this case.// This works around a rustc inference issue.IsEven::Initial|IsEven::EvenOneOf3::A(flex_col((sequence_button(1,IsEven::Odd),sequence_button(_,IsEven::Success),))),// Subsequent branches can instead use the overarching OneOf type,// meaning that they dont need to change if additional branches are added.IsEven::OddOneOf::B(flex_col((sequence_button(1,IsEven::Even),sequence_button(_,IsEven::Halt),))),// These branches can use the same variant of OneOf, because// they both have the same view type (Label).IsEven::HaltOneOf::C(label(Failure! Tally total was odd.)),IsEven::SuccessOneOf::C(label(Success! Tally total was even.)),}}/// A button component which transitions to a specified target_state/// and appends its value to the history when pressed.fnsequence_button(value:staticstr,target_state:IsEven)-implWidgetViewStateMachine{text_button(value,move|app_data:mutStateMachine|{app_data.statetarget_state;app_data.history.push_str(value);})}fnapp_logic(app_data:mutStateMachine)-implWidgetViewStateMachineuse{flex_col((text_button(Reset,|app_data:mutStateMachine|{app_data.history.clear();app_data.stateIsEven::Initial;}),prose(*app_data.history),label(format!(Current state: {:?},app_data.state)),spinner().dims(40.px()),state_machine(app_data),// TODO: When we have a canvas widget, visualise the entire state machine here.)).padding(15.px())}fnmain()-Result(),EventLoopError{letapp_dataStateMachine{state:IsEven::Initial,history:String::new(),};letappXilem::new_simple(app_data,app_logic,WindowOptions::new(Centered Flex));app.run_in(EventLoop::with_user_event())?;Ok(())}二、程序核心功能本课主题有限状态机 OneOf 多类型视图分支Xilem核心特色Rust有一个限制 impl WidgetView 要求同一个函数所有分支必须返回完全相同的视图类型。普通 match 如果不同分支返回不同UI组件有的返回flex_col有的返回label会编译报错。OneOf / OneOfN 就是用来解决这个问题封装不同类型视图统一成单一返回类型。这个示例实现简易状态机5种状态 Initial 初始、 Odd 奇次、 Even 偶次、 Halt 失败终止、 Success 成功终止每个状态展示不同按钮集合点击按钮切换状态同时记录操作历史字符串终止状态Success/Halt不再显示按钮直接展示文本提示Reset按钮清空历史重置回到初始状态附带prose文本、spinner加载动画组件状态流转规则Initial / Even可点 1 → Odd点 _ → Success偶数成功Odd可点 1 → Even点 _ → Halt奇数失败Success / Halt终止只显示文字没有操作按钮三、逐模块深度解析1. 数据模型structStateMachine{state:IsEven,// 当前状态机所处状态history:String,// 记录点击序列}#[derive(Copy, Clone, Debug)]enumIsEven{Initial,Odd,Even,Halt,Success,}IsEven 枚举代表有限状态机全部状态。2. sequence_button 可复用状态跳转按钮fnsequence_button(value:staticstr,target_state:IsEven)-implWidgetViewStateMachine{text_button(value,move|app_data:mutStateMachine|{app_data.statetarget_state;app_data.history.push_str(value);})}封装通用按钮点击后两件事将全局state切换为 target_state把按钮标记字符追加到history字符串state_machine 核心match OneOf本课重中之重fnstate_machine(app_data:mutStateMachine)-implWidgetViewStateMachineuse{matchapp_data.state{IsEven::Initial|IsEven::EvenOneOf3::A(flex_col((sequence_button(1,IsEven::Odd),sequence_button(_,IsEven::Success),))),IsEven::OddOneOf::B(flex_col((sequence_button(1,IsEven::Even),sequence_button(_,IsEven::Halt),))),IsEven::HaltOneOf::C(label(Failure! Tally total was odd.)),IsEven::SuccessOneOf::C(label(Success! Tally total was even.)),}}OneOf 作用Rust普通match分支A返回 flex_col 分支C返回 label 类型不一致直接编译失败。OneOf3 是三变体枚举包装器可以包裹三种不同View类型统一对外输出同一种 OneOf3 类型。OneOf3::A 第一种视图类型flex_colOneOf3::B 第二种视图类型flex_colOneOf3::C 第三种视图类型label简写OneOf2最多2种不同视图类型OneOf3最多3种不同视图类型OneOf通用别名4. app_logic 主视图flex_col((text_button(Reset,|app_data:mutStateMachine|{app_data.history.clear();app_data.stateIsEven::Initial;}),prose(*app_data.history),label(format!(Current state: {:?},app_data.state)),spinner().dims(40.px()),state_machine(app_data),)).padding(15.px())prose 长文本阅读排版组件自动处理文本换行spinner() 内置加载旋转动画组件 .dims() 设置尺寸Reset按钮清空历史字符串状态切回 Initial嵌入state_machine动态分支UI5. 数据流5.1 初始状态 Initial history为空字符串5.2 点击按钮 → 修改 state 追加字符到history5.3 state改变 → app_logic执行进入match通过OneOf渲染对应分支UI5.4 到达Halt/Success终止态不再渲染操作按钮只展示结果文本5.5 Reset重置全部状态回到起点四、本课核心知识点总结OneOf / OneOfNXilem特有工具解决Rust的分支视图类型不一致问题实现条件渲染不同种类组件。OneOf22种视图OneOf33种视图。有限状态机应用状态被约束在预定义枚举内状态之间只能按规定跳转适合弹窗、向导、表单多步骤、游戏逻辑。组件封装 sequence_button 封装带状态跳转逻辑的按钮复用代码。内置组件 prose 文本排版、 spinner 加载旋转动画。重要理解没有OneOf match 分支返回不同UI会编译报错这是Rust类型系统带来的限制OneOf就是Xilem给出的标准解决方案。五、课后习题练习1 填空OneOf的作用是解决match不同分支返回____的编译问题。OneOf3最多支持____种不同视图类型。这个示例使用____实现有限状态机用来约束应用的合法状态。spinner() 是Xilem内置____组件。参考答案不同视图类型3枚举(enum)加载旋转动画练习2 判断去掉OneOfmatch分支有的返回flex_col有的返回label代码可以正常编译。❌错误状态切换时会自动追加字符到history字符串。✅正确Success 和 Halt 属于终止状态界面不会渲染操作按钮。✅正确prose组件主要用来渲染标题大字体文本。❌错误用于长文本阅读排版练习3 简答题目什么场景下必须使用OneOf参考答案当match/if条件分支需要返回不同类型的UI组件例如一个分支返回flex布局另一个分支返回label文本Rust要求返回类型统一此时就需要OneOf包装不同视图合并成同一个返回类型。如果所有分支返回完全一样的视图类型则不需要OneOf。