在组件设计模式拖拽组件设计应用的界面，称为静态组件设计。而在逻辑设计模式使用代码块创建可见组件，则称为动态组件设计。对于初学者来说，静态组件设计简单又直观，上手很容易。深入学习 ai 后，就会发现，静态组件设计有很大的局限性：
一、界面不能根据数据动态调整。例如我们做个简单的聊天应用，聊天列表显然就不能用静态组件设计，联系人列表也不能用静态组件设计。如下是使用ai制作的仿微信聊天界面：
仿微信聊天界面
因为 ai 的列表显示框不能显示图片，也没有这2种列表显示组件，事实上 ai 也不可能提供更多形形色色的列表显示组件。如何显示带图片和文字的列表呢？自己制作一个也很容易，在垂直滚动条布局里面放入多个水平布局，每个水平布局里面又放入图像框和标签即可。组件的间距可通过插入空文本的标签来实现，也可以使用相应的扩展设置组件的间距边框。
示例在聊天界面添加了“文件传输助手”，还有更多的聊天会话又如何添加呢？
二、静态组件设计复杂导致应用启动慢。这个比较好理解，手机的内存和CPU资源都有限，设计视图摆出的组件，不管是否显示，都会实实在在消耗手机的资源。就像房间里摆满物品，自然就让房间拥挤导致活动不便。
拥挤的房间
三、重复拖拽大量组件繁琐且容易出错。例如我们做个4x4的水果配对，拖拽出16个按钮来放水果？如果你重复拖拽出16个按钮，就意味在你需要设置16个按钮的属性，在逻辑设计中检查16xN次按钮的设置是否正确。如果是制作8x8的水果配对，难道还要拖出64个按钮吗？
错误示范
合格的开发者都不会这样做，软件设计基本原则之 —— DRY（Don't Repeat Yourself）。你不应该做重复的工作，这是程序的功能。开发者应该将重复的逻辑抽象成函数，再使用循环等逻辑块去实现。如果违背这个原则，每处改动都需要相应地重复改动多处，程序出错的机会将会成倍地增加。
WxBit 汉化增强版首推全功能的动态组件和事件回调机制，彻底解决上述弊端。
如何使用动态组件设计水果配对的界面呢？简单如斯：
动态生成水果面板
① 定义函数“生成水果面板”，点击左边的蓝色齿轮，增加函数的参数“一排水果的数量”。这个参数，控制所生成水果面板的大小。
② 定义局部变量“水果的大小”，设置为屏幕宽度除以每排水果的数量，也就是让水果面板的宽度与屏幕宽度相等。
③ 循环生成每一排的水果图片，即创建指定数量的水果容器。
④ 调用屏幕的创建水平布局，生成一排水果的容器，将容器（水平布局）放入局部变量“一排水果”中。
⑤ 调用水果容器（水平布局）的创建图像框，生成一个水果。图像框和按钮一样支持“点击”等事件，因此可以替代按钮使用。
⑥ 从“任意组件”的“任意图像框”菜单中拖出图像框的属性设置块，将“图片”设置为默认水果卡片。使用素材时应该用“素材路径”块，避免手工输入素材文件名字出错。
⑦ 将图像框的宽度和高度设置为“水果的大小”变量。
使用参数“8”调用“生成水果面板”：
动态生成的水果面板
生成水果卡片后，如何能够在用户点击时翻开（更换图像框的图片）呢？
事件的三种定义方法
① 单独事件定义：仅适用于静态组件的事件定义，在逻辑设计视图，点击组件的名称，从浮出菜单中将事件定义块拖拽到工作面板。每个组件的事件，仅可以定义一次。
② 事件回调定义：适用于静态组件和动态组件，在逻辑设计视图的“任意组件”菜单下面。对某个组件设置事件回调函数后，该组件的单独事件定义失效，如需重新使用组件的单独事件定义，调用“删除回调函数”块。
③ 通用事件定义：适用于静态组件和动态组件，对某类组件定义事件处理方法，当这类组件产生对应事件时，事件定义中的代码块被运行。如果某个组件有单独事件定义或者事件回调定义，则“是否未单独处理”为逻辑“假”。
有两种方法处理水果卡片（动态组件）的点击事件：
1、通用事件定义：拖出“任意图像框”菜单中的“当某个图像框 被点击”事件，当某个图像框（水果）被点击时，该事件块的代码将被运行。事件有2个局部变量，其中“组件”为当前被点击的图像框。如果该图像框没有定义点击事件则“是否未单独处理”为逻辑“真”，否则为“假”。
2、事件回调定义：给每一个图像框设置“被点击”事件的回调函数，当该图像框（水果）被点击时，回调函数将被运行。设置组件的事件回调函数，也就是为该组件定义了事件，事件回调函数优先于组件的单独事件定义。
两种事件定义方法
因本篇重点不是介绍水果配对游戏的制作，回调函数没有完整实现，设置水果卡片的用法如下：
内联定义事件回调函数
如果回调函数的逻辑块比较多，则应该将回调函数放到外面单独定义：
单独定义事件回调函数
单独定义的函数，第一个参数“组件”为触发事件的当前组件，在这里是图像框。也可以直接将函数参数重命名为“水果”，使用起来更加直观。函数的参数必须与事件的参数一致，否则将出现错误。单独定义回调函数时，函数的参数参考通用事件块，除去“是否未单独处理”变量。
本文前面介绍了ai制作的仿微信聊天界面，请读者参考“文件传输助手”的结构，使用动态组件技术，完成动态显示聊天会话的功能。使用浏览器打开展厅链接获取练习项目：https://app.wxbit.com/?galleryId=61617
原文链接：App Inventor 进阶：动态组件与事件，转载请注明来源！