[HarmonyOS Next示例代码] 鸿蒙UI开发 - WaterFlow瀑布流实例

 鸿蒙UI开发 - WaterFlow瀑布流实例 源码下载地址

介绍

基于WaterFlow容器，实现瀑布流布局，使用sections实现了混合排列，实现了Tab吸顶、下拉刷新、无限加载等功能。

效果预览

工程目录

├──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。