1 Star 0 Fork 13

zjerry/WaterFlow

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
AppScope
entry
hvigor
screenshots/device
LICENSE
README.md
README_EN.md
build-profile.json5
hvigorfile.ts
oh-package.json5
克隆/下载
README_EN.md 4.81 KB
一键复制 编辑 原始数据 按行查看 历史
zjerry 提交于 5个月前 . add file for EN

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 image image

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.

Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/jerryzcx/water-flow.git
git@gitee.com:jerryzcx/water-flow.git
jerryzcx
water-flow
WaterFlow
master

搜索帮助