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

实现效果

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

相关推荐
小哥山水之间17 分钟前
基于dropbear实现嵌入式系统ssh服务端与客户端完整交互
linux
奇怪的杰哥20 分钟前
Win11 加快软件开机自启动
windows
m0_6530313627 分钟前
腾讯云认证考试报名 - TDSQL数据库交付运维专家(TCCE MySQL版)
运维·数据库·腾讯云
ldj202031 分钟前
2025 Centos 安装PostgreSQL
linux·postgresql·centos
cpsvps33 分钟前
Windows内核并发优化
windows
翻滚吧键盘37 分钟前
opensuse tumbleweed上安装显卡驱动
linux
cui_win2 小时前
【内存】Linux 内核优化实战 - net.ipv4.tcp_tw_reuse
linux·网络·tcp/ip
biass2 小时前
jenkins角色权限
运维·jenkins
tomorrow.hello2 小时前
Jenkins Pipeline(二)
运维·jenkins
做一个AC梦2 小时前
Docker安装失败:Docker Desktop installation failed
运维·docker·容器