鸿蒙NEXT开发实战教程—小红书app

幽蓝君最近发现小红书是个好东西，一定要多逛

今天就浅浅模仿一下小红书app，主要是底部tab栏和主页部分。

首先看一下tabbar，由于中间有一个红色按钮的存在，所以这里我使用自定义导航栏来实现，自定义的实现逻辑是在本来app的上层叠加一层自定义tabbar，使用监听index的变化来改变tababr的状态，具体实现代码如下：

Column(){  
  if(!this.tabItem.middleMode){    
      Text(this.tabItem.title)      
        .fontSize(16)      
        .fontWeight(FontWeight.Bold)      
        .fontColor(this.isSelected ? '#000000' : '#B7B7B7')  
   }else {    
      Text('+')      
        .fontSize(30)      
        .width(50)      
        .height(30)      
        .backgroundColor(Color.Red)      
        .fontColor(Color.White)      
        .textAlign(TextAlign.Center)      
        .lineHeight(30)  
    }
}.backgroundColor(Color.White).width("100%").height(56).justifyContent(FlexAlign.Center)

Flex(){  
  ForEach(this.tab,(item:YLTabClass,index:number)=>{    
    YLTabbarItem({tabItem:item,isSelected:this.currentIndex === index})      
    .onClick(()=>{        
      if(index != 2){          
        this.currentIndex = index        
      }        
      this.tabItemClick(index);      
     }) 
 })}

然后来到主页部分，最上面是一个导航栏，这个导航栏使用系统的Navigation就可以实现，需要注意的地方是导航栏上有带角标的按钮，这个按钮在很多地方都有出现，比如tabbar上等等，所以把它抽出来做一个单独的组件：

Stack({alignContent:Alignment.TopEnd}){  
  Text(this.title)    
    .fontColor(this.isSelect?Color.Black: Color.Gray)    
    .fontSize(17)    
    .fontWeight(FontWeight.Bold)  
  if(this.badge > 0){   
     Text(this.badge.toString())      
       .width(16)      
       .height(16)      
       .fontSize(12)      
       .textAlign(TextAlign.Center)      
       .backgroundColor(Color.Red)      
       .fontColor(Color.White)      
       .borderRadius(8)      
       .margin({right:-10,top:-4})  
    }}.padding(10)

接下来是分类频道部分，这一部分比较简单，使用一个scroll组件就能实现：

Scroll(){  
  Row({space:20}){    
    ForEach(this.scrollTitleList,(str:string,index)=>{      
      Text(str)        
        .fontSize(16)        
        .fontColor(Color.Gray)    
      })  
 }}.scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off).width('100%')

最后主要内容部分是一个瀑布流，瀑布流看起来比较难，其实它和普通网格组件唯一的不同点是每一个图片的尺寸不同，瀑布流的相关代码如下：

WaterFlow() {  LazyForEach(this.dataSource, (item: number) => {    FlowItem() {      Column() {        Image('/pages/img/img' + item % 5 + '.jpg')          .objectFit(ImageFit.Fill)          .width('100%')          .height(this.itemHeightArray[item % 100])        Text('和闺蜜在一起能长寿 ')          .fontColor(Color.Black)          .fontSize(15)          .margin({top:6})        Row(){          Row(){            Image($r('app.media.header'))              .width(20)              .height(20)              .backgroundColor(Color.Gray)              .borderRadius(10)            Text('这里是昵称')              .fontColor(Color.Gray)              .fontSize(13)              .margin({left:4})          }          .alignItems(VerticalAlign.Center)          Text('3233')            .fontColor(Color.Gray)            .fontSize(13)        }        .margin({top:6})        .width('100%')        .alignItems(VerticalAlign.Center)        .justifyContent(FlexAlign.SpaceBetween)      }      .alignItems(HorizontalAlign.Start)    }    .width('100%')  }, (item: string) => item)}.padding({left:5,right:5}).columnsTemplate("1fr 1fr").columnsGap(8).rowsGap(5).backgroundColor(Color.White).width('100%').height('100%')