HarmonyOS NEXT应用元服务常见列表操作分组吸顶场景

分组吸顶场景

场景描述

双列表同向联动,右边字母列表用于快速索引,内容列表根据首字母进行分组,常用于通讯录、城市选择、分组选择等页面。

本场景以城市列表页面为例,左侧城市列表数据和右侧字母导数据通过List组件来展示,并通过Stack组件使两个列表数据分层显示。在进入页面后,通过滑动左侧城市列表数据,列表字母标题吸顶展示,对应右侧字母导航内容高亮显示;点击右侧字母导航内容,左侧城市列表展示对应内容。

|---------------------------------------------------------------------------------|---------------------------------------------------------------------------------|
| 页面整体结构图 | 页面效果图 |
| | |

实现原理

左侧List作为城市列表,右侧List为城市首字母快捷导航列表,通过ListItem对对应数据进行渲染展示,并使用Stack堆叠容器组件,字母导航列表覆盖城市列表上方,再给对应List添加sticky属性和onScrollIndex()方法,实现两个列表数据间的联动效果。

开发步骤

城市列表使用ListItemGroup,对"当前城市""热门城市""城市数据"进行分组,并通过ListItem展示每个分组中的具体数据。

复制代码
// List data content.
@Builder
textContent(content: string) {
  Text(content)
    // ...
}
CityList.ets
List({ scroller: this.cityScroller }) {
  // Current city.
  ListItemGroup({ header: this.itemHead($r('app.string.current_city')) }) {
    ListItem() {
      Text(this.currentCity)
        .width('100%')
        .height(45)
        .fontSize(16)
        .padding({ left: 16, top: 12, bottom: 12 })
        .textAlign(TextAlign.Start)
        .backgroundColor(Color.White)
    }
  }

  // Popular cities.
  ListItemGroup({ header: this.itemHead($r('app.string.popular_cities')) }) {
    ForEach(this.hotCities, (item: string) => {
      ListItem() {
        this.textContent(item);
      }
    }, (item: string) => item)
  }
  .divider({
    strokeWidth: 1,
    color: '#EDEDED',
    startMargin: 10,
    endMargin: 45
  })

  // City data.
  ForEach(this.groupWorldList, (item: string) => {
    // Traverse the first letter of the city and use it as the header of the city grouping data.
    ListItemGroup({ header: this.itemHead(item) }) {
      // Retrieve and display corresponding city data based on letters.
      ForEach(this.getCitiesWithGroupName(item), (cityItem: City) => {
        ListItem() {
          this.textContent(cityItem.city);
        }
      }, (cityItem: City) => cityItem.city)
    }
  })
}

CityList.ets

右侧字母导航列表数据,同样通过List组件进行展示。

复制代码
// Side letter navigation data.
Column() {
  List({ scroller: this.navListScroller }) {
    ForEach(this.groupWorldList, (item: string, index: number) => {
      ListItem() {
        Text(item)
          // ...
      }
    }, (item: string) => item)
  }
}

CityList.ets

使用堆叠容器组件Stack,将字母导航内容覆盖到城市列表内容上方。

复制代码
Stack({ alignContent: Alignment.End }) {
  // City List Data.
  List({ scroller: this.cityScroller }) {
    // ...
  }
  // ...

  // Side letter navigation data.
  Column() {
    List({ scroller: this.navListScroller }) {
      // ...
    }
  }
  // ...
}

CityList.ets

最后,给城市列表添加sticky属性实现标题吸顶效果,及添加onScrollIndex()方法,通过selectNavIndex变量与字母导航列表内容进行关联,控制的对应字母导航内容的选中状态。

在字母导航列表中,添加点击事件,在点击事件中通过城市列表控制器cityScroller的scrollToIndex()事件,控制城市列表内容的改变,实现二者数据的联动效果。

复制代码
Stack({ alignContent: Alignment.End }) {
  // City List Data.
  List({ scroller: this.cityScroller }) {
    // ...
  }
  // ...
  .onScrollIndex((index: number) => {
    // By linking the selectNavIndex state variable with index, control the selection status of the navigation list.
    this.selectNavIndex = index - 2;
  })

  // Side letter navigation data.
  Column() {
    List({ scroller: this.navListScroller }) {
      ForEach(this.groupWorldList, (item: string, index: number) => {
        ListItem() {
          Text(item)
            // ...
            .onClick(() => {
              this.selectNavIndex = index;
              // Select the navigation list and set isClickScroll to true to prevent changes in the navigation list status during the scrolling process with the city list.
              this.isClickScroll = true;
              // By using the scrollIndex method of cityScanner, control the sliding city list to specify the Index,
              // as there are "current city" and "popular city" in the city list, so the index needs to be incremented by 2.
              this.cityScroller.scrollToIndex(index + 2, false, ScrollAlign.START);
            })
        }
      }, (item: string) => item)
    }
  }
  // ...
}

CityList.ets

实现效果

本文主要引用整理于鸿蒙官方文档

相关推荐
星辰云-11 分钟前
# Linux Centos系统硬盘分区扩容
linux·运维·centos·磁盘扩容
Hellc00723 分钟前
Nginx 高级 CC 与 DDoS 防御策略指南
运维·nginx·ddos
聽雨23732 分钟前
02每日简报20250704
linux·科技·金融·生活·社交电子·娱乐·媒体
feilieren39 分钟前
Docker 安装 Elasticsearch 9
运维·elasticsearch·docker·es
Maki Winster1 小时前
Peek-Ubuntu上Gif录制工具-24.04LTS可装
linux·ubuntu·peek
小皮侠2 小时前
nginx的使用
java·运维·服务器·前端·git·nginx·github
Maki Winster2 小时前
在 Ubuntu 下配置 oh-my-posh —— 普通用户 + root 各自使用独立主题(共享可执行)
linux·运维·ubuntu
守望时空332 小时前
Linux下KDE桌面创建自定义右键菜单
linux
l0sgAi3 小时前
vLLM在RTX50系显卡上部署大模型-使用wsl2
linux·人工智能
翻滚吧键盘3 小时前
debian及衍生发行版apt包管理常见操作
运维·debian