App Inventor 2 动态创建组件与布局教程

一、什么是动态创建组件？
- 典型适用场景
二、方案对比：如何实现动态创建？
三、Dynamic Components 扩展介绍
四、基础操作：创建按钮和标签
- 4.1 动态创建一个按钮
- 4.2 动态创建标签和文本框
五、动态组件的事件处理
六、动态创建布局容器
- 6.1 创建不同类型的布局
- 6.2 嵌套布局
七、循环创建列表项
- 处理列表项的点击事件
八、动态删除组件
九、实战案例：动态问卷调查
十、常见问题与注意事项
十一、扩展阅读与资源

一、什么是动态创建组件？

在 App Inventor 2 中，通常情况下你需要先在设计视图中拖放组件（按钮、标签、文本框等），然后在逻辑视图中编写它们的交互逻辑。这种方式称为静态布局——组件在应用启动时就已经确定。

然而，在很多实际场景中，你无法提前预知界面上需要多少个组件，或者需要根据用户的操作即时生成新的界面元素。这时就需要动态创建组件——在程序运行时，通过代码块来创建新的组件实例，并添加到界面中。

典型适用场景

场景	说明
待办事项列表	用户每添加一个任务，就动态创建一个新的复选框+标签行
动态表单	根据用户选择的选项，生成不同数量的输入框
购物车	每件商品对应一个动态创建的商品卡片
聊天消息流	每条新消息都是一个动态创建的布局块
成绩单/报表	根据数据条目动态生成行和列的网格
图片轮播	根据服务器返回的图片URL列表，动态创建多个图片组件

二、方案对比：如何实现动态创建？

在 App Inventor 2 中，实现动态创建组件主要有以下几种方案：

方案一：使用 MIT 官方 Dynamic Components 扩展

官方扩展，由 MIT 的 CML（Center for Mobile Learning）团队维护。这是目前最推荐的方式。

优点：官方维护、功能完整、支持事件绑定、支持多种组件类型
缺点：需要导入 .aix 扩展文件
适用：大多数动态创建场景

方案二：使用 Taifun 的扩展（TaifunDW）

社区开发者 Taifun 提供的扩展，功能同样强大。

优点：社区成熟、文档丰富
缺点：第三方扩展，依赖个人维护
适用：需要额外扩展功能时

方案三：预置可见组件 + 数据源控制

不真正动态创建组件，而是预先在设计中放置足够数量的组件（如标签、布局），通过改变它们的 Visible 属性和文本内容来模拟动态效果。

优点：无需任何扩展，纯原生功能
缺点：组件数量固定、不够灵活、代码冗长
适用：只需要少量变化且组件数量可预估的场景

方案四：使用ListView的动态条目

利用 ListView 组件的 Elements 属性，通过后端数据驱动列表显示。

优点：自带滚动、无需扩展、性能好
缺点：只能显示列表，无法自定义复杂布局
适用：简单的文本列表场景

三、Dynamic Components 扩展介绍

3.1 下载与导入

下载地址：在 MIT App Inventor 的扩展管理页面中搜索 “DynamicComponents” 即可找到。扩展由 MIT CML 团队开发并托管。

导入步骤：

打开 MIT App Inventor 2 编辑器
点击菜单栏 Extensions（扩展）
选择 Import extension（导入扩展）
在弹出的 URL 输入框中输入扩展的 .aix 文件地址，或从本地选择 .aix 文件
导入成功后，在组件面板的 Extension（扩展） 下会出现 DynamicComponents 组件

3.2 核心方法概览

DynamicComponents 扩展提供了以下几类方法：

组件创建类：

方法	说明
`CreateComponent(componentType, componentName)`	创建一个指定类型的组件
`MakeLayout(componentType, componentName)`	创建一个布局容器
`CreateComponentInLayout(componentType, componentName, layout)`	在指定布局内创建组件

属性设置类：

方法	说明
`SetPropertyOfComponent(component, propertyName, propertyValue)`	设置组件的属性
`GetPropertyOfComponent(component, propertyName)`	获取组件的属性值

事件绑定类：

方法	说明
`AddComponentToLayout(component, layout)`	将组件添加到布局中
`ComponentClicked(component)`	当动态组件被点击时触发的事件
`ComponentLongClicked(component)`	当动态组件被长按时触发的事件
`ComponentGotFocus(component)`	当动态组件获得焦点时触发的事件
`ComponentLostFocus(component)`	当动态组件失去焦点时触发的事件

组件管理类：

方法	说明
`DeleteComponent(component)`	删除动态创建的组件
`DeleteAllComponentsInLayout(layout)`	删除布局中的所有动态组件
`Clear()`	清除所有动态组件
`GetComponents()`	获取所有动态组件的列表

3.3 支持的组件类型

DynamicComponents 支持以下组件类型的动态创建：

基础组件：Button（按钮）、Label（标签）、TextBox（文本框）、PasswordTextBox（密码框）、Image（图片）
容器组件：HorizontalArrangement（水平布局）、VerticalArrangement（垂直布局）、TableArrangement（表格布局）
交互组件：CheckBox（复选框）、Switch（开关）、Slider（滑块）、ListPicker（列表选择器）
媒体组件：Image（图片）

四、基础操作：创建按钮和标签

4.1 动态创建一个按钮

假设你想在用户点击”添加按钮”后，动态创建一个新的按钮并添加到屏幕上。

步骤 1：准备布局

在设计视图中放置：

一个 Button，名为 AddButton，文字设为”添加按钮”
一个 VerticalArrangement，名为 MainLayout，作为动态组件的容器

步骤 2：编写逻辑

当 AddButton.Click 执行
    // 创建一个新的按钮组件
    调用 DynamicComponents.CreateComponent
        组件类型："Button"
        组件名称：拼接 "btn_" 和 当前时间戳
    // 将创建好的组件保存到变量
    设 变量 newButton 为 返回值

    // 设置新按钮的属性
    调用 DynamicComponents.SetPropertyOfComponent
        组件：newButton
        属性名："Text"
        属性值："我是动态按钮"

    调用 DynamicComponents.SetPropertyOfComponent
        组件：newButton
        属性名："Width"
        属性值：-2  （表示自动适配内容）

    调用 DynamicComponents.SetPropertyOfComponent
        组件：newButton
        属性名："Height"
        属性值：-2

    // 将按钮添加到布局中
    调用 DynamicComponents.AddComponentToLayout
        组件：newButton
        布局：MainLayout

4.2 动态创建标签和文本框

当 btnAddField.Click 执行
    // 创建一个水平布局来容纳 标签 + 输入框
    调用 DynamicComponents.MakeLayout
        组件类型："HorizontalArrangement"
        组件名称：拼接 "row_" 和 全局计数变量
    设 变量 rowLayout 为 返回值

    // 设置行布局的属性（宽度填充、高度自动）
    调用 DynamicComponents.SetPropertyOfComponent
        组件：rowLayout
        属性名："Width"
        属性值：-1  （-1 表示填充父容器）

    调用 DynamicComponents.SetPropertyOfComponent
        组件：rowLayout
        属性名："Height"
        属性值：-2

    // 在行布局中创建标签
    调用 DynamicComponents.CreateComponentInLayout
        组件类型："Label"
        组件名称：拼接 "lbl_" 和 全局计数变量
        布局：rowLayout
    设 变量 label 为 返回值

    调用 DynamicComponents.SetPropertyOfComponent
        组件：label
        属性名："Text"
        属性值：拼接 "字段 " 和 全局计数变量

    // 在行布局中创建文本框
    调用 DynamicComponents.CreateComponentInLayout
        组件类型："TextBox"
        组件名称：拼接 "txt_" 和 全局计数变量
        布局：rowLayout
    设 变量 textBox 为 返回值

    调用 DynamicComponents.SetPropertyOfComponent
        组件：textBox
        属性名："Width"
        属性值：-1

    // 将行布局添加到主容器
    调用 DynamicComponents.AddComponentToLayout
        组件：rowLayout
        布局：MainLayout

    // 计数加1
    设 全局计数变量 为 全局计数变量 + 1

提示：组件的 Width 和 Height 属性值遵循 App Inventor 2 的约定：

-1 = 填充父容器（Fill parent）

-2 = 自动适配内容（Automatic）

其他正值 = 以像素为单位的固定尺寸

五、动态组件的事件处理

动态创建的组件需要绑定事件，这是 DynamicComponents 扩展的核心功能之一。

5.1 点击事件

// 按钮创建后，当用户点击它时触发
当 DynamicComponents.ComponentClicked
    组件：clickedComponent
执行
    // 获取被点击组件的属性
    调用 DynamicComponents.GetPropertyOfComponent
        组件：clickedComponent
        属性名："Text"
    设 变量 componentText 为 返回值

    // 执行对应的操作
    调用 Notifier.ShowAlert
        通知：拼接 "你点击了：" componentText

5.2 长按事件

当 DynamicComponents.ComponentLongClicked
    组件：longClickedComponent
执行
    // 长按时删除该组件
    调用 DynamicComponents.DeleteComponent
        组件：longClickedComponent

5.3 焦点事件（适用于文本框）

当 DynamicComponents.ComponentGotFocus
    组件：focusedComponent
执行
    // 获取组件类型
    调用 DynamicComponents.GetPropertyOfComponent
        组件：focusedComponent
        属性名："Type"
    设 变量 compType 为 返回值

    如果 compType = "TextBox" 则
        调用 Notifier.ShowAlert
            通知："文本框获得了焦点"

5.4 使用组件名称来区分不同组件

在实际开发中，你通常需要根据组件的名称（在创建时设定的唯一标识）来执行不同的逻辑。

当 DynamicComponents.ComponentClicked
    组件：clickedComponent
执行
    调用 DynamicComponents.GetPropertyOfComponent
        组件：clickedComponent
        属性名："Name"
    设 变量 compName 为 返回值

    // 根据名称前缀判断
    如果 startsWith(compName, "btn_") 则
        调用 Notifier.ShowAlert
            通知："按钮被点击"
    否则如果 startsWith(compName, "lbl_") 则
        调用 Notifier.ShowAlert
            通知："标签被点击"
    否则如果 startsWith(compName, "chk_") 则
        // 处理复选框
        调用 DynamicComponents.GetPropertyOfComponent
            组件：clickedComponent
            属性名："Checked"
        设 变量 isChecked 为 返回值
        调用 Notifier.ShowAlert
            通知：拼接 "复选框状态：" isChecked

六、动态创建布局容器

布局容器的动态创建是实现复杂动态界面的基础。

6.1 创建不同类型的布局

// 创建垂直布局（从上到下排列）
当 btnCreateVertical.Click 执行
    调用 DynamicComponents.MakeLayout
        组件类型："VerticalArrangement"
        组件名称："myVerticalLayout"
    设 变量 verticalLayout 为 返回值

    调用 DynamicComponents.SetPropertyOfComponent
        组件：verticalLayout
        属性名："Width"
        属性值：-1

    调用 DynamicComponents.SetPropertyOfComponent
        组件：verticalLayout
        属性名："Height"
        属性值：-2


// 创建水平布局（从左到右排列）
当 btnCreateHorizontal.Click 执行
    调用 DynamicComponents.MakeLayout
        组件类型："HorizontalArrangement"
        组件名称："myHorizontalLayout"
    设 变量 horizontalLayout 为 返回值

    // 设置子组件的对齐方式
    调用 DynamicComponents.SetPropertyOfComponent
        组件：horizontalLayout
        属性名："AlignVertical"
        属性值：1  （1 = 居中对齐）


// 创建表格布局
当 btnCreateTable.Click 执行
    调用 DynamicComponents.MakeLayout
        组件类型："TableArrangement"
        组件名称："myTableLayout"
    设 变量 tableLayout 为 返回值

    调用 DynamicComponents.SetPropertyOfComponent
        组件：tableLayout
        属性名："Columns"
        属性值：3

    调用 DynamicComponents.SetPropertyOfComponent
        组件：tableLayout
        属性名："Rows"
        属性值：4

    调用 DynamicComponents.SetPropertyOfComponent
        组件：tableLayout
        属性名："Width"
        属性值：-1

6.2 嵌套布局

通过布局嵌套，可以创建更复杂的界面结构。

// 先创建一个垂直布局作为最外层容器
调用 DynamicComponents.MakeLayout
    组件类型："VerticalArrangement"
    组件名称："outerLayout"
设 变量 outerLayout 为 返回值

调用 DynamicComponents.SetPropertyOfComponent
    组件：outerLayout
    属性名："Width"
    属性值：-1

// 在垂直布局中创建一个水平布局行
调用 DynamicComponents.CreateComponentInLayout
    组件类型："HorizontalArrangement"
    组件名称："row1"
    布局：outerLayout
设 变量 row1 为 返回值

// 在水平布局中添加两个按钮
调用 DynamicComponents.CreateComponentInLayout
    组件类型："Button"
    组件名称："btnA"
    布局：row1
设 变量 btnA 为 返回值

调用 DynamicComponents.SetPropertyOfComponent
    组件：btnA
    属性名："Text"
    属性值："按钮A"

调用 DynamicComponents.CreateComponentInLayout
    组件类型："Button"
    组件名称："btnB"
    布局：row1
设 变量 btnB 为 返回值

调用 DynamicComponents.SetPropertyOfComponent
    组件：btnB
    属性名："Text"
    属性值："按钮B"

// 再创建第二行
调用 DynamicComponents.CreateComponentInLayout
    组件类型："HorizontalArrangement"
    组件名称："row2"
    布局：outerLayout
设 变量 row2 为 返回值

调用 DynamicComponents.CreateComponentInLayout
    组件类型："Label"
    组件名称："descLabel"
    布局：row2
设 变量 descLabel 为 返回值

调用 DynamicComponents.SetPropertyOfComponent
    组件：descLabel
    属性名："Text"
    属性值："这是第二行的描述"

// 将整个外层布局添加到主界面
调用 DynamicComponents.AddComponentToLayout
    组件：outerLayout
    布局：MainLayout

七、循环创建列表项

最常见的动态创建场景是生成列表。以下示例展示了如何根据数据列表动态生成一组卡片式的布局。

// 假设我们有一个待办事项列表
// 数据源：一个包含多个事项的列表
全局变量 todoItems：["买牛奶", "交房租", "复习数学", "锻炼身体"]

当 Screen1.Initialize 执行
    // 遍历列表，为每项生成一个卡片
    对于 each item 在 列表 todoItems
        执行
            调用 创建任务卡片
                参数：item


过程 创建任务卡片(任务描述)
    // 创建一个水平布局作为卡片容器
    调用 DynamicComponents.MakeLayout
        组件类型："HorizontalArrangement"
        组件名称：拼接 "card_" item
    设 变量 cardLayout 为 返回值

    // 设置卡片样式（宽度填充、固定高度50dp）
    调用 DynamicComponents.SetPropertyOfComponent
        组件：cardLayout
        属性名："Width"
        属性值：-1

    调用 DynamicComponents.SetPropertyOfComponent
        组件：cardLayout
        属性名："Height"
        属性值：50

    调用 DynamicComponents.SetPropertyOfComponent
        组件：cardLayout
        属性名："BackgroundColor"
        属性值：&HFFE8E8E8  （浅灰色背景）

    // 在卡片中创建复选框
    调用 DynamicComponents.CreateComponentInLayout
        组件类型："CheckBox"
        组件名称：拼接 "chk_" item
        布局：cardLayout
    设 变量 checkbox 为 返回值

    调用 DynamicComponents.SetPropertyOfComponent
        组件：checkbox
        属性名："Width"
        属性值：-2

    // 在卡片中创建标签显示任务描述
    调用 DynamicComponents.CreateComponentInLayout
        组件类型："Label"
        组件名称：拼接 "lbl_" item
        布局：cardLayout
    设 变量 label 为 返回值

    调用 DynamicComponents.SetPropertyOfComponent
        组件：label
        属性名："Text"
        属性值：item

    调用 DynamicComponents.SetPropertyOfComponent
        组件：label
        属性名："Width"
        属性值：-1  （填充剩余空间）

    // 在卡片中创建删除按钮
    调用 DynamicComponents.CreateComponentInLayout
        组件类型："Button"
        组件名称：拼接 "del_" item
        布局：cardLayout
    设 变量 deleteBtn 为 返回值

    调用 DynamicComponents.SetPropertyOfComponent
        组件：deleteBtn
        属性名："Text"
        属性值："✕"

    调用 DynamicComponents.SetPropertyOfComponent
        组件：deleteBtn
        属性名："Width"
        属性值：-2

    调用 DynamicComponents.SetPropertyOfComponent
        组件：deleteBtn
        属性名："BackgroundColor"
        属性值：&HFFFF4444  （红色）

    调用 DynamicComponents.SetPropertyOfComponent
        组件：deleteBtn
        属性名："TextColor"
        属性值：&HFFFFFFFF  （白色）

    // 将卡片添加到主布局
    调用 DynamicComponents.AddComponentToLayout
        组件：cardLayout
        布局：TaskListLayout

处理列表项的点击事件

// 复选框勾选 - 标记任务完成
当 DynamicComponents.ComponentClicked
    组件：clickedComponent
执行
    调用 DynamicComponents.GetPropertyOfComponent
        组件：clickedComponent
        属性名："Name"
    设 变量 compName 为 返回值

    // 判断是不是复选框
    如果 startsWith(compName, "chk_") 则
        调用 DynamicComponents.GetPropertyOfComponent
            组件：clickedComponent
            属性名："Checked"
        设 变量 isChecked 为 返回值

        // 获取对应的标签
        调用 DynamicComponents.GetPropertyOfComponent
            组件：clickedComponent
            属性名："Text"  （这是复选框的标签文字）
        设 变量 taskName 为 返回值

        如果 isChecked = true 则
            调用 Notifier.ShowAlert
                通知：拼接 "√ 已完成：" taskName
        否则
            调用 Notifier.ShowAlert
                通知：拼接 "○ 未完成：" taskName


// 删除按钮 - 删除任务
当 DynamicComponents.ComponentClicked
    组件：clickedComponent
执行
    调用 DynamicComponents.GetPropertyOfComponent
        组件：clickedComponent
        属性名："Name"
    设 变量 compName 为 返回值

    如果 startsWith(compName, "del_") 则
        // 获取被删除组件的父布局
        调用 DynamicComponents.GetPropertyOfComponent
            组件：clickedComponent
            属性名："Parent"
        设 变量 parentLayout 为 返回值

        // 删除整个卡片（父布局）
        调用 DynamicComponents.DeleteComponent
            组件：parentLayout

八、动态删除组件

8.1 删除单个组件

当 btnDeleteComponent.Click 执行
    // 删除最后添加的那个组件
    调用 DynamicComponents.GetComponents
    设 变量 allComponents 为 返回值

    // 获取组件总数
    设 变量 count 为 获取列表长度 allComponents

    如果 count > 0 则
        // 获取最后一个组件
        设 变量 lastComponent 为 选择列表项 allComponents 索引 count

        // 删除它
        调用 DynamicComponents.DeleteComponent
            组件：lastComponent
    否则
        调用 Notifier.ShowAlert
            通知："没有可删除的组件"

8.2 清空布局

当 btnClearLayout.Click 执行
    // 删除 MainLayout 中的所有动态组件
    调用 DynamicComponents.DeleteAllComponentsInLayout
        布局：MainLayout

8.3 根据条件删除

当 btnDeleteChecked.Click 执行
    调用 DynamicComponents.GetComponents
    设 变量 allComponents 为 返回值

    // 遍历所有组件
    对于 each component 在 列表 allComponents
        执行
            调用 DynamicComponents.GetPropertyOfComponent
                组件：component
                属性名："Type"
            设 变量 compType 为 返回值

            // 如果是复选框，检查是否勾选
            如果 compType = "CheckBox" 则
                调用 DynamicComponents.GetPropertyOfComponent
                    组件：component
                    属性名："Checked"
                设 变量 isChecked 为 返回值

                如果 isChecked = true 则
                    调用 DynamicComponents.GetPropertyOfComponent
                        组件：component
                        属性名："Parent"
                    设 变量 parentLayout 为 返回值

                    // 删除父布局（整个卡片）
                    如果 parentLayout 不等于 空 则
                        调用 DynamicComponents.DeleteComponent
                            组件：parentLayout

重要提醒：当你在遍历过程中删除组件时，建议从后往前遍历，或者先收集要删除的组件再统一删除，以避免索引错乱的问题。

九、实战案例：动态问卷调查

让我们将以上知识综合起来，构建一个完整的动态问卷调查应用。

应用功能

用户创建一个问卷，可以：

动态添加不同类型的问题（单选、多选、文本回答）
每个问题由标签 + 输入控件组成
提交时收集所有答案

设计视图布局

Screen1
├── 标签：lblTitle（"动态问卷调查"）
├── 水平布局：ToolbarLayout
│   ├── 按钮：btnAddText（"添加文本题"）
│   ├── 按钮：btnAddRadio（"添加单选题"）
│   └── 按钮：btnAddCheck（"添加多选题"）
├── 垂直布局：QuestionLayout（动态组件的容器）
├── 水平布局：ActionLayout
│   ├── 按钮：btnSubmit（"提交问卷"）
│   └── 按钮：btnReset（"重置"）
└── 标签：lblResult（显示提交结果）

核心逻辑实现

// 全局变量
全局变量 questionCount：0
全局变量 questions：创建一个空列表  （存储所有问题组件的信息）


// 添加文本题
当 btnAddText.Click 执行
    调用 创建问题卡片("text")
    // 说明：创建包含标签 + 文本框的一行


// 添加单选题
当 btnAddRadio.Click 执行
    调用 创建问题卡片("radio")
    // 说明：创建包含标签 + 多个单选按钮的一组


// 添加多选题
当 btnAddCheck.Click 执行
    调用 创建问题卡片("checkbox")
    // 说明：创建包含标签 + 多个复选框的一组


过程 创建问题卡片(问题类型)
    设 局部变量 qNum 为 questionCount + 1

    // 创建问题卡片布局（垂直布局）
    调用 DynamicComponents.MakeLayout
        组件类型："VerticalArrangement"
        组件名称：拼接 "qCard_" qNum
    设 变量 qCard 为 返回值

    调用 DynamicComponents.SetPropertyOfComponent
        组件：qCard
        属性名："Width"
        属性值：-1

    调用 DynamicComponents.SetPropertyOfComponent
        组件：qCard
        属性名："Height"
        属性值：-2

    // ---- 第一行：问题标题 ----
    调用 DynamicComponents.CreateComponentInLayout
        组件类型："HorizontalArrangement"
        组件名称：拼接 "qTitleRow_" qNum
        布局：qCard
    设 变量 titleRow 为 返回值

    // 问题编号标签
    调用 DynamicComponents.CreateComponentInLayout
        组件类型："Label"
        组件名称：拼接 "qNumLabel_" qNum
        布局：titleRow
    设 变量 numLabel 为 返回值

    调用 DynamicComponents.SetPropertyOfComponent
        组件：numLabel
        属性名："Text"
        属性值：拼接 "问题" qNum "："

    调用 DynamicComponents.SetPropertyOfComponent
        组件：numLabel
        属性名："FontBold"
        属性值：true

    // 问题描述输入框（让用户输入问题文字）
    调用 DynamicComponents.CreateComponentInLayout
        组件类型："TextBox"
        组件名称：拼接 "qTitleInput_" qNum
        布局：titleRow
    设 变量 titleInput 为 返回值

    调用 DynamicComponents.SetPropertyOfComponent
        组件：titleInput
        属性名："Hint"
        属性值："请输入问题..."

    调用 DynamicComponents.SetPropertyOfComponent
        组件：titleInput
        属性名："Width"
        属性值：-1

    调用 DynamicComponents.SetPropertyOfComponent
        组件：titleInput
        属性名："Height"
        属性值：-2

    // ---- 第二行：选项区域 ----
    调用 DynamicComponents.CreateComponentInLayout
        组件类型："VerticalArrangement"
        组件名称：拼接 "qOptionsRow_" qNum
        布局：qCard
    设 变量 optionsRow 为 返回值

    // 根据类型创建不同的选项控件
    如果 问题类型 = "text" 则
        // 文本题：创建一个多行文本框
        调用 DynamicComponents.CreateComponentInLayout
            组件类型："TextBox"
            组件名称：拼接 "qAnswer_" qNum
            布局：optionsRow
        设 变量 answerBox 为 返回值

        调用 DynamicComponents.SetPropertyOfComponent
            组件：answerBox
            属性名："Hint"
            属性值："请输入您的回答..."

        调用 DynamicComponents.SetPropertyOfComponent
            组件：answerBox
            属性名："Width"
            属性值：-1

        调用 DynamicComponents.SetPropertyOfComponent
            组件：answerBox
            属性名："Height"
            属性值：100

        调用 DynamicComponents.SetPropertyOfComponent
            组件：answerBox
            属性名："Multiline"
            属性值：true

        // 记录问题信息
        调用 添加列表项 列表：questions
            项：创建字典
                键："type" 值："text"
                键："qNum" 值：qNum
                键："answerComponent" 值：answerBox

    否则如果 问题类型 = "radio" 则
        // 单选题：添加3个单选按钮
        对于 each i 在 列表 [1, 2, 3]
            执行
                // 使用水平布局放置单选按钮
                调用 DynamicComponents.CreateComponentInLayout
                    组件类型："HorizontalArrangement"
                    组件名称：拼接 "radioRow_" qNum "_" i
                    布局：optionsRow

                设 变量 radioRow 为 返回值

                调用 DynamicComponents.CreateComponentInLayout
                    组件类型："Button"
                    组件名称：拼接 "radioBtn_" qNum "_" i
                    布局：radioRow
                设 变量 radioBtn 为 返回值

                调用 DynamicComponents.SetPropertyOfComponent
                    组件：radioBtn
                    属性名："Text"
                    属性值：拼接 "选项" i

                调用 DynamicComponents.SetPropertyOfComponent
                    组件：radioBtn
                    属性名："Width"
                    属性值：-2

            // 将此选项记录到 questions 列表中
            // (选项信息在提交时通过遍历获取)

    否则如果 问题类型 = "checkbox" 则
        // 多选题：添加3个复选框
        对于 each i 在 列表 [1, 2, 3]
            执行
                调用 DynamicComponents.CreateComponentInLayout
                    组件类型："CheckBox"
                    组件名称：拼接 "checkBtn_" qNum "_" i
                    布局：optionsRow
                设 变量 checkBox 为 返回值

                调用 DynamicComponents.SetPropertyOfComponent
                    组件：checkBox
                    属性名："Text"
                    属性值：拼接 "选项" i

    // 将卡片添加到主布局
    调用 DynamicComponents.AddComponentToLayout
        组件：qCard
        布局：QuestionLayout

    设 全局变量 questionCount 为 questionCount + 1


// 提交问卷
当 btnSubmit.Click 执行
    设 局部变量 resultText 为 "问卷结果："

    // 遍历 questions 列表收集答案
    对于 each qInfo 在 列表 questions
        执行
            设 局部变量 qType 为 获取键值 "type" 字典 qInfo
            设 局部变量 qNum 为 获取键值 "qNum" 字典 qInfo
            设 局部变量 answerComponent 为 获取键值 "answerComponent" 字典 qInfo

            如果 qType = "text" 则
                // 从问题卡片的输入框中获取标题
                调用 DynamicComponents.GetPropertyOfComponent
                    组件：answerComponent
                    属性名："Text"
                设 局部变量 answer 为 返回值

                设 resultText 为 拼接 resultText 换行符 "问题" qNum "：" answer

    // 显示结果
    设 lblResult.Text 为 resultText
    调用 Notifier.ShowAlert
        通知："问卷提交成功！"


// 重置问卷
当 btnReset.Click 执行
    调用 DynamicComponents.DeleteAllComponentsInLayout
        布局：QuestionLayout
    设 全局变量 questionCount 为 0
    设 全局变量 questions 为 创建空列表
    设 lblResult.Text 为 ""

十、常见问题与注意事项

10.1 组件名称必须唯一

动态创建组件时，每个组件都需要一个唯一的名称。如果名称重复，后创建的组件会覆盖之前的组件。

正确做法：使用计数器或时间戳拼接组件名称。

// 使用全局计数器
设 组件名称 为 拼接 "btn_" 全局计数器
设 全局计数器 为 全局计数器 + 1

// 或使用时间戳
设 组件名称 为 拼接 "btn_" Clock1.Now

10.2 不能在设计视图中直接引用动态组件

因为动态组件是在运行时创建的，设计视图中不存在这些组件。你不能像对待普通组件那样直接拖放代码块来引用它们，而必须通过 DynamicComponents 的方法来操作。

10.3 性能考虑

避免一次性创建大量组件（例如超过100个）
如果需要大量列表项，考虑使用 ListView 配合列表数据
销毁不再需要的组件（使用 DeleteComponent）释放内存
嵌套布局不要太深，一般 3-4 层即可

10.4 组件生命周期

动态创建的组件在应用重启后消失（除非你使用 TinyDB 保存状态）
动态组件的父布局被删除时，其所有子组件也会被自动删除
如果你需要在下次启动时恢复界面，需要保存组件信息并在 Screen1.Initialize 中重新创建

10.5 与 Screen1 中的现有组件交互

动态组件可以与设计视图中已有的组件正常交互。例如，动态组件点击后可以更新静态标签的文本，反之亦然。

当 DynamicComponents.ComponentClicked
    组件：clickedComponent
执行
    // 更新设计视图中的静态标签
    设 StaticLabel.Text 为 "你点击了一个动态组件"

10.6 如何获取动态组件中的输入值

对于动态创建的 TextBox，你可以通过 GetPropertyOfComponent 来获取其输入内容。

调用 DynamicComponents.GetPropertyOfComponent
    组件：dynamicTextBox
    属性名："Text"
设 变量 userInput 为 返回值

对于动态创建的 CheckBox：

调用 DynamicComponents.GetPropertyOfComponent
    组件：dynamicCheckBox
    属性名："Checked"
设 变量 isChecked 为 返回值

10.7 使用组件名称列表来管理

为了方便管理大量动态组件，建议使用列表来记录所有创建的组件引用。

// 初始化
全局变量 dynamicButtons：创建一个空列表

// 每次创建时记录
当 AddButton.Click 执行
    // 创建按钮...
    调用 添加列表项 列表：dynamicButtons
        项：newButton

// 遍历所有动态按钮
当 btnListAll.Click 执行
    设 变量 index 为 1
    对于 each btn 在 列表 dynamicButtons
        执行
            调用 DynamicComponents.GetPropertyOfComponent
                组件：btn
                属性名："Text"
            设 变量 btnText 为 返回值

            调用 Notifier.ShowAlert
                通知：拼接 "按钮" index "：" btnText

            设 index 为 index + 1

十一、扩展阅读与资源

官方资源

MIT App Inventor 扩展中心：https://ai2.appinventor.mit.edu/reference/other/extensions.html
MIT CML 扩展 GitHub 仓库：https://github.com/mit-cml/mit-cml-extensions
MIT App Inventor 社区：https://community.appinventor.mit.edu

社区资源

Pura Vida Apps 教程（Taifun 扩展）：https://puravidaapps.com
App Inventor 中文网：https://www.appinventor.cn