在使用墨刀(MockingBot)进行原型设计时,动态组件的默认启动状态需要手动配置,否则组件始终从状态1开始渲染。但在实际项目里,往往需要组件一进入页面便显示指定状态(例如弹窗默认隐藏、Tab栏默认激活第二个选项)。本文详细讲解如何确认、设置并验证动态组件的默认状态,确保预览效果符合预期需求。

确认动态组件当前默认状态
双击动态组件进入编辑模式,观察右上角的状态切换栏。最左侧带有星号(★)的状态即为当前默认启动状态。墨刀不会自动标记,需手动识别两种方式:
- 状态名称旁显示★图标
- 状态名称下方标注“默认”字样
若未看到★,说明尚未设置默认状态。此时所有预览均从状态1开始渲染,即便已将状态2设为主要业务界面。
将指定状态设为默认启动状态
提供两种方法,两种方法互斥,不能混用。
- 方法一:编辑态内设置
在动态组件编辑模式下,鼠标悬停在目标状态(如状态2)的标签上,点击右侧出现的⭐图标。该状态立刻被设为默认,★符号同步出现在其左侧,状态1的★自动消失。 - 方法二:属性面板设置
退出编辑状态,在画布上选中该动态组件 → 右侧面板切换到【属性】→ 找到【默认状态】下拉菜单 → 选择“状态2”(或你命名过的状态名,如“弹窗展开”)。这一步会直接覆盖原有默认设定,无需再进入编辑态。
注意:若先用方法一设了默认,再用方法二选择其他状态,则方法二生效;反之亦然。两种方法不可同时使用。
验证默认状态是否生效
- 点击右上角【预览】按钮启动原型预览。
- 观察页面加载瞬间动态组件呈现的内容——不是编辑区里你最后停留的状态,而是带★的那个状态。
- 若显示异常,返回检查是否误将状态1的小眼睛图标点成隐藏(闭眼),导致即便设为默认也看不见内容。
常见问题与小提示
- Q:为什么预览时动态组件仍然显示状态1?
A:请确认默认状态是否已设置(带★),且未在编辑区将状态1的可见性(小眼睛)设为关闭。 - Q:设置默认状态后,组件内其他交互是否受影响?
A:不影响。默认状态仅控制页面加载时的初始显示,后续的交互(如点击切换状态)依然正常运作。 - 小提示:在设置默认状态前,建议先检查所有状态是否都正确命名,避免在下拉菜单中选错。
通过以上步骤,即可灵活控制墨刀动态组件的初始显示状态,满足不同业务场景下的原型设计需求。建议每次调整默认状态后都进行预览验证,确保视觉与交互逻辑一致。
