鸿蒙ark ui 列表组件各种用法教程

前言

各位同学有段时间没有见面因为一直很忙所以就你没有去更新博客。最近有在学习这个鸿蒙的ark ui开发因为鸿蒙不是发布了一个鸿蒙next的测试版本明年会启动纯血鸿蒙应用所以我就想提前给大家写一些博客文章

效果图：

具体实现

我们在鸿蒙的ark ui 里面列表使用我们的list组件来实现类似flutter 里面的listview和安卓里面的listview 和recyclerview

代码实现：

准备数据源本地数据

css 复制代码

export interface PanelListItemType {
  name: Resource;
  cname: Resource;
}

export const panelInitialList: PanelListItemType[] = [
  {
    name: $r('app.string.Fatburningplan1'),
    cname: $r('app.string.change1'),
  },
  {
    name: $r('app.string.Fatburningplan2'),
    cname: $r('app.string.change2'),

  },
  {
    name: $r('app.string.Fatburningplan3'),
    cname: $r('app.string.change3'),
  },
  {
    name: $r('app.string.Fatburningplan4'),
    cname: $r('app.string.change4'),
  },

]

创建DataSource 管理数据类似我们安卓的adapter 适配器一样的

kotlin 复制代码

import { panelInitialList, PanelListItemType } from './PanelData';


/**
 * create a List range
 */
const createListRange = () => {
  let result = [];
  for (let i = 0; i < 2; i++) {
    result = [...result, ...panelInitialList];
  }
  return result;
}

/**
 * LazyLoad Class
 */

class BasicDataSource implements IDataSource {
  private listeners: DataChangeListener[] = []

  public totalCount(): number {
    return 0;
  }

  public getData(index: number): PanelListItemType {
    return undefined;
  }


  public getPositionData(index: number): PanelListItemType {
    return undefined;
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      this.listeners.push(listener);
    }
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
    const position = this.listeners.indexOf(listener);
    if (position >= 0) {
      this.listeners.splice(position, 1);
    }
  }

  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded();
    })
  }

  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index);
    })
  }

  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index);
    })
  }

  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index);
    })
  }

  notifyDataMove(from: number, to: number): void {
    this.listeners.forEach(listener => {
      listener.onDataMove(from, to);
    })
  }
}

export class PanelDataSource extends BasicDataSource {
  private listData = createListRange();

  public totalCount(): number {
    return this.listData.length;
  }

  public getData(index: number): PanelListItemType {
    return this.listData[index];
  }

  public pushData(): void {
    if(this.listData.length <  12) {
      this.listData = [...this.listData, ...panelInitialList];
      this.notifyDataAdd(this.listData.length - 1);
    }
  }
}

list显示在页面上面

我们需要用一个Row组件来包裹一下

scss 复制代码

build() {
  Row() {
    List({ space: TVCommonConstant.LIST_ITEM_SPACE }) {
      LazyForEach(this.positionListData, (item) => {
        ListItem() {
          Row() {
            Column() {
              Row() {
                Text(item?.name)
                  .fontSize(TVCommonConstant.NORMAL_FONT_SIZE)
                  .margin({ left:10,top: TVCommonConstant.BIGGER_FONT_SIZE  })
              }
              .justifyContent(FlexAlign.Start)
              .width(TVCommonConstant.GOODS_LIST_WIDTH)

              Row() {
                Text("置顶")
                  .fontColor($r('app.color.red'))
                  .fontSize(TVCommonConstant.GOODS_EVALUATE_FONT_SIZE)
                Text(item?.cname)
                  .fontColor($r('app.color.black_text_color'))
                  .fontSize(TVCommonConstant.GOODS_EVALUATE_FONT_SIZE).margin({ left: 10 })
              } .justifyContent(FlexAlign.Start)
              .width(TVCommonConstant.GOODS_LIST_WIDTH)
              .margin({ top: 20 })
            }
            .padding(TVCommonConstant.GOODS_LIST_PADDING)
            .width(TVCommonConstant.GOODS_FONT_WIDTH)
            .height(TVCommonConstant.LAYOUT_WIDTH_OR_HEIGHT)

          }
          .justifyContent(FlexAlign.SpaceBetween)
          .height(TVCommonConstant.GOODS_LIST_HEIGHT)
          .width(TVCommonConstant.LAYOUT_WIDTH_OR_HEIGHT)
        }
        .onTouch((event: TouchEvent) => {
          switch (event.type) {
            case TouchType.Down:
              this.startTouchOffsetY = event.touches[0].y;
              break;
            case TouchType.Up:
              this.startTouchOffsetY = event.touches[0].y;
              break;
            case TouchType.Move:
              if(this.startTouchOffsetY - this.endTouchOffsetY > 0) {
                this.positionListData.pushData();
              }
              break;
          }
        })
      })
    }
    .width(TVCommonConstant.GOODS_LIST_WIDTH).onClick(()=>{
     console.log("点击事件")
    })
  }
  .justifyContent(FlexAlign.Center)
  .width(TVCommonConstant.LAYOUT_WIDTH_OR_HEIGHT)
}

list的点击事件

javascript 复制代码

.width(TVCommonConstant.GOODS_LIST_WIDTH).onClick(()=>{
console.log("点击事件")
})

list列表的其他手势事件

csharp 复制代码

.onTouch((event: TouchEvent) => {
  switch (event.type) {
    case TouchType.Down:
      this.startTouchOffsetY = event.touches[0].y;
      break;
    case TouchType.Up:
      this.startTouchOffsetY = event.touches[0].y;
      break;
    case TouchType.Move:
      if(this.startTouchOffsetY - this.endTouchOffsetY > 0) {
        this.positionListData.pushData();
      }
      break;
  }
})

最后总结

arkui 写法和flutter非常的像有兴趣的同学可以多尝试哈今天的文章就讲到这里。最后呢希望我都文章能帮助到各位同学工作和学习如果你觉得文章还不错麻烦给我三连关注点赞和转发谢谢