鸿蒙ark ui 列表组件各种用法教程_arkui list 点击

前言

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

效果图：

具体实现

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

代码实现：

• 准备数据源 本地数据

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'),
  },

]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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

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);
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

• list显示在页面上面

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

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)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

list的点击事件

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

list列表的其他手势事件

.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;
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

最后总结

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