鸿蒙开发【页面路由跳转】绘制页面

6.6 给查看更多设置点击事件实现页面跳转

图片如下：

跳转需要进入的页面

6.6.1 描绘该跳转的关注的人的页面

新建一个pages页面命名为AttentionPage，在添加相应的内容布局

代码示例：

@Entry
@Component
struct AttentionPage {

build() {
  Column(){

    }

  }
}

6.6.1.1 设置顶部内容

代码示例：

Row(){
  Image($r('app.media.xiangzuo')).height(25).width(25)
    .onClick(()=>{
      router.back()
    })
  Text('关注').fontSize(20)
  Text('发现用户').fontSize(20)
}.justifyContent(FlexAlign.SpaceBetween)
.width('100%').padding(10)

Divider()

Divider 水平分割线，让整体布局更加美观

效果图：

6.6.1.2 绘制tab标签并且添加内容

（1）添加tab标签的自定义

代码示例：

@Entry
@Component
struct AttentionPage {

private tabsController:TabsController=new TabsController()

build() {

（2）tabs的布局以及tabcontent的内容

Tabs({ controller: this.tabsController}){
  TabContent(){

}.tabBar('关注的人')
TabContent(){

                                                                                                                                                                                                                                                        
}.tabBar('经常访问')
TabContent(){

}.tabBar('推荐')
TabContent(){

}.tabBar('超话')

6.6.1.3 利用Image组件和TextInput组件添加输入框

给关注的人标签里添加内容

代码示例：

ListItem(){
Column() {
  Row().height(12).width('100%').backgroundColor('#EDEDED')
  Row() {
    Stack() {
      Image($r('app.media.sousuo')).width(15).margin({ right: 120 })
      TextInput({ placeholder: '搜全部关注' }).textAlign(TextAlign.Center).width('95%')
    }
  }.padding(10)

6.6.1.4  利用线性布局组件描绘图片以及文本内容

(1) 设置Attention类分装

代码示例：

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

(2) 设置Atten 列表函数

代码示例：

@State  Atten:Array<Attention> =[
  new Attention($r('app.media.zuixin'),'特别关注'),
  new Attention($r('app.media.fabu'),'是TA的铁粉'),
  new Attention($r('app.media.zuixin'),'关注分组'),
  new Attention($r('app.media.renqi'),'兴趣主页