鸿蒙原生开发4.0 list组件横向排列一行控制个数

起初是为了模仿BOSS直聘H5的页面 '热门企业' 横向滑动的效果, 没错就是手指滑动的效果

本以为可以很轻松的实现, 于是我打开文档developer.harmonyos.com/cn/docs/doc...

发现官方有例图却没有具体实现的代码, 没关系我自己来实现

TS 复制代码

// 热门企业
class Job_Type {
  icon: Resource
  name:string
  AJob:string

  constructor(icon: Resource,name:string,AJob:string) {
    this.icon=icon
    this.name=name
    this.AJob=AJob
  }
}

@Component
export struct Home_hotFirms {
  private  JobList=[
  new Job_Type($r('app.media.bykj'),'博彦科技','热招｜ JAVA开发工程师'),
  new Job_Type($r('app.media.byd'),'比亚迪','热招｜ C++'),
  new Job_Type($r('app.media.djzp'),'大疆创新','热招｜ 前端开发'),
  new Job_Type($r('app.media.hljw'),'鸿联九五','热招｜ 算法工程师'),
  new Job_Type($r('app.media.qxdj'),'轻喜到家','热招｜ 前端开发'),
  new Job_Type($r('app.media.zxhl'),'志行合力','热招｜ JAVA开发工程师'),
  new Job_Type($r('app.media.jd'),'京东集团','热招｜ 前端开发'),
  new Job_Type($r('app.media.tx'),'腾讯','热招｜ 鸿蒙开发'),
]

  build(){
  Column(){
  Home_titleS({title:'热门企业'}).margin({bottom:10})
    this.builtJob()

}.margin(20)
.height(160)
  }

  @Builder builtJob(){
    List({space:8}){
      ForEach(this.list,(item:Job_Type[])=>{
        ListItem(){
          Column({space:8}){
              Row(){
                Image(I.icon).JobIcon()
                Column(){
                  Text(I.name).fontSize(14).fontColor('#333').width(100).maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })
                  Text(I.AJob).fontSize(12).fontColor('#666').width(100).maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })
                }.alignItems(HorizontalAlign.Start)
              }.JobRow()
          }
        }
      })
    }.listDirection(Axis.Horizontal)
  }

}

怀着自信的心态 ctrl+s , 打开预览器一看占一行

于是我尝试给 list 添加flex布局，奈何组件不支持会报错。然后我又把list组件换成了flex组件进行页面布局，布局能实现但是不能滑动。真头疼,绕绕头，头发掉了几根哈哈哈哈，有个一个投机取巧的方法，list 组件不是刚刚实现到独占一行吗，那我把数组变成俩个一次次遍历渲染上去不就可以。一顿操作猛如虎，一看效果傻了眼，滑动只能滑动一行，并不能像官方一样一划滑动一列。经过向大佬请教终于有了解决方案 在数据上: 一维数组变二维数组循环遍历，比如 list=[1,2,3,4,5,6,7,8] 变成 list=[[1,2],[3,4],[5,6,[7,8]]], 在布局上每个小数组多加一层Column

具体实现

Ts 复制代码

 新建一个公共的数据处理文件
 
export const  pairJobList=(jobList)=> {
  const result = [];
  for (let i = 0; i < jobList.length; i ++) {
    const pair = [jobList[i], jobList[i + 3]];
    //  我想要的排列方式是  1   2   3  4
    //                    5   6   7  8, 
    if (jobList[i + 3]){
      result.push(pair);
    }
  }
  return result;
}

Ts 复制代码

@Component
export struct Home_hotFirms {
  private  JobList=[
  new Job_Type($r('app.media.bykj'),'博彦科技','热招｜ JAVA开发工程师'),
  new Job_Type($r('app.media.byd'),'比亚迪','热招｜ C++'),
  new Job_Type($r('app.media.djzp'),'大疆创新','热招｜ 前端开发'),
  new Job_Type($r('app.media.hljw'),'鸿联九五','热招｜ 算法工程师'),
  new Job_Type($r('app.media.qxdj'),'轻喜到家','热招｜ 前端开发'),
  new Job_Type($r('app.media.zxhl'),'志行合力','热招｜ JAVA开发工程师'),
  new Job_Type($r('app.media.jd'),'京东集团','热招｜ 前端开发'),
  new Job_Type($r('app.media.tx'),'腾讯','热招｜ 鸿蒙开发'),
]
  private list=pairJobList(this.JobList) // 处理数据格式

  build(){
  Column(){
  Home_titleS({title:'热门企业'}).margin({bottom:10})
    this.builtJob()

}.margin(20)
.height(160)
  }

  @Builder builtJob(){
    List({space:8}){
      ForEach(this.list,(item:Job_Type[])=>{
        ListItem(){
        // 每个小数组加一个Column组件
          Column({space:8}){
            ForEach(item,(I:Job_Type)=>{
              Row(){
                Image(I.icon).JobIcon()
                Column(){
                  Text(I.name).fontSize(14).fontColor('#333').width(100).maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })
                  Text(I.AJob).fontSize(12).fontColor('#666').width(100).maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })
                }.alignItems(HorizontalAlign.Start)
              }.JobRow()
            })
          }
        }
      })
    }.listDirection(Axis.Horizontal)
  }
}

鸿蒙原生开发4.0 list组件横向排列

鸿蒙原生开发4.0 list组件横向排列 一行控制个数

鸿蒙原生开发4.0 list组件横向排列一行控制个数