实例切换属性覆盖

实例切换时的属性覆盖保留指南及组件集最佳实践

使用组件（实例）时，我们往往会对实例图层的属性做一些调整，以满足不同设计场景的需要，包括修改填充色、添加阴影特效、修改文本内容、以及通过实例切换替换图标等，我们统称这些调整为属性覆盖。

覆盖产生后，如果再进行实例切换，会发现属性覆盖有时会传递到新的实例上，有时却不会，并且反复切换时，属性覆盖还可能会丢失。

此篇文档能够帮助你了解，符合什么样的条件时，属性覆盖会在实例切换后被保留下来，以及什么时候不会。

除此之外，你还将了解到，使用组件集功能时，如何定义简洁、有效的组件状态，以确保属性覆盖在不同状态之间被正确的保留下来。

核心机制说明

属性覆盖是指实例内具体图层的属性被人为修改，当进行实例切换时，理解属性覆盖的保留逻辑的关键在于：什么情况下，实例 a 的图层 a-m 的属性修改，要在实例 b 的图层 b-n 上保留下来。

我们用以下两个条件，把实例切换的场景划分为四个子场景：

• 是否是在同一组件集内切换不同的组件状态；

• 是实例（容器）层，还是实例的子图层。

	非组件集内状态切换 - 组件 A 的实例 a 切换到组件 B 的实例 b - 组件集 A 的状态实例 a1 切换到组件 B 的实例 b	组件集内状态切换 - 组件集 A 的状态实例 a1 切换到组件集 A 的状态实例 a2
实例层	无条件保留覆盖，即： 对实例（容器）层所做的任何修改，在实例切换后，都会被保留在新的实例（容器）层上，不论实例（容器）的图层名称是否一致。 例如：	不同状态定义一致时保留覆盖，即： 当从组件集 A 的状态实例 a1 切换到组件集 A 的状态实例 a2 时，如果在组件集中，两个状态 A1 和 A2 的顶层（容器）层对应的属性定义是一致的，那么实例 a1 的对应属性覆盖会被保留在实例 a2 上，不论实例（容器）的图层名称是否一致。 例如： 组件集 BTN 的状态 color=white 和 color=green 的顶层（容器）层的填充都是黑色，把实例 color=white 的顶层填充修改为蓝色，当切换到状态 color=green 时，蓝色填充覆盖会保留下来。 相应的，如果不同状态对应的属性定义不一致，覆盖便不会保留。 这一点对使用组件集尤为重要，那些用于区分不同状态的属性定义会被保护起来，避免在使用实例时，对其中一个状态的属性修改在切换状态时污染其他状态的属性。 例如： 这个例子中，描边色用来区分两个状态，即使对其中一个状态的描边色进行覆盖，也不会影响其他状态的定义。
实例子图层	1、同名且同序时保留覆盖，即，需要同时满足： - 图层名称相同，区分大小写 - 且在所有同名图层中的图层索引顺序相同 图层索引顺序指，在图层树上，从外到内、从下到上，逐层遍历时图层的编号。 例如： 实例 btn 中有一个名为 text 的子图层，实例 menu 中有多个名为 text 的子图层，实例切换时，btn-text 的文本内容属性覆盖会保留在图层树上从外到内、从下到上索引到的第一个 menu-text 图层上，其他同名图层上则不会保留。 - 文本特例：当两个组件都只有一个文本图层时，不需要同名同序，也会保留覆盖。 2、绑定了同类型（显示状态、文本内容、实例切换、插槽）且名称相同的组件属性时保留覆盖。 例如： 组件 A 的子图层 layer123 绑定了名为“显示图层”的显示状态属性，组件 B 的子图层 layer456 也绑定了名为“显示图层”的显示状态属性，用户隐藏实例 a 的 layer123，此时从实例 a 切换到实例 b 时，layer456 也会被隐藏。 组件 A 的子图层 buttonText 绑定了名为“按钮文案”的文本内容属性，组件 B 的子图层 ctaText 也绑定了名为“按钮文案”的文本内容属性。 当用户将实例 a 中的 buttonText 修改为“立即购买”后，从实例 a 切换到实例 b 时，ctaText 的文案也会保持为“立即购买”。	1、同名同序且不同状态定义一致时保留覆盖，即，需要同时满足： - 图层名称相同，区分大小写 - 且在所有同名图层中的图层索引顺序相同 - 且不同状态的同名图层对应的属性定义一致 例如： 组件集 BTN 的状态 color=white 和 color=green 均包含一个名为 text 的黑色填充的文本图层，把实例 color=white 的图层 text 填充修改为蓝色，当实例切换到状态 color=green 时，蓝色文本填充会保留下来。 相应的，如果不同状态对应的属性定义不一致，覆盖便不会保留。

⚠️ 注意：遇到多层实例嵌套的组件时，遵循层级对应原则，例如：

• 对实例 a 的子图层 layer123 做属性覆盖，切换到 b 时，虽然 b 的嵌套子实例中有一个名为 layer123 的图层，但覆盖不会保留下来；

• 对于多层嵌套的组件集，选中哪一层切换状态时，就看对应层级的组件集中属性定义是否一致。

在下面这个例子中，虽然两种操作看上去都导致了 A 的状态切换，但上面操作是切换 ABC 的状态，所以要看 ABC 组件集中两个状态的 A 的填充是否一致，而下面操作是选中嵌套的 A 切换 A 的状态，所以要看 A 组件集中两个状态的 A 的填充是否一致。

暂存恢复机制说明

实例 a 切换到实例 b 时，实例 a 上未被保留到实例 b 的属性覆盖会被临时存储在内存中，切换回实例 a 时会自动恢复这些覆盖。

简单说就是，a 切到 b 再切回 a，a 还是切到 b 之前的样子，所有属性覆盖都不会丢失。

文件重新加载后，临时保存的数据会被清空。

哪些操作属于实例切换

1、选中实例 A，在右侧属性面板将实例 A 切换到实例 B

• 一般组件的实例切换

• 在组件集内切换到不同的组件状态

• 使用实例切换组件属性进行实例切换

2、从左侧组件列表拖出实例时，按住 opt/opt+cmd 替换画布上的实例

⚠️ 注意：使用 cmd+shift+r 粘贴替换实例不属于实例切换

设计系统维护最佳实践

• 规范组件子图层的命名，如果希望在组件之间传递对子图层的属性覆盖，相应的图层名称须保持一致。

• 在组件集内，那些不用来区分不同状态的属性定义应严格保持一致，否则即使图层名称一致，属性覆盖在切换状态时也不会被保留下来。

在这个例子中，两个按钮的状态的只是颜色的差异，错误的做法是在两个状态中分别使用了不同的图标，正确的做法是，两个状态使用相同的图标，推荐使用部带有场景含义的占位图标符。

进一步的，如果图标被封装成组件或组件集，强烈建议为 BTN 组件集的两个状态中嵌套的图标实例关联同一个实例切换组件属性，同时把这个嵌套的图标实例的属性暴露出来，这样便于在使用时切换图标，同时还可以确保切换按钮状态时图标不会被重置。

常见问题排查

现象	可能原因	解决方案
切换实例时文本内容覆盖丢失	目标实例存在多个文本图层且名称不匹配	统一子文本图层命名，确保希望保留覆盖的图层的索引顺序一致
切换组件状态时，换好的图标又变回去了	组件集不同状态中嵌套的图标不一致	如果不期望用不同图标区分不同状态组件的使用场景，请确保所有状态组件嵌套相同的图标
反复切换实例时，之前做的修改丢失了	浏览器缓存被清除，或文件被重新加载； 过程中的产生了新的覆盖且覆盖被保留了下来	尝试通过历史版本找回，避免刷新浏览器，随时复制一份关键改动出来

评价此篇文章：👍🏻 有帮助 👎🏻 无帮助

👉本篇文章对你是否有帮助？👍🏻 有帮助 👎🏻 无帮助，我们期待着你的反馈。