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})

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

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