Location>code7788 >text

HarmonyOS NEXT Bottom Tab Features

Popularity：143 ℃/2024-10-09 17:29:03

Implementing a full bottom tab functionality in HarmonyOS NEXT using ArkTS can be done in the following steps:

  1. Creating Tabs Components: UseTabscomponent to create the bottom navigation bar with thebarPositionproperty sets its position to the bottom (）。

  2. Add TabContent subcomponent: inTabscomponent internally, creating aTabContentsubcomponents that will contain the content of each tab page.

  3. Configuring the TabBar: ByTabContent(used form a nominal expression)tabBarproperty to configure the title and icon of each tab. Custom functions can be usedtabBuilderto build the style of each tab, including icons and text.

  4. Setting Status and Controller: Use@Statedecorator to define the index of the currently selected tab and use theTabsControllerto control switching between tabs.

  5. Custom Styles: This can be done bybarMode、scrollableand other properties to customize the style and behavior of the navigation bar, such as setting it to a fixed width or scrolling display.

  6. event processing: ByonChangeevent to listen for tab switching and update the current state.

Below is a simple code example showing how to implement the bottom tab functionality using ArkTS:

@Entry
@Component
struct BottomTabExample {
  controller: TabsController = new TabsController()
  @State current: number = 0

  tabBuilder($$: { index: number; label: string; normalIcon: Resource; selectIcon: Resource }) {
    Column() {
      Image( === $$.index ? $$.selectIcon : $$.normalIcon).width(26)
      Text($$.label)
        .fontSize('12fp')
        .fontColor( === $$.index ? '#62C9D0' : '#909090')
        .margin({ top: 3 })
    }
    .width('100%')
    .onClick(() => {
       = $$.index
      ()
    })
  }

  build() {
    Column() {
      Tabs({ barPosition: , controller: }) {
        TabContent() {
          Text('Content of the home page')
        }.tabBar(({
          index: 0,
          label: 'home page (of a website)',
          normalIcon: $r('.tabbar11'),
          selectIcon: $r('.tabbar12')
        }))
        TabContent() {
          Text('What was found')
        }.tabBar(({
          index: 1,
          label: 'discoveries',
          normalIcon: $r('.tabbar21'),
          selectIcon: $r('.tabbar22')
        }))
        // ... (sth. or sb) elseTabContentconfigure
      }
      .width('100%')
      .barMode()
      .scrollable(true)
      .onChange(((index: number) => {
         = index
      }))
    }
    .width('100%')
    .backgroundColor('#f2f2f2')
  }
}

We created a bottom tab, each with corresponding content and icons. When the user clicks on a different tab, thetabBuilderfunction updates the index of the currently selected tab, and theTabsControllerwill handle the page switch. This is accomplished through theonChangeevents, we can listen to the changes in the tab and execute the corresponding logic. Learning Hongmeng NEXT development, domestic application development, all rely on you and me, cheers.

<Previous Next>