HarmonyOS鸿蒙NEXT应用开发如何使用List实现招聘信息及岗位列表展示？

HarmonyOS鸿蒙NEXT应用开发如何使用List实现招聘信息及岗位列表展示？ 应用开发中需要如何通过Navigation实现页面跳转，基于List实现岗位列表展示，有相关demo吗？

3 回复

参考文档：招聘信息及岗位列表展示

更多关于HarmonyOS鸿蒙NEXT应用开发如何使用List实现招聘信息及岗位列表展示？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS NEXT中，使用List组件展示招聘信息需通过ArkTS声明式UI开发。首先创建数据模型类定义岗位信息结构。使用@State装饰器管理列表数据状态。List组件通过ForEach迭代渲染每个列表项，结合ListItem组件定制单元格布局。可在列表项内使用Row/Column容器组合Text、Image等组件展示岗位详情。支持设置divider分割线和click事件处理交互。通过List的scrollToIndex方法可实现定位功能。

在HarmonyOS NEXT中，可以通过以下方式实现招聘信息列表展示及页面跳转：

  1. List组件实现列表展示：
@Entry
@Component
struct JobListPage {
  private jobList: JobItem[] = [
    { id: 1, title: '前端开发工程师', company: '华为技术有限公司' },
    { id: 2, title: 'HarmonyOS应用开发', company: '某科技公司' }
  ]

  build() {
    List({ space: 10 }) {
      ForEach(this.jobList, (item: JobItem) => {
        ListItem() {
          JobItemComponent({ jobItem: item })
        }
        .onClick(() => {
          // 跳转到详情页
          router.pushUrl({
            url: 'pages/JobDetailPage',
            params: { jobId: item.id }
          })
        })
      })
    }
    .listDirection(Axis.Vertical)
  }
}
  1. Navigation页面跳转： 在main_pages.json中配置路由：
{
  "src": [
    "pages/JobListPage",
    "pages/JobDetailPage"
  ]
}
  1. 列表项组件封装：
@Component
struct JobItemComponent {
  @Prop jobItem: JobItem

  build() {
    Row() {
      Column() {
        Text(this.jobItem.title)
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
        Text(this.jobItem.company)
          .fontSize(14)
          .fontColor(Color.Gray)
      }
      .alignItems(HorizontalAlign.Start)
    }
    .padding(10)
    .width('100%')
  }
}

这种实现方式提供了清晰的列表布局，支持点击跳转，代码结构简洁易维护。列表项可自定义样式，支持数据动态更新。

回到顶部