← 返回动态组件组件参考 · 全部使用指导

动态组件使用指导

• 动态组件使用指导
  • 要点
  • 快速上手：按数据生成一排按钮
  • 用模板一次创建一张卡片
  • 搭建与测试
  • 属性、方法与事件速查
  • 常见问题与验收
  • 完整 .aia 源码与操作指导
    • 巡检表单与设备资料卡
  • 先运行这个实际案例

不可见组件：在程序运行时创建组件——按钮、标签、布局……任何组件都可以，拓展组件也可以； 还能设置属性、调用方法、删除、调整顺序、移到别的布局，或用 JSON 模板一次创建一批。 适合组件个数由数据决定的界面：问卷的题目、购物车的商品、聊天气泡等。

本组件内化自第三方拓展 DynamicComponents（作者 Yusuf Cihan，MIT 许可证），积木与原拓展一致。

先看是不是用布局列表框更合适：只是「一行一条数据」的列表或网格，用布局列表框更省事， 数据绑定、点击事件都是现成的，而且滚动时组件会复用，数据再多也不卡。

要点

• 每个动态组件创建时给一个编号（文本，不能重复），之后用编号取回、删除它；不关心编号时用生成编号（GenerateID）。
• 组件只能创建在布局（或画布）里，不能直接创建在屏幕上，所以先在设计器里放一个空的布局当容器。
• 组件类型写英文类型名，如 Button、Label、HorizontalArrangement；也可以传一个现有组件（创建同类型的新组件，拓展组件用这种办法）。
• 动态组件的事件用「任意组件」积木接：在代码块编辑器左侧「任意组件」里拖出如「任意按钮.被点击」， 事件参数 component 就是被点的那个按钮，再用取编号（组件）（GetId）知道是哪一个。

快速上手：按数据生成一排按钮

设计器里放一个垂直布局 垂直布局_容器：

各案例独立使用；组合到同一屏幕时，将同名事件的处理合并到一个事件积木中。

global fruits = ["苹果", "香蕉", "橙子"]

when Screen1.Initialize() {
  foreach name in fruits {
    动态组件1.Create(垂直布局_容器, "Button", name)
    动态组件1.SetProperty(动态组件1.GetComponent(name), "Text", join("买", name))
  }
}

when 按钮_清空.Click() {
  foreach name in fruits {
    动态组件1.Remove(name)
  }
}

这些按钮是运行时才有的，设计器里没有它们的「被点击」积木，用「任意按钮.被点击」接事件， component 就是被点的那个按钮，用取编号（组件）（GetId）知道是哪一个（这里编号就是水果名）：

when any Button.Click(component, notAlreadyHandled) {
  var fruit = 动态组件1.GetId(component)
  if fruit != "" {
    标签1.Text = join("已加入购物车：", fruit)
    any Button(component).Enabled = false
  }
}

用模板一次创建一张卡片

模板是 JSON：components 里每个组件写 id、type、properties，可以用 components 嵌套子组件； keys 列出占位符，{名字} 会被参数列表里对应的值替换：

when 按钮_添加.Click() {
  动态组件1.Schema(垂直布局_容器, 文本输入框_模板.Text, [文本输入框_标题.Text])
}

文本输入框_模板 里的模板示例：

{
  "metadata-version": "1",
  "name": "card",
  "keys": ["title"],
  "components": [
    {"id": "card_{title}", "type": "HorizontalArrangement", "properties": {"BackgroundColor": "&HFFE3F2FD"},
     "components": [
       {"id": "label_{title}", "type": "Label", "properties": {"Text": "{title}", "FontSize": "18"}}
     ]}
  ]
}

搭建与测试

在设计器拖入本组件和案例涉及的按钮、标签、布局等组件，按案例中的名称重命名。先运行最小案例，确认事件返回，再增加业务逻辑。示例中的素材先上传到项目，服务器地址、令牌、文件路径换成自己的值。

可见组件需要有非零宽高；不可见工具组件必须由属性或方法启动。设计器展示样式不等于运行时已加载数据或绑定目标。联机测试应使用包含本组件的 AI 伴侣；涉及系统入口或权限的行为还要编译安装后验证。

属性、方法与事件速查

完整参数类型、默认值和平台说明见组件参考。下表按调用入口列出用途；有完成事件的方法在事件中读取结果。

常见问题与验收

完整 .aia 源码与操作指导

下载 .aia 源码

用动态组件搭建一份可填写和保存的巡检表单。上方是真实动态输入框和设备资料卡，主界面只保留创建、保存、查看记录与添加资料卡；编号管理和接口细节在“表单管理与高级设置”中。

巡检表单与设备资料卡

导入方法：项目 → 导入项目（.aia）→ 选择下载的 .aia 源码文件。 创建可实际填写的巡检输入框，保存内容和时间，重新打开查看上次记录；设备资料卡按模板添加并可点击查看详情。编号、移动、排序等管理功能收进高级设置。 覆盖检查 30/30，正式编辑器首次载入和保存重开均零错误，后台导入与安装包编译通过。真机／伴侣尚未实测。

先运行这个实际案例

1. 点击“创建巡检输入框”，在上方输入框填写记录，再点“保存当前巡检记录”。
2. 重新打开案例，点“查看上次保存记录”，核对保存时间和内容。动态界面重新创建，本地记录保留。
3. 输入资料标题，点“添加设备资料卡”，点击卡片按钮查看实际编号和文字。
4. 打开高级设置再学习动态按钮、移动、排序、改名和删除。

高级面板默认收起，原完整功能入口仍可打开使用。源码为中文app.json和Screen1.ai-blocks，AIA包含全部素材和完整积木。正式编辑器、后台导入及安装包检查以更新后的最终归档报告为准；真机／伴侣尚未实测。

所有返回值均用于界面反馈，错误由底部错误区展示。设计器采用明确非默认配置，初始化与界面同步。API 覆盖检查按最终 AIA 检查方法、事件、属性读取与设置及设计器配置，不能替代真实设备验证。