Appearance
瀑布流列表
瀑布流列表组件是一种以错落有致的多列形式展示数据项的布局工具，支持灵活地添加组件、绑定数据和动态更新数据。瀑布流列表组件默认包含一个图片组件、一个容器组件和两个文本组件，你可根据业务需求自定义添加组件。
属性配置
瀑布流列表组件提供了丰富的属性配置选项，以下是一些关键属性配置说明。关于组件尺寸、位置、样式、指针、变换等通用属性的设置方法，请参考设置组件属性和事件。
绑定数据源
瀑布流列表组件支持绑定静态数据，或通过绑定工作流获取动态数据。
为瀑布流列表组件绑定一个 Array 类型的数据源。
- 例如将工作流的输出变量（例如
output）作为列表组件的数据源，该输出变量必须为 Array 类型。绑定工作流后，需要配置事件以触发工作流的调用，确保数据能够动态加载。
为瀑布流列表组件中的各个子组件绑定具体的数据字段。
绑定数据源后，你可以通过
item变量遍历和访问 Array 类型数据源中的每个元素。即你可以为列表组件中的各个子组件绑定具体的数据字段。例如为文本组件绑定数据字段{{item.name}}，为图片组件绑定数据字段{{item.contentUrl}}。配置示例，请参考配置示例。说明
为图片组件绑定数据字段时，字段值需为图片地址，支持
jpg、png格式，暂不支持svg格式。
为图片组件绑定数据
为图片组件绑定数据
设置列数及间距
瀑布流组件支持灵活调整布局，以满足不同场景的需求。具体功能包括：
固定列数：设置每行固定的列表块数量，确保布局的一致性。
动态列数：根据屏幕宽度或容器宽度自动调整每行的列表块数量，以实现响应式布局。
间距设置：支持通过列间距、行间距设置列表块之间的间距，灵活调整瀑布流列表布局。
固定列表
动态列数
固定列表
动态列数
调整组件
瀑布流列表组件默认包含一个图片组件、一个容器组件和两个文本组件。你可以根据业务需求，在瀑布流列表组件中自由添加其他组件或删除默认的子组件。当你在一个瀑布流列表组件中添加或删除子组件时，其他列表块也会同步完成相同的操作。
例如在瀑布流列表组件中，删除原有的文本组件，然后添加一个容器组件和一个图标组件。
隐藏组件
瀑布流列表组件的可见性可通过设置常用条件或表达式灵活控制，以实现特定场景下的隐藏或显示。
表达式方式
设置为 false：显示组件。
设置为 true：隐藏组件。
设置为变量：通过变量值（true 或 false）动态控制组件的可见性。配置示例，请参考隐藏组件。
常用条件方式
支持通过可视化界面设置条件，以控制组件的可见性。配置示例，请参考隐藏组件。
事件设置
通过配置瀑布流列表组件的事件，可以为瀑布流列表组件添加丰富的交互功能，以增强用户体验和界面的互动性。
| 事件项 | 说明 |
|---|---|
| 事件类型 | 支持以下事件类型： 点击单元格时：当用户点击单元格时触发。 加载时：当瀑布流列表组件完成加载时触发。 |
| 组件方法 | 支持以下组件方法： 设置隐藏：隐藏组件，使其不可见。 滚动到视图：将组件滚动到可视区域内。 |
配置示例
例如使用头条图片搜索插件搜索小狗图片，并在网页中以瀑布流形式展示搜索结果，则你可以按照以下步骤创建一个工作流，并通过瀑布流列表组件进行展示。
创建工作流。
- 使用头条图片搜索插件（ToutiaoPictureSearch）搜索小狗图片。其中，在结束节点中，设置输出变量
output的值为头条图片搜索插件输出结果中的result，其为 Array 类型，包含图片标题、URL、尺寸等信息。
绑定数据。
将工作流的输出变量 output 绑定到瀑布流列表组件上。
为瀑布流列表组件添加调用工作流事件。
- 例如配置事件为瀑布流列表组件加载时，即调用工作流，搜索小狗图片。
为瀑布流列表组件中的图片组件绑定数据字段 {{item.picture_info.display_url }}。
picture\_info.display\_url为图片地址。
删除瀑布流列表组件自带的两个文本组件。
预览效果。
- 以瀑布流形式展示搜索结果。
当前版本实操
本页使用独立的 瀑布流 示例页面，页面内不混放其他组件。
- 进入低代码应用的 用户界面，确认搭建类型为 桌面网页。
- 单击画布底部的 新建页面，创建一个空白页面。
- 在左侧 组件 面板中找到 瀑布流，单击或拖入当前页面。
- 切换到 结构 面板，确认该页面只包含当前 瀑布流 组件。
- 选中组件，在右侧 属性 面板中设置列数、间距、数据绑定和不同高度的列表项。
- 检查画布中的实际显示效果，再使用页面顶部的预览入口验证交互。
