[harmonyos] [arkui] Hongmeng ETS method tabs+tabcontent realizes the bottom navigation bar

  In Hongmeng development tab Switch function （ As shown in the figure below ） Is a very common function , Today, describe how to realize the following functions ？ What materials need to be prepared in development ？

Today we have “ Data preparation ”,“Tabs Function realization ”,“ Bottom button function realization ”,“ Running effect ” Four aspects are described

1. The development of preparation

1.1 Data preparation If you want to realize the function shown in the figure above , Need to learn “Tabs”,“TabContent”,“ Row”,“Column”, And so on
1.2 Picture preparation Prepare six pictures （ The picture is as follows ） Put it in resources/base/media/ Under the table of contents

Where pictures are stored

2. Tabs Function realization

2.1 Details reference “Tabs”,“TabContent” Official documents of
The code is as follows

@Entry
@Component
struct MyNewsIndex {
  private controller: TabsController = new TabsController()
 
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Tabs({ controller: this.controller }) {
        TabContent() {
          Text(" home page ")
            .width('100%').height('100%')
            .fontSize(50)
            .textAlign(TextAlign.Center)
            .fontColor(Color.White)
            .backgroundColor(Color.Pink)
        }.tabBar(' home page ')
        TabContent() {
          Text(" news ")
            .width('100%').height('100%')
            .fontSize(50)
            .textAlign(TextAlign.Center)
            .fontColor(Color.White)
            .backgroundColor(Color.Blue)
        }.tabBar(' news ')
        TabContent() {
          Text(" my ")
            .width('100%').height('100%')
            .fontSize(50)
            .textAlign(TextAlign.Center)
            .fontColor(Color.White)
            .backgroundColor(Color.Red)
        }.tabBar(' my ')
      }
      .scrollable(false)
      .barHeight(0)
      .animationDuration(0)

     
      }.alignItems(VerticalAlign.Bottom).width('100%').height(120).margin({top:0,right:0,bottom:10,left:0})
    }
    .width('100%')
    .height('100%')
  }
}

The effect is as follows

3 Bottom button function realization

3.1 The bottom function realization mainly uses “Row”,“Column”,“Text”,“Image” And other related technologies , The code is as follows

Row() {
        Column(){
          Image($r('app.media.index_select'))
            .width(60).height(60)
          Text(' home page ')
            .size({ width: '100%', height: 60 }).textAlign(TextAlign.Center)
            .fontSize(20)
            .fontColor(Color.Red)
        }
        .layoutWeight(1)
        .backgroundColor(0xFFEFD5)
        .height("100%")

        Column(){
          Image($r('app.media.msg_unselect'))
            .width(60).height(60)
          Text(' news ')
            .size({ width: '100%', height: 60 }).textAlign(TextAlign.Center)
            .fontSize(20)
            .fontColor(Color.Black)
        }
        .layoutWeight(1)
        .backgroundColor(0xFFEFD5)
        .height("100%")

        Column(){
          Image($r('app.media.my_unselect'))
            .width(60).height(60)
          Text(' my ')
            .size({ width: '100%', height: 60 }).textAlign(TextAlign.Center)
            .fontSize(20)
            .fontColor(Color.Black)
        }
        .layoutWeight(1)
        .backgroundColor(0xFFEFD5)
        .height("100%")
      }.alignItems(VerticalAlign.Bottom).width('100%').height(120).margin({top:0,right:0,bottom:10,left:0})

4 Running effect

4.1 Tabs And button linkage
We are defining a global variable SelectPos For the currently selected index , When the button is clicked, the current index is assigned , Also on Image And font color , All codes are as follows

@Entry
@Component
struct MyNewsIndex {
  private controller: TabsController = new TabsController()
  @State SelectPos:number=0;
  public IndexClick(){
    this.SelectPos=0;
    this.controller.changeIndex(0)
  }
  public messageClick(){
    this.SelectPos=1;
    this.controller.changeIndex(1)
  }
  public myClick(){
    this.SelectPos=2;
    this.controller.changeIndex(2)
  }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Tabs({ controller: this.controller }) {
        TabContent() {
          Text(" home page ")
            .width('100%').height('100%')
            .fontSize(50)
            .textAlign(TextAlign.Center)
            .fontColor(Color.White)
            .backgroundColor(Color.Pink)
        }.tabBar(' home page ')
        TabContent() {
          Text(" news ")
            .width('100%').height('100%')
            .fontSize(50)
            .textAlign(TextAlign.Center)
            .fontColor(Color.White)
            .backgroundColor(Color.Blue)
        }.tabBar(' news ')
        TabContent() {
          Text(" my ")
            .width('100%').height('100%')
            .fontSize(50)
            .textAlign(TextAlign.Center)
            .fontColor(Color.White)
            .backgroundColor(Color.Red)
        }.tabBar(' my ')
      }
      .scrollable(false)
      .barHeight(0)
      .animationDuration(0)

      Row() {
        Column(){
          Image((this.SelectPos==0?$r('app.media.index_select'):$r('app.media.index_unselect')))
            .width(60).height(60)
          Text(' home page ')
            .size({ width: '100%', height: 60 }).textAlign(TextAlign.Center)
            .fontSize(20)
            .fontColor((this.SelectPos==0?Color.Red:Color.Black))
        }
        .layoutWeight(1)
        .backgroundColor(0xFFEFD5)
        .height("100%")
        .onClick(this.IndexClick.bind(this))

        Column(){
          Image((this.SelectPos==1?$r('app.media.msg_select'):$r('app.media.msg_unselect')))
            .width(60).height(60)
          Text(' news ')
            .size({ width: '100%', height: 60 }).textAlign(TextAlign.Center)
            .fontSize(20)
            .fontColor((this.SelectPos==1?Color.Red:Color.Black))
        }
        .layoutWeight(1)
        .backgroundColor(0xFFEFD5)
        .height("100%")
        .onClick(this.messageClick.bind(this))

        Column(){
          Image((this.SelectPos==2?$r('app.media.my_select'):$r('app.media.my_unselect')))
            .width(60).height(60)
          Text(' my ')
            .size({ width: '100%', height: 60 }).textAlign(TextAlign.Center)
            .fontSize(20)
            .fontColor((this.SelectPos==2?Color.Red:Color.Black))
        }
        .layoutWeight(1)
        .backgroundColor(0xFFEFD5)
        .height("100%")
        .onClick(this.myClick.bind(this))
      }.alignItems(VerticalAlign.Bottom).width('100%').height(120).margin({top:0,right:0,bottom:10,left:0})


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

The operation effect is as follows

More relevant learning materials ：
https://developer.huawei.com/consumer/cn/forum/topic/0201787474595650145?fid=0102683795438680754?ha_source=zzh