sticky-headers-recyclerview

简介

sticky-headers-recyclerview是一个分组标题固定的ListView组件。本库基于 sticky-headers-recyclerview 原库进行适配，使其可以运行在 OpenHarmony，并沿用其现有用法和特性。

效果展示：

下载安装

   ohpm install @ohos/sticky-headers-recyclerview

OpenHarmony ohpm环境配置等更多内容，请参考 如何安装OpenHarmony ohpm包 。

使用说明

导入并使用

import { RecyclerView, Stroke, TimeTable } from '@ohos/sticky-headers-recyclerview';

@Entry
@Component
struct HorizontalLayout {
 @State tableData: TimeTable[] = [
   {
     title: 'A',
     projects: ['Apple', 'Apartment', 'Airport', 'Animal', 'Artist', 'Antique']
   },
   {
     title: 'B',
     projects: ['Building', 'Bicycle', 'Banana', 'Bottle', 'Basket', 'Bridge']
   },
   {
     title: 'C',
     projects: ['Car', 'Computer', 'Camera', 'Castle', 'Candle', 'Clock']
   },
   {
     title: 'D',
     projects: ['Diamond', 'Desert', 'Dolphin', 'Dinosaur', 'Dragon', 'Drum']
   }
 ];
 @State linearLayout: Axis = Axis.Horizontal;
 @State listSpace: number = 100;
 @State strokeDivider: Stroke = { width: 10, color: 'red' };
 @State scrollBar: BarState = BarState.Off;

 @Builder
 headConstruction(text: string, index: number, direction: Axis) {
   Row() {
     Text(text)
       .width(direction == Axis.Vertical ? '100%' : 50)
       .height(direction == Axis.Vertical ? 50 : '100%')
       .fontSize(20)
       .backgroundColor(0xAABBCC)
       .padding(10)
       .onClick(() => {
         this.getUIContext().getPromptAction().showToast({
           message: `下标为${index}, 当前方向为${direction}, 当前数组的数据内容${JSON.stringify(this.tableData[index])}`,
           duration: 2000
         });
       })
   }
 }

 @Builder
 detailConstruction(project: string, index: number, superstratuItem: string, superstratumIndex: number,
   direction: Axis) {
   Text(project)
     .width(direction == Axis.Vertical ? '100%' : 100)
     .height(direction == Axis.Vertical ? 100 : '100%')
     .fontSize(20)
     .textAlign(TextAlign.Center)
     .backgroundColor(0xFFFFFF)
     .onClick(() => {
       this.getUIContext().getPromptAction().showToast({
         message: `当前的内容${project}, 下标为${index}, 头部渲染内容为${superstratuItem}, 头部视图下标${superstratumIndex}, 当前方向为${direction.toString()}`,
         duration: 2000
       });
     })
 }

 build() {
   Column() {
     RecyclerView({
       // 绑定数据源
       tableData: this.tableData,
       // 传入头部构建器
       headConstruction: this.headConstruction,
       // 传入列表项构建器
       detailConstruction: this.detailConstruction,
       // 设置为横向布局
       isListDirection: this.linearLayout,
       // 设置列表项间隔
       listSpace: this.listSpace,
       //  设置分隔线样式
       strokeDivider: this.strokeDivider,
       // 设置滚动条状态
       scrollBar: this.scrollBar
     })
       .height('70%')
       .backgroundColor(0xDCDCDC)
   }
   .height('100%')
   .width('100%')
   .backgroundColor(0xF5F5F5)
   .padding(10)
 }
}

更多详细用法请参考开源库sample页面的实现

接口说明

参数名	类型	必填	说明
tableData	TimeTable[]	是	用于定义粘性列表的分组数据结构
headConstruction	@Builder	是	列表头部构建器
detailConstruction	@Builder	是	列表项详情构建器
isListDirection	Axis	是	列表方向控制
listSpace	number	否	列表项间隔 控制列表项之间的间距,默认 :0
strokeDivider	Stroke	否	间隔线样式配置, 默认: width : 0, color : ' '
scrollBar	BarState	否	用于控制列表滚动条的显示状态,默认 : BarState.Off
isStackFromEnd	boolean	否	(api>=19) 是否反向布局,默认值 ： false

TimeTable 属性说明：

名称	类型	只读	可选	说明
title	string	否	否	分组标题
projects	string[]	否	否	分组内的项目列表

Stroke 属性说明：

名称	类型	只读	可选	说明
width	number	否	否	分隔线宽度
color	string	否	否	分隔线颜色

说明：

1. 源库有提供头部点击事件StickyRecyclerHeadersTouchListener，但鸿蒙因头部是外部传进来的，外部需自行使用onClick事件获取信息，demo有举例。

2. 源库有实现可见性控制ItemVisibilityAdapter，是为了适配RecyclerView预加载场景，过滤预加载但不可见的项，避免头部计算错误。RecyclerView是安卓特有视图，鸿蒙使用List组件实现，不涉及可见性控制。

约束与限制

在下述版本验证通过：

• DevEco Studio: 6.0.0 Release（6.0.0.858）, SDK: API20(6.0.0.47 SP16)

目录结构

|---- ohos_sticky-headers-recyclerview 
|     |---- entry    # 示例代码文件夹
|     |---- library  # ohos_sticky-headers-recyclerview  库文件夹
|     |     |   └─src
|     |     |   │---└─main  
|     |     |   |----   └─ets
|     |     |   │----      └──components  #默认存在的目录
|     |     |                 │----StickyHeadersRecyclerView.ets #粘性头部组件
|     |     |   │----      └──model       # 数据模型
|     |     |                 │----ViewModel.ets #粘性头部接口
|     |     |---- index.ets  # 对外接口
|     |---- README.md     # 安装使用方法    
|     |---- README_zh.md  # 安装使用方法  

贡献代码

使用过程中发现任何问题都可以提 Issue 给组件，当然，也非常欢迎发 PR共建 。

开源协议

本项目基于 Apache License 2.0 ，请自由地享受和参与开源。