循环容器

用于以自定义布局展示集合数据，或展示单条数据中的集合字段。

一、属性

1. 数据源

用于绑定循环容器需要循环的数据。绑定方式详见 数据绑定。

2. 外观

2.1 排列方式

排列方式提供“水平”和“垂直”两种方式，以下是两种排列方式的差别：

• 水平排列
  循环的元素从左至右排列。

  

• 垂直排列
  循环的元素从上至下排列。

  

2.2 间隔

用于设置循环容器中每个元素之间的距离。

• 当排列方式为水平时，间隔为元素之间的左右距离。
• 当排列方式为垂直时，间隔为元素之间的上下距离。

支持：

• 快捷设置：小、中、大 三种预设间距；
• 自定义设置：可自定义具体间距（单位：px）。

2.3 自动换行

用于设置当循环容器中的元素总宽度超出容器宽度时，是否自动换行。

示例：

• 将循环容器宽度设置为 320px；
• 元素之间间隔设置为 10px；
• 图片宽高设置为 100px；

在一行最多容纳三张图片的情况下，若存在四张图片，则会自动换到下一行显示。

开启自动换行效果如下：

⚠️ 若排列方式为垂直，自动换行则会表现为换列而不是换行。

3. 状态

参考 通用属性。

二、常见使用场景

1. 表格中集合字段的展示

当某一行数据中包含集合字段时，可使用循环容器以自定义布局展示其内容。

示例：