在交互中使用变量
变量可以保存原型运行时的状态。交互触发后,通过动作修改变量,绑定该变量的图层或组件会立即更新,从而用较少的画板实现更接近真实产品的流程。
设置变量值
- 选中交互触发源,在交互设置面板中添加“设置全局变量”动作。
- 选择目标变量。
- 在值控件中输入要写入的值,保存交互。
值可以直接填写,也可以通过绑定变量按钮读取其他变量。绑定变量时,选择器会按变量类型过滤可用项;目标变量与来源变量类型必须兼容。
数字表达式 fx
数字变量的值控件支持表达式模式。点击值输入框旁的 fx,在表达式编辑器中组合数字常量、其他数字变量和可读取的图层数据。例如:
数量 + 1:点击“加一”按钮递增数量。总价 + 商品价格:将商品价格累加到总价。进度 - 10:点击返回时减少进度。
表达式结果必须是数字,并且要符合目标变量可接受的范围。无法得到数字结果时,动作不会产生预期更新。需要恢复普通输入时,在值控件中切回普通模式。
切换变量集模式
要在交互中切换一整组变量:
- 添加“设置全局变量集”动作。
- 选择目标变量集。
- 在“模式”中选择明确的目标模式。
- 在“作用域”中选择“全局”,或选择当前画板内的指定图层。
“全局”会在当前原型范 围内切换该变量集;选择指定图层时,仅从该图层开始按新模式解析。变量集的默认模式只决定初始或自动模式下的值,不等同于运行时自动切换。
在预览或演示模式中验证时,建议先确认页面确实引用了该变量集,再点击切换按钮。若只有部分图层变化,检查这些图层是否设置了单独的模式映射;若全部不变,检查动作选择的变量集、目标模式和作用域是否正确。切换变量集或复制动作后,应再次检查作用域,避免影响范围过大。
典型场景
深色模式按钮
建立“主题色”变量集,设置“浅色”和“深色”模式;将页面背景、文字和按钮绑定颜色变量。给切换按钮添加“设置全局变量集”动作,选择对应模式。预览时点击按钮,整套界面一起换肤。
数量步进器
创建数字变量 购物车/数量,默认值为 1。给“+”按钮添加“设置全局变量”动作,目标为该变量,使用 数量 + 1 表达式;给“-”按钮使用 数量 - 1,并根据需要增加边界判断或禁用按钮。数量文本或组件状态绑定该变量后,点击即可看到变化。
技巧:把展示值和计算值分开。 例如保留 购物车/数量、购物车/单价