鸿蒙开发【微博首页】实操

一、创建页面并且绘制页面顶部内容

1. 创建页面命名为MicroBlogPage,自定义组件tab标签

代码如下：

@Entry

@Component
export struct MicroBlogPage {

@State currentIndex:number=0
private tabsController:TabsController=new TabsController()
@Builder TabBuilder(title:string,targetIndex:number,selectedImg: Resource, normalImg: Resource){
  Column() {
    Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
      .size({ width: 25, height: 25 }).margin({top:20})
    Text(title)
      .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
  }
  .width('100%')
  .height(50)
  .justifyContent(FlexAlign.Center)

  .onClick(()=>{
    this.currentIndex=targetIndex
    this.tabsController.changeIndex(this.currentIndex)
  })
}

build() {
    Column() {

}

}

}

2. 在build()里面利用层叠组件添加页面顶部内容

需要实现的效果图：

同一容器中兄弟组件显示层级关系。zIndex值越大，显示层级越高，即zIndex值大的组件会覆盖在zIndex值小的组件上方。

代码如下：

build() {
    Column() {
      Stack({ alignContent: Alignment.TopStart }) {
        Row() {
          Image($r('app.media.sign_in')).fancy().margin({ top: 20, left: 20 })
    
        }
        .zIndex(10)

Stack({ alignContent: Alignment.TopEnd }) {
  Row({space:10}) {
    Image($r('app.media.red')).fancy().width(40)
    Image($r('app.media.add')).fancy()
   
  }.width(90)
  .zIndex(10) //同一容器中兄弟组件显示层级关系。
  // zIndex值越大，显示层级越高，即zIndex值大的组件会覆盖在zIndex值小的组件上方。

3.添加顶部标签样式

代码示例：

Tabs({ barPosition: BarPosition.Start,controller:this.tabsController }) {
  TabContent() {

}.tabBar('关注')

TabContent() {

}.tabBar('推荐')

}

二、利用ForEach循环渲染、List组件实现图片文本布局的水平方向滑动

1. 利用divider设置水平分割线

代码示例：

Row() {
  Divider().backgroundColor('#EDEDED')
}.justifyContent(FlexAlign.Start)

2.定义类ImageItem封装

 class ImageItem {
  image: ResourceStr
  name:string

  constructor(image: ResourceStr,name:string) {
    this.name=name
    this.image =image
  }
}

3.创建自定义函数list

@State  list:Array<ImageItem> =[
  new ImageItem($r('app.media.listen'),'听听'),
  new ImageItem($r('app.media.grant'),'种地吧'),
  new ImageItem($r('app.media.lian'),'颐莲'),
  new ImageItem($r('app.media.plant'),'种地星球'),
  new ImageItem($r('app.media.begger'),'贵族乞丐'),
  new ImageItem($r('app.media.listen'),'听听'),
  new ImageItem($r('app.media.grant'),'种地吧'),
  new ImageItem($r('app.media.lian'),'颐莲'),
  new ImageItem($r('app.media.plant'),'种地星球'),
  new ImageItem($r('app.media.begger'),'贵族乞丐')
]

4. 设置图片的样式fancy( )方便调用

@Styles function fancy() {
  .height(25)
  .width(25)
  .margin({top:20})
}

5.利用Builder  定义函数Item Card

代码示例：

@Builder  function  ItemCard(item:ImageItem){
  Row(){
    Column({space:5}){
      Image(item.image).width(50).height(50)
      Text(item.name)
    }
  }.height(50)
  .margin({left:20,top:5})

}

6.利用list组件以及循环渲染

代码示例：

List() {
  ForEach(this.list, (item: ImageItem) => {
    ListItem() {
      //直接调用定义的ItemCard函数
      ItemCard(item)
    }
  })
}
.height(100)
.listDirection(Axis.Horizontal)

listDirection(Axis.Horizontal) 对于list设置在水平方向上的滑动。

三、利用线性布局Row属性添加文本

代码示例：

Row({ space: 20 }) {
  Text('近期热门人物推荐')
  Text('查看更多').fontColor('#36D')

}
.width('100%').height(50)
.justifyContent(FlexAlign.SpaceAround)

四、利用线性布局组件，以及ForEach循环渲染

1.设置任务推荐左右滑动，定义类CheckMany

class CheckMany{
  image: ResourceStr
  title:string
  content:string
  constructor(image: ResourceStr,title:string,content:string) {
    this.image =image
    this.title =title
    this.content=content
  }
}

2.自定义arr列表组件函数

@State arr:Array<CheckMany> =[
  new CheckMany($r('app.media.image_1'),'行走的一条尾鱼','你可能感兴趣的人'),
  new CheckMany($r('app.media.image_2'),'一线明星','你可能感兴趣的人'),
  new CheckMany($r('app.media.image_1'),'行走的一条尾鱼','你可能感兴趣的人'),
  new CheckMany($r('app.media.image_2'),'一线明星','你可能感兴趣的人'),
  new CheckMany($r('app.media.image_1'),'行走的一条尾鱼','你可能感兴趣的人'),
  new CheckMany($r('app.media.image_2'),'一线明星','你可能感兴趣的人'),
]

3.创建自定义函数CheckToal

@Builder function CheckToal(item:CheckMany){
  Row({ space: 10 }) {
    Column({ space: 8 }) {
      Image(item.image).height(80).width(80)
      Text(item.title).fontSize(20).fontWeight(FontWeight.Bold)
      Text(item.content)
      Button('+ 关注').backgroundColor(Color.Orange).width(120).height(30)
    }
    .height(200)
    .border({ style: BorderStyle.Solid, width: 1, radius: 15, color: Color.Grey })
    .padding(8).margin(8)
  }.height(200)

}

4.利用list组件以及循环渲染

代码示例：

//设置人物推荐左右滑动
List() {
  ForEach(this.arr, (item: CheckMany) => {
    ListItem() {
      CheckToal(item)
    }
  })
}.height(200)
.listDirection(Axis.Horizontal)

五、设置关注人物动态内容

1.定义类Though对关注人物封装

 class Though{
  Himg:ResourceStr
  name:string
  img1:ResourceStr
  img2:ResourceStr
  img3:ResourceStr
  title:string
  content:string
  Bimg:ResourceStr
  constructor( Himg:ResourceStr,name:string,img1:ResourceStr, img2:ResourceStr,img3:ResourceStr,title:string,content:string,Bimg:ResourceStr ) {
    this.Himg=Himg
    this.name=name
    this.img1=img1
    this.img2 = img2
    this.img3 =img3
    this.title = title
    this.content =content
    this.Bimg = Bimg
  }
}

2.自定义tho列表组件函数

代码示例：

@State tho:Array<Though> =[
  new Though($r('app.media.bhead'),'白敬亭',$r('app.media.bhead0'),$r('app.media.bhead1'),$r('app.media.bhead2'),'18小时前  来自 已关注','今日穿搭',$r('app.media.baijinting')),
  new Though($r('app.media.liuyifei'),'刘亦菲',$r('app.media.bhead0'),$r('app.media.liuyifeih'),$r('app.media.bhead2'),'11小时前  来自 已关注','刘亦菲春游plog',$r('app.media.bliuyifei')),
  new Though($r('app.media.bhead'),'白敬亭',$r('app.media.bhead0'),$r('app.media.bhead1'),$r('app.media.bhead2'),'18小时前  来自 已关注','今日穿搭',$r('app.media.baijinting')),
  new Though($r('app.media.liuyifei'),'刘亦菲',$r('app.media.bhead0'),$r('app.media.liuyifeih'),$r('app.media.bhead2'),'11小时前  来自 已关注','刘亦菲春游plog',$r('app.media.bliuyifei')),
]

3.创建自定义函数ThoughT

代码示例：

@Builder export  function ThoughT(item:Though){
  Column(){
    Row({space:10}){
      Image(item.Himg).width(50).height(50)
      Column({space:5}){
        Row({space:10}){
          Text(item.name).fontSize(18)
          Image(item.img1).width(50).height(30)
          Image(item.img2).width(80).height(40).margin({top:10,left:30})
          Image(item.img3).width(20).height(20).margin({bottom:15})
                    }
        Row(){
          Text(item.title).fontColor(Color.Grey).margin({right:150})
        }
      }
    }
    Column(){
      Text(item.content).fontSize(18)
      Image(item.Bimg).width(350).height(200)
    }.alignItems(HorizontalAlign.Start)

    Divider().height(20)
    Row(){
      Image($r('app.media.meme')).height(50).width(50)
      TextInput({placeholder:'友善评论，文明发言'}).width('80%')
    }
    Row({space:50}){
      Row({space:5}){
        Image($r('app.media.zhuanfa')).width(20).height(20)
        Text('18.7万')
      }
      Row({space:5}){
        Image($r('app.media.red')).width(40).height(20)
        Text('5.3万')
      }
      Row({space:5}){
        Image($r('app.media.dianzan')).width(20).height(20)
        Text('28.3万')
      }
    }.height(40)
    Row().height(10).width('100%').backgroundColor('#EDEDED')

  }.height('65%')
}

4.利用list组件以及循环渲染

代码示例：

Divider().backgroundColor(Color.White).height(10)
//设置关注人物态
List() {
  ForEach(this.tho, (item: Though) => {
    ListItem() {
      ThoughT(item)
    }
  })
}

5.给添加标志设置Mean菜单选项

（1).自定义SelMeanu类用来封装

class SelMeanu{
  image: ResourceStr
  name:string
  constructor(image: ResourceStr,name:string) {
    this.image = image
    this.name = name
  }
}

(2).定义构造函数列表Menu

//菜单
  private Menu:Array<SelMeanu>=[
    new SelMeanu($r('app.media.wei_bo'),'写微博'),
    new SelMeanu($r('app.media.phtoto'),'图片'),
    new SelMeanu($r('app.media.video_1'),'视频'),
    new SelMeanu($r('app.media.dian_ping'),'点评'),
    new SelMeanu($r('app.media.swiper1'),'直播'),
  ]

(3).创建菜单自定义组件，ForEach 循环渲染

//菜单自定义组件
  @Builder   MenuContent() {
  Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
    ForEach(this.Menu, (item:SelMeanu) => {
      Column() {
        Row() {
          Image(item.image).width(20).height(20).margin({ right: 5 })
          Text(item.name).fontSize(20)
        }
        .width('100%')
        .height(30)
        .justifyContent(FlexAlign.Center)
        .align(Alignment.Center)
        .onClick(() => {
          console.log('成功')
        })
      }.padding(5).height(50)
    })
  }.width(100)
}

(4).在添加图片直接调用菜单内容

Image($r('app.media.add')).fancy()
  .bindMenu(this.MenuContent())

(5)运行效果：