Scroll、Refresh、List 三件套打造互动式下拉刷新的滚动列表原创

因为活着就一定行

发布于 2024-12-3 23:24

浏览

0收藏

嘿，哥们儿！今天我们来聊聊怎么把那些酷炫的滚动效果、刷新动作和列表展示玩得飞起。想象一下，你正在刷着社交媒体，突然想看看最新的动态，这时候，一个流畅的下拉刷新动作，再加上一个顺滑的滚动列表，是不是感觉挺带感的？

咱们先来聊聊这三个小伙伴

Scroll组件：滚动的地盘

Scroll组件就像是一个展示台，你可以在上面放任何东西，只要东西太多放不下，它就会提供一个滚动条让你上下滑动。这家伙从API Version 8开始就有了，而且你还可以控制它滚动的方向，是上下翻还是左右翻。

Refresh组件：刷新的小能手

Refresh组件，这家伙就是那个让你感觉一切都在掌控中的小按钮。当你下拉的时候，它就会出现，告诉你“嘿，正在刷新呢！”然后刷新完了，它就消失了。这个动作在API Version 11开始支持，而且你还可以自定义它显示的内容。

List组件：列表的管家

List组件，这家伙专门用来管理那些一长串的列表。不管是你的购物清单，还是你的联系人列表，List都能帮你整得明明白白。它也是从API Version 8开始加入的。

为啥要把这三个家伙结合起来？

想象一下，你在看一个长长的新闻列表，突然想看看最新的新闻，这时候，你只需要轻轻一拉，列表就刷新了，而且还不需要离开当前的页面。这就是把这三个家伙结合起来的魅力所在。

传统场景和未来价值

传统的场景比如新闻应用、社交媒体、电商平台，这些都是需要不断刷新最新内容的地方。未来的话，这种组合可以带来更多的互动性和实时性，比如在线游戏的排行榜更新，或者是实时的股市动态。

动手实现一下

下面咱们来看看怎么用ArkTS语言把这三个家伙结合起来。别急，我会一步步解释的。

@Entry
@Component
struct MyCoolApp {
  @State refreshing: boolean = false;
  @State items: string[] = ['新鲜事儿1', '新鲜事儿2', '新鲜事儿3', '新鲜事儿4', '新鲜事儿5', '新鲜事儿6'];

  // 这里是自定义刷新时显示的内容
  @Builder
  customRefreshContent() {
    Stack() {
      Row() {
        LoadingProgress().height(32);
        Text("正在刷新...").fontSize(16).margin({ left: 20 });
      }.alignItems(VerticalAlign.Center);
    }.align(Alignment.Center).clip(true).width("100%");
  }

  build() {
    Column() {
      // 这里是Refresh组件，包裹着Scroll和List
      Refresh({
        refreshing: $$this.refreshing,
        builder: this.customRefreshContent()
      }) {
        // Scroll组件，用来滚动
        Scroll() {
          // List组件，展示列表
          List() {
            ForEach(this.items, (item: string, index: number) => {
              ListItem() {
                Text(item)
                  .width('100%')
                  .height(80)
                  .fontSize(16)
                  .textAlign(TextAlign.Center)
                  .backgroundColor(0xFFFFFF);
              }

              if (this.items.length === index + 1) {
                ListItem() {
                  Row() {
                    Text('这是最后一条啦')
                      .fontSize(12)
                  }
                  .width('100%')
                  .justifyContent(FlexAlign.Center)
                  .padding({ top: 10 })
                  .height(80)
                  .borderRadius({ bottomLeft: 10, bottomRight: 10 })
                  .backgroundColor(0xFFFFFF);
                }
              }
            }, (item: string) => item);

          }
          .scrollBar(BarState.Auto);
        }.width('100%').height('50%');
      }.onRefreshing(() => {
        setTimeout(() => {
          this.refreshing = false; // 假设2秒后刷新完成
        }, 2000);
      }).onStateChange((status: RefreshStatus) => {
        console.info(`刷新状态变成了: ${status}`);
      });
    }
    .width('100%')
    .height('100%')
    .padding(10)
    .backgroundColor(0xDCDCDC);
  }
}