组件模板
创建和使用可复用的交互组件模板
组件模板是 Adseed 中的高级功能，允许您将一组图层、事件和音频封装为一个可复用的交互模块。创建一次模板后，可以在多个页面中反复使用，修改模板时所有实例自动同步更新。适用于按钮组、弹窗、导航栏等需要多处复用的交互组件。
模板与实例
理解模板和实例的关系是使用组件模板的关键：
模板（Template）
模板是组件的蓝图定义，包含以下内容：
- 图层结构 — 模板内部的所有组件层级
- 事件配置 — 模板内部的交互逻辑
- 音频资源 — 模板内部使用的音频
- 默认尺寸 — 模板放置到舞台时的初始宽高
实例（Instance）
实例是放置在舞台上的模板副本。每个实例通过模板 ID 引用原始模板定义。
- 修改模板 → 所有引用该模板的实例自动更新
- 每个实例可以独立调整位置、大小、旋转等通用属性
- 实例内部的图层和事件由模板统一控制
修改模板内容后，所有使用该模板的实例都会同步更新。请在修改前确认影响范围，避免意外改动其他页面中的内容。
组件属性
选中组件模板实例后，右侧属性面板会显示以下属性：
| 属性 | 说明 | 默认值 |
|---|---|---|
| 默认宽度 | 模板放置到舞台时的初始宽度（像素） | 400 |
| 默认高度 | 模板放置到舞台时的初始高度（像素） | 200 |
| 名称 | 模板的显示名称，方便在素材库和图层列表中识别 | 空 |
| 标签 | 模板的标签文本，用于在事件系统中定位该组件 | 空 |
| 缩略图 | 模板的预览缩略图，用于在素材面板中展示 | 自动生成 |
创建模板
进入组件模板编辑模式
在工作室中点击进入 组件模板 编辑区域，或者选中已有的组件后将其转换为模板。
添加图层和内容
在模板编辑模式下，像在普通画布中一样添加图片、文本、容器等组件，构建模板的视觉结构。
配置内部事件
为模板内的组件添加交互事件。例如为按钮添加点击动画、为弹窗添加打开/关闭逻辑。
保存模板
完成编辑后保存模板。模板会出现在素材面板的组件模板列表中，可以随时拖入任意页面使用。
标签作用域隔离
组件模板内部和主舞台使用不同的标签前缀，确保两者的标签系统互不干扰。
| 作用域 | 标签前缀 | 说明 |
|---|---|---|
| 主舞台 | tag: | 在主舞台上为组件设置的标签 |
| 组件模板内部 | tagComponent: | 在组件模板内部为组件设置的标签 |
这意味着：
- 模板内部的事件只能通过
tagComponent:前缀访问模板内部的组件 - 主舞台的事件只能通过
tag:前缀访问主舞台上的组件 - 两者互不影响，即使标签名称相同也不会冲突
标签作用域隔离确保了组件模板的独立性。在模板内部设置的标签不会意外影响到主舞台上的组件，反之亦然。更多关于标签的使用方法请参考标签系统。
内部事件系统
组件模板拥有独立的事件系统，与主舞台的事件系统隔离。
- 模板内部的事件只在模板范围内生效
- 模板内部的自动事件在模板实例所在页面加载时触发
- 模板内部的交互事件（如点击）仅响应模板区域内的用户操作
这种隔离机制确保了模板的可移植性——无论将模板放置在哪个页面，其内部行为都是一致的。
使用场景
可复用按钮
将按钮的背景、文字、点击动画和音效封装为一个模板。在不同页面中放置该模板实例，所有按钮保持统一的样式和交互效果。
弹窗组件
将弹窗的背景遮罩、内容区域、关闭按钮和动画效果封装为模板。需要弹窗的地方直接使用实例即可。
导航栏
将顶部或底部导航栏封装为模板，在每个页面中放置实例。修改导航样式时只需编辑模板，所有页面的导航栏自动更新。
动态生成
组件模板实例可以在运行时通过事件系统的 generateLayer 动作动态创建。这意味着您可以根据用户的操作在画面上动态添加组件模板实例，适用于需要动态生成内容的高级交互场景。
这个页面有帮助吗？