列表与网格概述
=======

许多应用存在滚动展示同类项目集合的需求，例如显示图片、视频、音乐、新闻、商品等。此类场景可以根据项目排列方式分别选择[List](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-layout-development-create-list)、[Grid](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-layout-development-create-grid)、[WaterFlow](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-layout-development-create-waterflow)实现，在圆形屏幕推荐使用[ArcList](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-layout-development-create-arclist)。

当应用存在滚动展示不同类别项目集合的需求，例如，电商首页同时包含多列网格分类入口、瀑布流商品卡片、线性列表推荐，或社交应用信息流同时包含文本列表、九宫格图片、视频卡片。此类场景可以在可滚动父组件（Scroll、List、WaterFlow）内组合使用多种[懒加载布局](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-layout-development-create-lazy-layout)来实现。

#### 列表

List适合单列和多列宽度相同的场景，如通讯录、音乐列表、购物清单等。

直播评论、即时聊天等应用场景需要在列表底部插入数据时，内容应自动向上滚动，以展示新插入的节点，此功能可通过配置[stackFromEnd](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-list#stackfromend19)实现。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/af/v3/Sq8iWBU1S12OYcUZslmnbw/zh-cn_image_0000002634008344.png?HW-CC-KV=V1&HW-CC-Date=20260709T132259Z&HW-CC-Expire=86400&HW-CC-Sign=56C6D061B44706416E269A7D135F1474DB42DB5C0EFA07F69DF613722FA3A18C)

#### 网格

网格布局由“行”和“列”分割的单元格组成，通过指定“项目”所在单元格实现多种布局，应用场景包括九宫格图片展示、日历、计算器等。

对于部分项目占用多行或多列的场景，可以通过在创建Grid时传入合适的[GridLayoutOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-grid#gridlayoutoptions10对象说明)来实现。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/71/v3/bFz0Om4FQdy7UgcAYMe_YQ/zh-cn_image_0000002664207491.png?HW-CC-KV=V1&HW-CC-Date=20260709T132259Z&HW-CC-Expire=86400&HW-CC-Sign=A7EC9DAFFCCA4F6F773E2387E8E232AAF2861C1B8276F024A2E76C476AAE202E)

#### 瀑布流

瀑布流布局是一种多列等宽但高度不等的布局方式，适用于需要错落排列的场景，如图片和视频展示、商品推荐等。

同一个页面内有不同列数分段混合布局的场景，可以通过设置[WaterFlowOptions对象说明](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-waterflow#waterflowoptions对象说明)的sections实现。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/56/v3/6eI40vMxQ9qH6PUs9D08vw/zh-cn_image_0000002664327551.png?HW-CC-KV=V1&HW-CC-Date=20260709T132259Z&HW-CC-Expire=86400&HW-CC-Sign=30595642EF14F6810817B62E30D08E7CA6E979D50DBB3B06FB5C2F23F5ABF37E)

#### 弧形列表

弧形列表是一种专为圆形屏幕设备设计的特殊列表，支持列表项在接近屏幕上下两端自动缩放的效果。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/b8/v3/bgcHxHfIQpmZK-Q2MyxCRg/zh-cn_image_0000002633848442.png?HW-CC-KV=V1&HW-CC-Date=20260709T132259Z&HW-CC-Expire=86400&HW-CC-Sign=EDD47224BA12FD7B5BAFBE1F4665E8E0936A44F2238BB98A469EA0DD2FAC8506)

#### 懒加载布局

懒加载布局容器是一类嵌套在可滚动父组件（Scroll、List、WaterFlow）内部，负责按需加载子组件的布局容器。这类容器本身不提供滚动能力，由父组件统一处理滚动。它仅创建和布局处于可滚动父组件可视区域内的子组件，并在帧间空闲时隙预加载可视区域上方和下方各半屏的内容，从而减少首帧渲染时间和内存开销。ArkUI提供了两种支持懒加载的布局容器组件：垂直网格布局[LazyVGridLayout](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-lazyvgridlayout)、垂直瀑布流布局[LazyVWaterFlowLayout](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-lazyvwaterflowlayout)。不同的懒加载布局容器提供不同的布局模式，开发者可以将多种类型的懒加载布局容器组合在同一个父组件中使用，灵活实现混合布局。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d8/v3/knL79w0gSBGKHT8_4sCGEQ/zh-cn_image_0000002634008346.gif?HW-CC-KV=V1&HW-CC-Date=20260709T132259Z&HW-CC-Expire=86400&HW-CC-Sign=AD8C81D872DEA927166AD211B21A1AE53F1330460E24C111E347158296882A78)

#### 能力对比

| 业务场景 | List | Grid | WaterFlow | ArcList |
| :-- | :-- | :-- | :-- | :-- |
| 滚动通用能力 | 支持 | 支持 | 支持 | 支持 |
| 项目分组 | [ListItemGroup](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-listitemgroup) | [GridLayoutOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-grid#gridlayoutoptions10对象说明) | [WaterFlowSections](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-waterflow#waterflowsections12) | 不支持 |
| 指定项目吸顶 | 支持通过[sticky](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-list#sticky9)属性实现吸顶 | 不支持 | 不支持 | 不支持 |
| 项目拖拽排序 | 支持[拖拽排序](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-drag-sorting)，包括内置动画和拖动到边缘自动滚动 | 仅所有项目都占1行1列时支持内置动画[supportAnimation](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-grid#supportanimation8)，且不支持拖动到边缘自动滚动 | 不支持 | 不支持 |
| 项目横滑 | 支持通过[swipeAction](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-listitem#swipeaction9)属性实现横滑 | 不支持 | 不支持 | 不支持 |
| 项目间距 | 支持 | 支持 | 支持 | 支持 |
| 项目分割线 | 支持 | 不支持 | 不支持 | 不支持 |