ArkUI实战，自定义下拉刷新组件RefreshList

下拉刷新是一个高频使用的功能，ArkUI 开发框架也提供了下拉刷新组件 Refresh，该组件的使用非常简单，读者可参阅笔者在《ArkUI实战》第六章 第 5 小节 的介绍，本文笔者讲解一下笔者在项目上实现的一个下拉刷新组件 RefreshList，该组件的运行效果如下图所示：

• 布局拆分
  下拉刷新组件都是分为上下两部分，上边是刷新头：refreshHead，该刷新头根据手指的下滑距离提示是否达到刷新条件；下边是刷新体：refreshContent，当触发下拉刷新条件后对外回调，从而实现内容更新。笔者实现的 RefreshList 也是按照以上布局实现的，简化图如下所示：
  
  默认情况下 refreshHead 是布局在 RefreshList 可视区域外边，笔者在第三章 第 1 小节 讲解过可以使用 position() 方法实现布局定位，简化代码如下所示：

@Component struct RefreshList {
   
  build() {
   
    Column() {
   
      Row() {
   
        // header布局
      }
      .id("refresh_header")
      .width("100%")
      .height(50)
      .position({
    // 利用该属性，把refresh_header布局在 Column 顶部
        x: 0,
        y: -50
      })

      Column() {
   
        // content 布局
      }
      .id("refresh_content")
      .width("100%")
      .height("100%")
      .position({
    // 利用该属性，把refresh_content布局向上做偏移
        x: 0,
        y: 0
      })
    }
    .id("refresh_list")
    .width("100%")
    .height("100%")
  }
}
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

• 滑动处理
  ArkUI 开发框架对于手势事件的处理遵循 W3C 标准，首先是目标捕获阶段，然后再是事件冒泡阶段，下拉刷新的操作就是在事件冒泡阶段处理的，因此直接实现 refresh_list 的 onTouch() 方法即可，在该方法内根据手指的滑动距离动态实现 refreshHeader 和 refreshContent 的布局定位即可，简化代码如下所示：

@Component struct RefreshList {
   

  private refreshHeaderHeight: number = 50;
  private offsetY: number = -this.refreshHeaderHeight;
  private lastX: number;
  private lastY: number;
  private downY: number;

  build() {
   
    Column() {
   
      Row()
      .id("refresh_header")
      .width("100%")
      .height(this.refreshHeaderHeight)
      .backgroundColor("#bbaacc")
      .position({
   
        x: 0,
        y: this.offsetY
      })

      Column() {
   
      }
      .id("refresh_content")
      .width("100%")
      .height("100%")
      .backgroundColor("#aabbcc")
      .position({
   
        x: 0,
        y: this.offsetY + this.refreshHeaderHeight
      })
    }
    .id("refresh_list")
    .width("100%")
    .height("100%")
    .onTouch((event) => {
   
      if (event.type == TouchType.Down) {
   
        // 处理 down 事件
        this.onTouchDown(event);
      } else if (event.type == TouchType.Move) {
   
        // 处理 move 事件
        this.onTouchMove(event);
      } else if (event.type == TouchType.Cancel || event.type == TouchType.Up) {
   
        // 处理 up 事件
        this.onTouchUp(event);
      }
    })
  }

  private onTouchDown(event: TouchEvent) {
   
    this.lastX = event.touches[0].screenX;
    this.lastY = event.touches[0].screenY;
    this.downY = this.lastY;
  }

  private onTouchMove(event: TouchEvent) {
   
    let currentX = event.touches[0].screenX;
    let currentY = event.touches[0].screenY;
    let deltaX = currentX - this.lastX;
    let deltaY = currentY - this.lastY;

    if (Math.abs(deltaX) < Math.abs(deltaY) && Math.abs(deltaY) > 5) {
   
      // 达到滑动条件
    }
  }

  private onTouchUp(event: TouchEvent) {
   
  }
}
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