HarmonyOS NEXT开发实战教程--招聘app

这一周忙到起飞，只能在周末发个文章。今天的内容比较简单，是一个招聘app，适合新手友友参考，大佬们可以直接忽略。看一下效果图：这是一个比较常见的应用，大家做这类应用建议大家先分析一下应用和页面的结构，避免写完发现错了又改。这个应用首先有4个tabbaritem，是很常见的样式，使用系统的Tabs就可以实现： Tabs({barPosition:BarPosition.End}){ TabContent(){ Home() } .tabIndex(0) .tabBar(this.Tabbar($r('app.media.tab01'),'职位')) TabContent(){ Has() } .tabIndex(0) .tabBar(this.Tabbar($r('app.media.tab01'),'职位')) TabContent(){ Msg() } .tabIndex(0) .tabBar(this.Tabbar($r('app.media.tab01'),'职位')) TabContent(){ Mine() } .tabIndex(0) .tabBar(this.Tabbar($r('app.media.tab01'),'职位')) }.scrollable(false).expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]) 关于导航栏部分，可以看到它是一个渐变的颜色，而且延伸到了屏幕顶端，这种样式系统的导航栏不太容易实现，需要我们自定义导航栏，这个导航栏在上一篇文章中有过介绍，大家可以直接下载使用。到了列表部分，这个列表数据很多，看起来很复杂，但是只要稍加分析就可以很容易的实现，因为都是很基础的布局方式：列表的相关代码如下： List({space:10}){ ForEach(this.jobList,(item:JobClass,index)=>{ ListItem(){ Column(){ Row(){ Text(item.title) .fontSize(20) .fontColor('#151515') Text(item.money) .fontSize(19) .fontColor('#00B7C4') } .width('100%') .alignItems(VerticalAlign.Center) .justifyContent(FlexAlign.SpaceBetween) Text('李蛋个人设计团队未融资 0-20人') .fontColor('#5E5E5E') .fontSize(12) .margin({top:12}) Row({space:5}){ Text('1-3年') .backgroundColor('#F6F6F6') .padding({left:6,right:6,top:3,bottom:3}) .fontSize(10) .borderRadius(4) .fontColor('#626262') Text('学历不限') .backgroundColor('#F6F6F6') .padding({left:6,right:6,top:3,bottom:3}) .fontSize(10) .borderRadius(4) .fontColor('#626262') Text('设计软件') .backgroundColor('#F6F6F6') .padding({left:6,right:6,top:3,bottom:3}) .fontSize(10) .borderRadius(4) .fontColor('#626262') Text('经验不限') .backgroundColor('#F6F6F6') .padding({left:6,right:6,top:3,bottom:3}) .fontSize(10) .borderRadius(4) .fontColor('#626262') } .margin({top:8}) Row(){ Row(){ Image($r('app.media.headerImg')) .width(22) .height(22) Column({space:4}){ Text('李蛋·品牌经理') .fontSize(11) .fontColor('#151515') Text('今日回复5次') .fontSize(11) .fontColor('#848484') } .alignItems(HorizontalAlign.Start) .margin({left:7}) } Text('丛台区政府大厅') .fontSize(10) .fontColor('#848484') } .margin({top:14}) .width('100%') .justifyContent(FlexAlign.SpaceBetween) } .width('100%') .height(149) .backgroundColor(Color.White) .borderRadius(4) .padding({left:12,right:12,top:14,bottom:14}) .alignItems(HorizontalAlign.Start) } })} .padding({top:10,bottom:10}) 这代码不会自动换行了，难受。其实这应用还有两个页面，不过内容大同小异，不再赘述了：祝大家周末愉快。

Mar 23, 2025 - 11:23

这一周忙到起飞，只能在周末发个文章。今天的内容比较简单，是一个招聘app，适合新手友友参考，大佬们可以直接忽略。

看一下效果图：

这是一个比较常见的应用，大家做这类应用建议大家先分析一下应用和页面的结构，避免写完发现错了又改。

这个应用首先有4个tabbaritem，是很常见的样式，使用系统的Tabs就可以实现：

Tabs({barPosition:BarPosition.End}){  
  TabContent(){    
    Home()  
  }  
  .tabIndex(0)  
  .tabBar(this.Tabbar($r('app.media.tab01'),'职位'))  
  TabContent(){    
    Has()  
  }  
  .tabIndex(0)  
  .tabBar(this.Tabbar($r('app.media.tab01'),'职位'))  
  TabContent(){    
    Msg()  
  }  
  .tabIndex(0)  
  .tabBar(this.Tabbar($r('app.media.tab01'),'职位'))  
  TabContent(){    
    Mine()  
  }  
  .tabIndex(0)  
  .tabBar(this.Tabbar($r('app.media.tab01'),'职位'))
}.scrollable(false).expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

关于导航栏部分，可以看到它是一个渐变的颜色，而且延伸到了屏幕顶端，这种样式系统的导航栏不太容易实现，需要我们自定义导航栏，这个导航栏在上一篇文章中有过介绍，大家可以直接下载使用。

到了列表部分，这个列表数据很多，看起来很复杂，但是只要稍加分析就可以很容易的实现，因为都是很基础的布局方式：

列表的相关代码如下：

List({space:10}){
  ForEach(this.jobList,(item:JobClass,index)=>{
    ListItem(){
      Column(){
        Row(){
          Text(item.title)
            .fontSize(20)
            .fontColor('#151515')
          Text(item.money)
            .fontSize(19)
            .fontColor('#00B7C4')
        }
        .width('100%')
        .alignItems(VerticalAlign.Center)
        .justifyContent(FlexAlign.SpaceBetween)
        Text('李蛋个人设计团队  未融资  0-20人')
          .fontColor('#5E5E5E')
          .fontSize(12)
          .margin({top:12})
        Row({space:5}){
          Text('1-3年')
            .backgroundColor('#F6F6F6')
            .padding({left:6,right:6,top:3,bottom:3})
            .fontSize(10)
            .borderRadius(4)
            .fontColor('#626262')
          Text('学历不限')
            .backgroundColor('#F6F6F6')
            .padding({left:6,right:6,top:3,bottom:3})
            .fontSize(10)
            .borderRadius(4)
            .fontColor('#626262')
          Text('设计软件') 
           .backgroundColor('#F6F6F6')
            .padding({left:6,right:6,top:3,bottom:3})
            .fontSize(10)
            .borderRadius(4)
            .fontColor('#626262') 
         Text('经验不限')
            .backgroundColor('#F6F6F6')
            .padding({left:6,right:6,top:3,bottom:3})
            .fontSize(10)
            .borderRadius(4)
            .fontColor('#626262')
        } 
       .margin({top:8})
        Row(){
          Row(){
            Image($r('app.media.headerImg'))
              .width(22)
              .height(22)
            Column({space:4}){
              Text('李蛋·品牌经理')
                .fontSize(11)
                .fontColor('#151515')
              Text('今日回复5次') 
               .fontSize(11) 
               .fontColor('#848484')
            } 
           .alignItems(HorizontalAlign.Start)
            .margin({left:7})
          }
          Text('丛台区  政府大厅') 
           .fontSize(10)
            .fontColor('#848484')
        } 
       .margin({top:14})
        .width('100%')
        .justifyContent(FlexAlign.SpaceBetween) 
     } 
     .width('100%') 
     .height(149)
      .backgroundColor(Color.White)
      .borderRadius(4) 
     .padding({left:12,right:12,top:14,bottom:14})
      .alignItems(HorizontalAlign.Start)
    }
  })}
.padding({top:10,bottom:10})

这代码不会自动换行了，难受。

其实这应用还有两个页面，不过内容大同小异，不再赘述了：

祝大家周末愉快。