我使用HarmonyOs Next开发了b站的首页

最新推荐文章于 2024-07-25 20:17:04 发布

探索星辰大海

最新推荐文章于 2024-07-25 20:17:04 发布

阅读量432

点赞数 1

文章标签： harmonyos 华为

本文链接：https://blog.csdn.net/qq_69183322/article/details/140229149

版权

1.实现效果展示：

2.图标准备

我使用的是iconfont图标，下面为项目中所使用到的图标

3. 代码

（1）Index.ets：

import {InfoTop} from '../component/InfoTop'
import {InfoCenter} from '../component/InfoCenter'
import {InfoBottom} from '../component/InfoBottom'

@Entry
@Component
struct Index {

  @State currentPage:number = 0

  build(){
    Column() {
      InfoTop()

      InfoCenter()

      InfoBottom({selectCurrent:this.currentPage})
    }
    .width('100%')
    .height('100%')
  }
}

（2）InfoTop 组件：

import font from '@ohos.font';

@Component
export struct InfoTop {

  aboutToAppear():void{
    font.registerFont({
      familyName:'infoTop',
      familySrc:'/fonts/iconfont.ttf'
    })

  }

  build(){
    
    Column(){

      Row(){
        Image($r('app.media.avatar'))
          .height(48)
          .width(48)
          .borderRadius(24)
          .margin({right:18})

        //搜索框
        Row(){
          Text('\ue7d2')
            .fontFamily('infoTop')
            .fontSize(20)

          Text('HarmonyOS Next')
            .textOverflow({overflow:TextOverflow.Ellipsis})
            .maxLines(1)
            .layoutWeight(1)

        }.border({
          width:1
        })
        .height(40)
        .layoutWeight(1)
        .padding(10)
        .borderRadius(20)


        Text('\ue613')
          .fontFamily('infoTop')
          .fontSize(35)
          .margin({left:24,right:18})

        Text('\ue673')
          .fontFamily('infoTop')
          .fontSize(35)

      }
      .width('100%')



    }.padding(10)
    .width('100%')

  }
}

（3）InfoCenter组件：

import font from '@ohos.font';
import {HomeRecommend} from './HomeRecommend'
@Component
export struct InfoCenter {
  aboutToAppear():void{
    font.registerFont({
      familyName:'infoCenter',
      familySrc:'/fonts/iconfont.ttf'
    })

  }

  @State navTop:string[] = ['直播','推荐','热门','动画','影视','新征程']

  @State selectCurrent:number = 1 //默认为推荐页面

  @State swiperImg:Resource[] = [
    $r('app.media.swiper_phone_01'),
    $r('app.media.swiper_phone_03'),
    $r('app.media.swiper_phone_00')]

  @Builder
  tabNavBuilder(index:number){
    Text(this.navTop[index])
      .border({
        width:{bottom:this.selectCurrent==index?2:0},
        color:this.selectCurrent==index?'#ffec839a':Color.Black
      })
      .fontColor(this.selectCurrent==index ?'#ffec839a':Color.Black)

      .textOverflow({overflow:TextOverflow.Clip})
      .maxLines(1)
  }

  @Builder
  moreBuilder(){
    Column(){
      Text('\ue643')
        .fontFamily('infoCenter')
        .fontSize(20)
        .backgroundColor(Color.White)
    }

  }



  build(){


    Column() {
      Tabs({barPosition:BarPosition.Start}){
        ForEach(this.navTop,(item:string,index)=>{
          TabContent(){
            //内容

            HomeRecommend()

          }.tabBar(this.tabNavBuilder(index))


          if(index == this.navTop.length-1){
            TabContent(){
            }.tabBar(this.moreBuilder())

          }
        })


      }
      .onChange((index:number)=>{
        if(index == this.navTop.length){
          console.log('跳转页面')
          return;
        }

        this.selectCurrent = index

      })



    }
    .height('80%')
    .width('100%')
  }
}

InfoCenter中的HomeRecommend组件

import font from '@ohos.font';

interface   recommendData{
  img:Resource
  title:string
  username:string
}

@Component
export struct HomeRecommend{
  aboutToAppear():void{
    font.registerFont({
      familyName:'recommendChannel',
      familySrc:'/fonts/iconfont.ttf'
    })
  }

  @State recommendList:recommendData[] = [
    {img:$r('app.media.harmonyOs'),title:'使用HarmonyOs Next开发b站首页的推荐,喜欢本期视频的观众朋友，可以关注一下up主',username:'XXX'},
    {img:$r('app.media.harmonyOs'),title:'使用HarmonyOs Next开发b站首页的推荐,喜欢本期视频的观众朋友，可以关注一下up主',username:'XXX'},
    {img:$r('app.media.harmonyOs'),title:'使用HarmonyOs Next开发b站首页的推荐,喜欢本期视频的观众朋友，可以关注一下up主',username:'XXX'},
    {img:$r('app.media.harmonyOs'),title:'使用HarmonyOs Next开发b站首页的推荐,喜欢本期视频的观众朋友，可以关注一下up主',username:'XXX'},
    {img:$r('app.media.harmonyOs'),title:'使用HarmonyOs Next开发b站首页的推荐,喜欢本期视频的观众朋友，可以关注一下up主',username:'XXX'},
    {img:$r('app.media.harmonyOs'),title:'使用HarmonyOs Next开发b站首页的推荐,喜欢本期视频的观众朋友，可以关注一下up主',username:'XXX'},
    {img:$r('app.media.harmonyOs'),title:'使用HarmonyOs Next开发b站首页的推荐,喜欢本期视频的观众朋友，可以关注一下up主',username:'XXX'},
    {img:$r('app.media.harmonyOs'),title:'使用HarmonyOs Next开发b站首页的推荐,喜欢本期视频的观众朋友，可以关注一下up主',username:'XXX'}]




  build(){
    Column(){

      Swiper(){
        Image($r('app.media.harmonyOs'))
        Image($r('app.media.harmonyOs'))
        Image($r('app.media.harmonyOs'))

      }.width('100%')
      .height(200)
      .autoPlay(true)
      .interval(2000)
      .margin(10)
      .indicator(
       Indicator.dot()
        .itemWidth(10)
        .itemHeight(10)
        .color(Color.Gray)
        .selectedItemWidth(10)
        .selectedItemHeight(10)
        .selectedColor(Color.White)
      )



      List(){
        ForEach(this.recommendList,(item:recommendData,index)=>{
          ListItem(){
            Column(){
              Image(item.img)
                .width('100%')
                .borderRadius({topRight:10,topLeft:10})

              Text(item.title)
                .textOverflow({overflow:TextOverflow.Ellipsis})
                .maxLines(2)
                .width('100%')
                .padding(5)

              Row(){
                Row({space:15}){
                  Text('\ue665')
                    .fontFamily('recommendChannel')
                    .margin({left:11})
                    .fontSize(22)

                  Text(item.username)

                }

                Text('\ue75f')
                  .fontFamily('recommendChannel')


              }
              .margin({top:10})
              .width('100%')
              .justifyContent(FlexAlign.SpaceBetween)

            }
            .backgroundColor(Color.White)
            .width('100%')

          }

        })

      }
      .padding(2)
      .lanes(2,15)


    }.backgroundColor('#ffefefef')
    .height('100%')
    .width('100%')

  }

}

（4）InfoBottom组件：

import font from '@ohos.font';

interface IBottomNav{
  title:string
  font:string
}

@Component
export struct InfoBottom{

  aboutToAppear():void{
    font.registerFont({
      familyName:'infoBottom',
      familySrc:'/fonts/iconfont.ttf'
    })

  }

  @Link selectCurrent:number

  @State bottomNav:IBottomNav[] = [
    { title:'首页',font:'\ue61f' },
    { title:'动态',font:'\ue625' },
    { title:'会员购',font:'\ue601' },
    { title:'我的',font:'\ue600' }]

  @State offsetNav:number = 0

  @Builder
  bottomNavBuilder(item:IBottomNav,index:number){
    Column(){
      Text(item.font)
        .fontFamily('infoBottom')
        .fontSize(40)
        //感觉图标1和图标2都有点细小，进行加粗
        .fontWeight(index == 0 || index == 1 ? FontWeight.Bold:FontWeight.Normal)
        .fontColor(this.selectCurrent == index ? '#fff162d2':Color.Black)

      Text(item.title)
        .fontColor(this.selectCurrent == index ? '#fff162d2':Color.Black)
    }
  }

  @Builder
  addBuilder(){
    Text('\ue696;')
      .fontFamily('infoBottom')
      .fontSize(60)
      .fontColor('#fff162d2')


  }



  build(){

    Column(){

      Tabs({barPosition:BarPosition.Start}){
        ForEach(this.bottomNav,(item:IBottomNav,index)=>{
          TabContent(){

          }
          .tabBar(this.bottomNavBuilder(item,index))


          //放在中间-1之后的第一位位置
          if(this.bottomNav.length/2 == index + 1){
            TabContent(){

            }
            .tabBar( this.addBuilder())

          }


        })

      }
      .animationDuration(0)
      .onChange((index:number)=>{
        if(index == this.bottomNav.length/2 ){
          //跳转上传页面
          return;
        }

        if(index > this.bottomNav.length/2 ){
          this.selectCurrent = index - 1
        }else{
          this.selectCurrent = index
        }


      })


    }.border({
      width:{top:1},
      style:BorderStyle.Dotted
    })
    .padding(5)
    .height(80)
    .width('100%')

  }
}