What｜什么是Master

翻译过来的名字叫：母版。
创建以后，可以在多个页面进行复用，比如做把Shellbar做成master，不同app都可以复用，只需在不同页面修改app的名字就可以了，如果master进行了调整，相应页面中的内容也会相应变化，减少重复工作。
很多相同的控件在不同页面里的绝对位置也是一致的，也可以通过master快速设置，而不用担心位置出现像素级别的偏差。

Why｜为什么使用master

  • 格式统一设置，master调整后，所有页面中用到的内容都会做相应调整，减少重复工作，减少因为重复工作带来错误率，从而提高效率。
  • Master创建好后，可以通过拼乐高的方式快速搭建页面。

How｜Create Master｜创建

方法1: 选中已有widgets生成master

把画布中现有的widgets选中，右键—>Create Master
输入master名字就好了，比如这个可以写shellbar。
image.png

方法2: 从0创建master

在master面板中直接点击Add Master, 创建好之后，双击打开master编辑页面进行master设计。
image.png

* 重要tips

为了后面使用master更方便，master里包含的widgets最好进行命名，每个widget给一个清晰的label。
image.png
把名称都写好后，当在页面中点击master时，右边就会就会显示可以改值的widgets，清晰的label可以帮助快速找到自己要改的widget。
如：Master里的App Name，就可以填写上自己需要的value，适应自己的项目。
image.png
image.png

Edit Master ｜编辑

1 双击进行编辑

双击master就会进入单独的编辑页面。

2 批量add to pages或remove from pages（实用）

右键点击想要操作的master，然后点击Add to Pages 或者Remove from Pages。快速有效的批量操作。
image.png
image.png

Master Views

用途

同一个master，还可以设置不同的master view，在使用master时，选择相应的master样式。
比如：
shellbar的master，可能会有disable或者各种状态，名字的颜色可能会不同，001的是白色，002 的是蓝色，003的是橙色。在使用master的时候，就可以在右边的操作框中选择使用不同的view
image.png
image.png
image.pngimage.png

Views之间的逻辑关系

另外，view之间有继承关系，所以是以hierarchy形式出现的。逻辑如下：
image.png
Primary Button (Base) > Secondary Button > Text Link Button

  • Edits made in the Primary Button view would be reflected in both the Secondary Button and Text Link Button views as well.
  • Edits made in the Secondary Button view would be reflected in the Text Link Button view but not in the Primary Button view.
  • Edits made in the Text Link Button view would only affect that view.

image.png

  • Turquoise: The view currently displayed on the canvas. Edits will affect this view.
  • Yellow: A child of the view currently displayed on the canvas. Edits will affect this view.
  • Grey: A parent of the view currently displayed on the canvas. Edits will not affect this view.
  • Green: The Affect All Views checkbox is checked. Edits will affect all views.

如何设置

右边的style面板中有Edit Master Views button，点开后可以add或delete view，切换到不同的view时，编辑style里的样式就可以了（示例如下）。
image.png
image.png
比如切换到02后， 就可以选中App Name，然后进行样式编辑。
image.png

Interactions

Master内部交互

按照正常做交互动效的方式做就可以了，但是所有的交互效果都发生在这一个master内部，而不能与master外部的widgets产生关系。

Master与所在页面交互

Master一般会应用到很多页面，同一master与不同页面里widgets的交互肯定也是不同的。此时不能直接建立master与页面widgets之间的联系，需要现在master里建立一个类似转接口的部分。

示例

Shellbar里面有GoBack的icon button，需要实现master在不同页面里面，点击这个icon进行页面跳转。

  1. 进入到ShellBar master的edit mode，选中GoBack button, 右边切换到Interactions 操作区域，点击New Interaction，选择要操作的样式（比如此处选择Click or Tap），然后找到最下面的Raise Event。

image.png

image.png

  1. 此处添加自己想要做的操作并命名，如OnClickToGoBack，此处命名的目的是为了在页面里快速找到自己在master定义的接口。

image.png image.png

  1. 回到页面，点击Shellbar 的master，点击右边的New Interaction， 刚刚设置的event就会出现，接下来就可以做具体的交互了。这样，在不同的的页面，点击GoBack这个button可以根据情况设置不同的交互方式。

image.png
image.png
image.png

高级设置

电脑左上角的Preferences里勾选：转化为master时直接创建master不需命名。
image.png