示例代码合集地址:
HarmonyOS示例代码-鸿蒙系统示例代码-华为开发者联盟 (huawei.com)
代码工程地址:
WaterFlow: 基于WaterFlow容器,实现瀑布流布局,使用sections实现了混合排列,实现了Tab吸顶、下拉刷新、无限加载等功能。 (gitee.com)
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:网格容器组件。
相关权限
- 网络使用权限:ohos.permission.INTERNET。
约束与限制
-
本示例仅支持标准系统上运行,支持设备:华为手机。
-
HarmonyOS系统:HarmonyOS NEXT Developer Beta1及以上。
-
DevEco Studio版本:DevEco Studio NEXT Developer Beta1及以上。
-
HarmonyOS SDK版本:HarmonyOS NEXT Developer Beta1 SDK及以上。