【Harmony OS】【ARK UI】ETS 的 List 實作下拉重繪功能實作-有解無憂

在HarmonyOS開發中List下拉重繪是一種很常見的問題，今天描述怎么實作List下拉重繪的功能實作，主要分為“開發準備”，“代碼實作”，“運行效果”

1. 開發準備我們需要學習以下知識點

1.1 【Harmony OS】【ARK UI】【Demo】加載影片實作

1.2 PanGesture

1.3 List ListItem

1.4 顯隱控制

2. 代碼實作

2.1 準備資料源

定義全量資料源：用于加載每次加載部分資料

定義List顯示資料源：用于List顯示在界面上代碼如下

private arr: string[] = ["A", "B", "C", "D", "E", "F", "G", "H"] //todo 當前list顯示資料源
private AllData: string[] = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"] //todo 全量資料

2.2 使用 List 和ListItem，【Harmony OS】【ARK UI】【Demo】加載影片實作來繪畫基本界面，代碼如

Column() {
      List({ space: 20, initialIndex: 0 }) {
        ListItem() {
          Column() {
            Image($r("app.media.loading"))
              .objectFit(ImageFit.Contain)
              .height(40)
              .aspectRatio(1)
              .width(40)
              .margin({ bottom: 5 })
              .rotate({ x: 0, y: 0, z: 1, angle: this.rotateAngle })
            Text(this.loadingText)
              .fontSize(14)
              .fontColor("#ed6262")
              .backgroundColor(Color.White)
          }
          .alignItems(HorizontalAlign.Center)
          .padding({ top: 10, right: 0, bottom: 10, left: 0 })
          .width("100%")
          .padding({ top: 10, right: 0, bottom: 10, left: 0 })
          .backgroundColor(Color.White)
        }

        ForEach(this.arr, (item) => {
          ListItem() {
            Text('' + item)
              .width('100%')
              .height(100)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(0xFFFFFF)
          }
        }, item => item)
      }
      .listDirection(Axis.Vertical) // 排列方向
      .onScrollIndex((firstIndex: number, lastIndex: number) => {
        //Todo firstIndex螢屏第一個可見條目索引
        //todo lastIndex螢屏最后可見索引
        this.firstIndex = firstIndex;
      })
 
}.width('100%')

2.3 控制加載影片顯示或者隱藏

我們可以學習顯隱控制來控制加載影片顯示隱藏，定義一個全域變數來進行控制影片顯示隱藏，代碼如下

  @State IsShowLoading: boolean= true//影片顯示隱藏 默認是顯示狀態
  .visibility((this.IsShowLoading ? Visibility.Visible : Visibility.None))//Todo 影片顯示隱藏

2.4 控制元件List下拉重繪影片

重繪臨界值：只用當List第一條螢屏可見索引為0的時候，并且上下拉松開的時候開始加載資料

List第一條螢屏可見索引獲取，我們參List的onScrollIndex的Api，并且定義一個變數進行獲取到值代碼如下

.onScrollIndex((firstIndex: number, lastIndex: number) => {
//Todo firstIndex螢屏第一個可見條目索引
//todo lastIndex螢屏最后可見索引
this.firstIndex = firstIndex;
})

2.5 手勢判斷，我們參考PanGesture檔案，代碼如下

  .parallelGesture(
      PanGesture({ distance: 150, direction: PanDirection.Down })
        .onActionStart(this.ActionStart.bind(this))
        .onActionUpdate(this.ActionUpdate.bind(this))
        .onActionEnd(this.ActionEnd.bind(this))
        .onActionCancel(this.ActionCancel.bind(this))
      )

   public ActionStart(event) {
    clearInterval(this.rotateTimeOut)
    if (this.firstIndex === 0 && this.arr.length > 0) { //判斷是否重繪
      this.IsShowLoading = true;
      this.loadingText = "開始重繪"
    }
  }

  private ActionUpdate() {
    clearInterval(this.rotateTimeOut)//Todo 取消之前影片
    this.loadingText = "正在重繪"
    console.log(this.loadingText)

  }

  private ActionEnd() {
    this.loadingText = "開始重繪資料"
    console.log(this.loadingText)
    //開始重繪資料



    this.loadingRotate();
    this.loadingData(); //加載資料
  }

  private ActionCancel() {
    //取消影片
    this.IsShowLoading = false;
    this.loadingText = "重繪取消"
    console.log(this.loadingText)
    clearInterval(this.rotateTimeOut)
  }

2.6重繪資料代碼如下

//網路加載資料

  private loadingData() {
    console.log("loadingDatahttps://www.cnblogs.com/developer-huawei/archive/2022/04/14/=====")
    var that = this;
    //延遲幾秒執行這個代碼 取消影片
    setTimeout(function () {
      console.log("loadingData=https://www.cnblogs.com/developer-huawei/archive/2022/04/14/====開始")
      var random=Math.ceil(Math.random()*10);;
      that.arr.splice(0,8)
      for(var i=random;i<random+8;i++){
        that.arr.push(that.AllData[i])
      }
      console.log("loadingData=https://www.cnblogs.com/developer-huawei/archive/2022/04/14/====clearInterval")
      clearInterval(this.rotateTimeOut)
      console.log("loadingData=https://www.cnblogs.com/developer-huawei/archive/2022/04/14/==取消影片")
      that.IsShowLoading = false
    }, 5000)
  }

3.運行效果

3.1全部代碼如下

@Entry
@Component
struct MyListView {
  private arr: string[] = ["A", "B", "C", "D", "E", "F", "G", "H"] //todo 當前資料源
  private AllData: string[] = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
  private firstIndex: number= 0;
//-1 代表正常狀態 0代表下拉重繪 1 代表上拉加載
  @State loadingText: string = '正在重繪' //文本
  @State IsShowLoading: boolean= true//影片顯示隱藏 默認是顯示狀態
  private rotateTimeOut: any //計時器
  @State rotateAngle: number= 0;
//加載圖示旋轉
  loadingRotate() {
    this.rotateTimeOut = setInterval(() => {
      this.rotateAngle = 0
      animateTo({ duration: 800 }, () => {
        this.rotateAngle = 360
      })
    }, 800)
  }

  public ActionStart(event) {
    clearInterval(this.rotateTimeOut)
    if (this.firstIndex === 0 && this.arr.length > 0) { //判斷是否重繪
      this.IsShowLoading = true;
      this.loadingText = "開始重繪"
    }
  }

  private ActionUpdate() {
    clearInterval(this.rotateTimeOut)//Todo 取消之前影片
    this.loadingText = "正在重繪"
    console.log(this.loadingText)

  }

  private ActionEnd() {
    this.loadingText = "開始重繪資料"
    console.log(this.loadingText)
    //開始重繪資料



    this.loadingRotate();
    this.loadingData(); //加載資料
  }

  private ActionCancel() {
    //取消影片
    this.IsShowLoading = false;
    this.loadingText = "重繪取消"
    console.log(this.loadingText)
    clearInterval(this.rotateTimeOut)
  }
//網路加載資料
  private loadingData() {
    console.log("loadingDatahttps://www.cnblogs.com/developer-huawei/archive/2022/04/14/=====")
    var that = this;
    //延遲幾秒執行這個代碼 取消影片
    setTimeout(function () {
      console.log("loadingData=https://www.cnblogs.com/developer-huawei/archive/2022/04/14/====開始")
      var random=Math.ceil(Math.random()*10);;
      that.arr.splice(0,8)
      for(var i=random;i<random+8;i++){
        that.arr.push(that.AllData[i])
      }
      console.log("loadingData=https://www.cnblogs.com/developer-huawei/archive/2022/04/14/====clearInterval")
      clearInterval(this.rotateTimeOut)
      console.log("loadingData=https://www.cnblogs.com/developer-huawei/archive/2022/04/14/==取消影片")
      that.IsShowLoading = false
    }, 5000)
  }

  build() {
    Column() {
      List({ space: 20, initialIndex: 0 }) {
        ListItem() {
          Column() {
            Image($r("app.media.loading"))
              .objectFit(ImageFit.Contain)
              .height(40)
              .aspectRatio(1)
              .width(40)
              .margin({ bottom: 5 })
              .rotate({ x: 0, y: 0, z: 1, angle: this.rotateAngle })
            Text(this.loadingText)
              .fontSize(14)
              .fontColor("#ed6262")
              .backgroundColor(Color.White)
          }
          .alignItems(HorizontalAlign.Center)
          .padding({ top: 10, right: 0, bottom: 10, left: 0 })
          .width("100%")
          .padding({ top: 10, right: 0, bottom: 10, left: 0 })
          .backgroundColor(Color.White)
        }
        .visibility((this.IsShowLoading ? Visibility.Visible : Visibility.None))//Todo 影片顯示隱藏

        ForEach(this.arr, (item) => {
          ListItem() {
            Text('' + item)
              .width('100%')
              .height(100)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(0xFFFFFF)
          }
        }, item => item)
      }
      .listDirection(Axis.Vertical) // 排列方向
      .onScrollIndex((firstIndex: number, lastIndex: number) => {
        //Todo firstIndex螢屏第一個可見條目索引
        //todo lastIndex螢屏最后可見索引
        this.firstIndex = firstIndex;
      })
      .parallelGesture(
      PanGesture({ distance: 150, direction: PanDirection.Down })
        .onActionStart(this.ActionStart.bind(this))
        .onActionUpdate(this.ActionUpdate.bind(this))
        .onActionEnd(this.ActionEnd.bind(this))
        .onActionCancel(this.ActionCancel.bind(this))
      )
    }.width('100%')


  }
}

3.2運行效果圖如下

8d0f286071065cc016dd2c47232fc635_663x1074.gif%40900-0-90-f.gif

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/458167.html

標籤：其他

上一篇：開發者必讀：2022年移動應用趨勢洞察白皮書

下一篇：Kotlin快速上手