# WaterFlow

**Repository Path**: wangzee/water-flow

## Basic Information

- **Project Name**: WaterFlow
- **Description**: 基于WaterFlow容器，实现瀑布流布局，使用sections实现了混合排列，实现了Tab吸顶、下拉刷新、无限加载等功能。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 19
- **Created**: 2025-04-09
- **Last Updated**: 2025-04-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 实现WaterFlow瀑布流布局功能

### 介绍

本示例为开发者展示使用WaterFlow瀑布流容器实现首页布局效果，包括使用sections实现混排布局、结合item实现滑动吸顶、多种组件混合排列等场景。

### 效果预览

| 场景一                                        | 场景二                                        | 场景三                                        | 
|--------------------------------------------|--------------------------------------------|--------------------------------------------|
| ![image](screenshots/device/Scenario1.png) | ![image](screenshots/device/Scenario2.png) | ![image](screenshots/device/Scenario3.png) |

### 工程目录
```
├──entry/src/main/ets                        // 代码区
│  ├──common
│  │  ├──constants                  
│  │  │   └──CommonConstants.ets             // 常量类  
│  │  └──utils
│  │      └──Logger.ets                      // 日志类  
│  ├──entryability
│  │  └──EntryAbility.ets 
│  ├──model
│  │  ├──DataModel.ets                       // 场景三首页导航数据
│  │  ├──GridDataModel.ets                   // 场景三网格菜单数据
│  │  ├──HomeViewModel.ets                   // 场景三首页数据
│  │  ├──ProductItem.ets                     // 瀑布流item数据类
│  │  ├──SectionsWaterFlowDataSource.ets     // sections瀑布流数据
│  │  ├──TabsData.ets                        // 分类Tab数据
│  │  ├──ToolbarData.ets                     // 分类Tab默认数据
│  │  └──WaterFlowDataSource.ets             // 瀑布流数据
│  ├──pages
│  │  ├──Index.ets                           // 场景聚合首页
│  │  ├──NavPage.ets                         // 场景三-首页
│  │  ├──SectionsHomePage.ets                // 场景一-首页
│  │  └──StickyHomePage.ets                  // 场景二-首页               
│  └──view
│     ├──FlowItemComponent.ets               // 瀑布流item组件
│     ├──GoodsDetailComponent.ets            // 场景三首页内容详情组件
│     ├──GoodsNavComponent.ets               // 场景三首页导航
│     ├──GoodsTabComponent.ets               // 场景三首页分类Tab与瀑布流组合
│     ├──GridComponent.ets                   // 场景三首页网格
│     ├──SearchComponent.ets                 // 场景三首页搜索框 
│     ├──SectionsWaterFlowComponent.ets      // sections瀑布流组件 
│     ├──StickyWaterFlowComponent.ets        // sticky瀑布流组件
│     ├──SwiperComponent.ets                 // 场景三首页轮播
│     ├──ToolbarComponent.ets                // 场景三底部导航栏
│     └──WaterFlowComponent.ets              // 瀑布流组件
└──entry/src/main/resources                  // 应用资源目录
```

### 具体实现

+ 场景一：使用WaterFlow的sections实现了混排布局；
+ 场景二：结合某一item实现了滑动吸顶；
+ 场景三：使用Tabs、Refresh、Scroll、WaterFlow、Swiper、Grid等组件，共同组合形成混合排列的瀑布流布局，通过懒加载的方式加载瀑布流数据实现上下滑动效果。

- WaterFlow：瀑布流容器，由“行”和“列”分割的单元格所组成，通过容器自身的排列规则，将不同大小的“项目”自上而下，如瀑布般紧密布局。
- FlowItem：瀑布流容器的子组件。
- LazyForEach：LazyForEach从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。当LazyForEach在滚动容器中使用了，框架会根据滚动容器可视区域按需创建组件，当组件划出可视区域外时，框架会进行组件销毁回收以降低内存占用。
- Tabs：导航页签组件。
- Refresh：下拉刷新容器组件。
- Scroll：可滚动容器组件。
- Swiper：轮播容器组件。
- Grid：网格容器组件。


### 相关权限

1. 网络使用权限：ohos.permission.INTERNET。

### 约束与限制

1. 本示例仅支持标准系统上运行，支持设备：华为手机。
2. HarmonyOS系统：HarmonyOS NEXT Developer Beta1及以上。
3. DevEco Studio版本：DevEco Studio NEXT Developer Beta1及以上。

4. HarmonyOS SDK版本：HarmonyOS NEXT Developer Beta1 SDK及以上。