如何通过循环数据实现动态渲染

前提条件

已在“UI编辑”页面添加相应物料插件（如“文本展示”组件）。如未添加，请参考如何使用物料插件完成添加。

步骤1：创建循环数据变量

1. 进入流程元模板的“UI编辑”页面，单击左侧插件栏中的，展开“状态管理”页面。
2. 在“页面状态”页签下，添加一个数组类型的变量（如“state.loop”）。配置如下：
   图1 添加变量
   
   • 变量名：填写“loop”。
   • 初始值：

     [
       "零部件A",
       "零部件B",
       "零部件C",
       "零部件D"
     ]

步骤2：配置循环渲染

1. 在“UI编辑”页面的画布中，选中已添加的“文本展示”组件，然后将其属性面板切换至“高级”页签。
2. 找到“循环数据”属性，单击。
   图2 设置循环数据
   

3. 在弹出的窗口中，选择步骤1：创建循环数据变量添加的变量，单击“确定”。
   图3 绑定变量
   

步骤3：配置组件信息

1. 将“文本展示”组件的属性面板切换至“属性”页签，并找到“文本内容”属性，单击。
   图4 设置文本内容
   

2. 在弹出的窗口中，选择步骤1：创建循环数据变量添加的循环数据变量，并将其值设置为高级属性“迭代变量名”所指定的值（如“item”），单击“确定”。
   图5 为“文本内容”绑定变量
   

步骤4：查看动态渲染效果

配置完成后，系统会根据“loop”数组的长度自动生成相应数量的“文本展示”组件，每个组件依次显示数组中对应项的内容（如“零部件A”、“零部件B”、“零部件C”、“零部件D”）。

图6 动态渲染效果