# 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**: 20
- **Created**: 2025-04-09
- **Last Updated**: 2025-04-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# UI Framework - WaterFlow Instance

### Overview

This sample describes how to implement the waterfall layout based on the WaterFlow container. Sections are used to implement hybrid layout, and functions such as tab ceiling, pull-down refresh, and unlimited loading are also implemented in this sample.


### Preview

| Scenario 1                                    | Scenario 2                                    | Scenario 3                                    | 
|-----------------------------------------------|-----------------------------------------------|-----------------------------------------------|
| ![image](screenshots/device/Scenario1_EN.png) | ![image](screenshots/device/Scenario2_EN.png) | ![image](screenshots/device/Scenario3_EN.png) |


### Project Directory
```
├──entry/src/main/ets                        // Code area
│  ├──common
│  │  ├──constants                  
│  │  │   └──CommonConstants.ets             // Constant class 
│  │  └──utils
│  │      └──Logger.ets                      // Log class 
│  ├──entryability
│  │  └──EntryAbility.ets 
│  ├──model
│  │  ├──DataModel.ets                       // Navigation data on the home page of scenario 3
│  │  ├──GridDataModel.ets                   // Grid menu data in scenario 3
│  │  ├──HomeViewModel.ets                   // Home page data of scenario 3
│  │  ├──ProductItem.ets                     // Waterfall item data class
│  │  ├──SectionsWaterFlowDataSource.ets     // Sections waterfall data
│  │  ├──TabsData.ets                        // Category tab data
│  │  ├──ToolbarData.ets                     // Default data of the category tab
│  │  └──WaterFlowDataSource.ets             // Waterfall data
│  ├──pages
│  │  ├──Index.ets                           // Home page of scenario aggregation
│  │  ├──NavPage.ets                         // Scenario 3 - Home page
│  │  ├──SectionsHomePage.ets                // Scenario 1 - Home page
│  │  └──StickyHomePage.ets                  // Scenario 2 - Home page              
│  └──view
│     ├──FlowItemComponent.ets               // Waterfall item component
│     ├──GoodsDetailComponent.ets            // Goods details component on the home page of scenario 3
│     ├──GoodsNavComponent.ets               // Home page navigation of scenario 3
│     ├──GoodsTabComponent.ets               // Combination of the category tab and waterfall on the home page of scenario 3
│     ├──GridComponent.ets                   // Homepage grid of scenario 3
│     ├──SearchComponent.ets                 // Search box on the home page of scenario 3
│     ├──SectionsWaterFlowComponent.ets      // Sections Waterfall component
│     ├──StickyWaterFlowComponent.ets        // Sticky waterfall component
│     ├──SwiperComponent.ets                 // Swiper on the home page of scenario 3
│     ├──ToolbarComponent.ets                // Toolbar at the bottom of scenario 3
│     └──WaterFlowComponent.ets              // Waterfall component
└──entry/src/main/resources                  // App resource directory
```

### How to Implement

+ Scenario 1: Use the sections of WaterFlow to implement the hybrid layout.
+ Scenario 2: Implemented swiping ceiling based on an item.
+ Scenario 3: Use components such as Tabs, Refresh, Scroll, WaterFlow, Swiper and Grid to form a waterfall layout with hybrid arrangement. Load the waterfall data in lazy loading mode to implement the swiping up and down effects.

- WaterFlow: a water flow container that consists of cells formed by rows and columns and arranges items of different sizes from top to bottom according to the preset rules.
- FlowItem: subcomponent of the waterfall container.
- LazyForEach: iterates over provided data sources and creates corresponding components during each iteration. When **LazyForEach** is used in a scrolling container, the framework creates components as required within the visible area of the scrolling container. When a component is out of the visible area, the framework destroys and reclaims the component to reduce memory usage.
- Tabs: navigation tab component.
- Refresh: pull-down refresh component.
- Scroll: scrollable component.
- Swiper: swiper component.
- Grid: grid component.


### Required Permissions

1. Network permission: ohos.permission.INTERNET.

### Constraints

1. The sample app is supported only on Huawei phones running the standard system.
2. The HarmonyOS version must be HarmonyOS NEXT Developer Beta1 or later.
3. The DevEco Studio version must be DevEco Studio NEXT Developer Beta1 or later.

4. The HarmonyOS SDK version must be HarmonyOS NEXT Developer Beta1 or later.