Detailed explanation of navigation component of openharmony application development

Page navigation （Navigation）

Navigation

  As a general Page The root container of the page , Display the title of the page through property settings 、 It provides a series of attribute methods to set the title bar of the page 、 Various display styles of toolbars and menu bars . 

Navigation

  In addition to providing default display style attributes , It also provides  

CustomBuilder

  The mode defines the display style , This section will introduce  

Navigation

  Simple usage and use of each attribute  

CustomBuilder

  Implement custom styles .

Navigation Definition Introduction

interface NavigationInterface {
 /**
 * Called when the navigator view interface is used.
 
 */
 (): NavigationAttribute;
}


Navigation

  The definition of does not need to pass related parameters , Let's take a look first  

Navigation

  The simplest example of ：

@Entry
@Component
struct ResourceTest {
 @State text_string: string = " Learn from nuts OpenHarmony application development ";

 build() {
 Navigation() { // Navigation Can only contain one subcomponent
 }
 }
}


The results are shown in the following figure ：

According to the running results , By default , 

Navigation

  The style of is composed of a title bar with a return arrow .

Navigation Property introduction

We can click on its method to have a look , First of all, he also inherited CommonMethod, Then customize it .

declare class NavigationAttribute extends CommonMethod<NavigationAttribute> {
 /**
 *  Set the title of the navigation bar , When the parameter type is  `string`  when , You can set the title directly , When the parameter is  `CustomBuilder`  when , You can customize the title style .

 */
 title(value: string | CustomBuilder): NavigationAttribute;

 /**
 * Navigation subtitle

 */
 subTitle(value: string): NavigationAttribute;

 /**
 * Hide navigation bar
 */
 hideTitleBar(value: boolean): NavigationAttribute;

 /**
 * Hide navigation back button
 
 */
 hideBackButton(value: boolean): NavigationAttribute;

 /**
 * Navigation title mode
 
 */
 titleMode(value: NavigationTitleMode): NavigationAttribute;

 /**
 * Navigation title bar's menus
 
 */
 menus(value: Array<NavigationMenuItem> | CustomBuilder): NavigationAttribute;

 /**
 * Tool bar
 
 */
 toolBar(value: object | CustomBuilder): NavigationAttribute;

 /**
 * Hide tool bar
 
 */
 hideToolBar(value: boolean): NavigationAttribute;

 /**
 * Trigger callback when title mode change finished at free mode.
 
 */
 onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void): NavigationAttribute;
}


title

： Set the title of the navigation bar , When the parameter type is  

string

  when , You can set the title directly , But the style doesn't need to be modified ; When the parameter is  

CustomBuilder

  when , You can customize the title style .

• Parameter type is  
  string
   , A simple example is shown below ：

 @Entry
 @Component
 struct ResourceTest {
 @State content: string = " Learn from nuts OpenHarmony application development ";
 @State title: string = " This is a title, ";
 
 build() {
 Navigation() {
 Text(this.content)
 .textAlign(TextAlign.Center)
 .fontSize(30)
 .backgroundColor(Color.Orange)
 .size({ width: '100%', height: '100%' })
 }
 .size({ width: '100%', height: '100%' })
 .title(this.title) //  Set up title, Changing the text size is not supported at this time , Color, etc
 }
 }


The sample running results are shown in the following figure ：

• Parameter type is  
  CustomBuilder
   , A simple example is shown below ：

 @Entry
 @Component
 struct ResourceTest {
 @State content: string = " Learn from nuts OpenHarmony application development ";
 @State title: string = " This is a title, ";
 @Builder titleWidget() {//  adopt Builder Custom title bar , You can flexibly set the title style
 Row() {
 
 Text(this.title).textAlign(TextAlign.Center)
 .fontSize(20).margin({right:20})
 Image($r("app.media.door_lock")).width(30)
 }.justifyContent(FlexAlign.Center)
 .width('100%')
 .height(30)
 .backgroundColor(Color.Gray)
 }
 
 
 build() {
 Navigation() {
 Text(this.content)
 .textAlign(TextAlign.Center)
 .fontSize(30)
 .backgroundColor(Color.Orange)
 .size({ width: '100%', height: '100%' })
 }
 .size({ width: '100%', height: '100%' })
 .title(this.titleWidget) //  Set up title, Changing the text size is not supported at this time , Color, etc
 }
 }


The sample running results are shown in the following figure ( In order to observe more carefully , I only cut the top half )：

subTitle

： Set the subtitle of the page , A simple example is shown below ：

@Entry
@Component
struct ResourceTest {
 @State content: string = " Learn from nuts OpenHarmony application development ";
 @State title: string = " This is a title, ";
 @State sub_title: string = " This is the subtitle ";
 @Builder titleWidget() {//  adopt Builder Custom title bar , You can flexibly set the title style
 Row() {

 Text(this.title).textAlign(TextAlign.Center)
 .fontSize(20).margin({right:20})
 Image($r("app.media.door_lock")).width(30)
 }.justifyContent(FlexAlign.Center)
 .width('100%')
 .height(30)
 .backgroundColor(Color.Gray)
 }


 build() {
 Navigation() {
 Text(this.content)
 .textAlign(TextAlign.Center)
 .fontSize(30)
 .backgroundColor(Color.Orange)
 .size({ width: '100%', height: '100%' })
 }
 .size({ width: '100%', height: '100%' })
 .title(this.titleWidget) //  Set up title, Changing the text size is not supported at this time , Color, etc
 .subTitle(this.sub_title)
 }
}


The sample running results are shown in the following figure ：

hideBackButton： Whether to hide the return button , By default, it is not hidden , A simple example is shown below ：

@Entry
@Component
struct ResourceTest {
 @State content: string = " Learn from nuts OpenHarmony application development ";
 @State title: string = " This is a title, ";
 @State sub_title: string = " This is the subtitle ";
 @Builder titleWidget() {//  adopt Builder Custom title bar , You can flexibly set the title style
 Row() {

 Text(this.title).textAlign(TextAlign.Center)
 .fontSize(20).margin({right:20})
 Image($r("app.media.door_lock")).width(30)
 }.justifyContent(FlexAlign.Center)
 .width('100%')
 .height(30)
 .backgroundColor(Color.Gray)
 }


 build() {
 Navigation() {
 Text(this.content)
 .textAlign(TextAlign.Center)
 .fontSize(30)
 .backgroundColor(Color.Orange)
 .size({ width: '100%', height: '100%' })
 }
 .size({ width: '100%', height: '100%' })
 .title(this.titleWidget) //  Set up title, Changing the text size is not supported at this time , Color, etc
 .subTitle(this.sub_title)//  Set up subTitle, Changing the text size is not supported at this time , Color, etc
 .hideBackButton(true)
 }
}


The sample running results are shown in the following figure ：

toolBar

： Set up the toolbar , When the parameter type is  

object

  when , You can set toolbar options directly , But the style doesn't need to be modified ; When the parameter is  

CustomBuilder

  when , You can customize the title bar .

• When the parameter is  
  object
    Type , Parameters need to be defined in the following format ：

• value
  ： The display text of a single option in the toolbar .

• icon
  ： Icon resource path of a single option in the toolbar .

• action
  ： Event callback when the current option is selected .

• A simple example is shown below ：

 @Entry
 @Component
 struct ResourceTest {
 @State content: string = " Learn from nuts OpenHarmony application development ";
 @State title: string = " This is a title, ";
 @State sub_title: string = " This is the subtitle ";
 
 @Builder titleWidget() { //  adopt Builder Custom title bar , You can flexibly set the title style
 Row() {
 
 Text(this.title).textAlign(TextAlign.Center)
 .fontSize(20).margin({ right: 20 })
 Image($r("app.media.door_lock")).width(30)
 }.justifyContent(FlexAlign.Center)
 .width('100%')
 .height(30)
 .backgroundColor(Color.Gray)
 }
 
 build() {
 Navigation() {
 Text(this.content)
 .textAlign(TextAlign.Center)
 .fontSize(30)
 .backgroundColor(Color.Orange)
 .size({ width: '100%', height: '100%' })
 }
 .size({ width: '100%', height: '100%' })
 .title(this.titleWidget) //  Set up title, Changing the text size is not supported at this time , Color, etc
 .subTitle(this.sub_title) //  Set up subTitle, Changing the text size is not supported at this time , Color, etc
 .hideBackButton(true)
 .toolBar({ items: [ // toolBar Receive an array
 {
 value: " news ", //  Text
 
 action: () => { //  event
 console.log(" Click on the message ")
 }
 },
 {
 value: " dynamic ",
 
 action: () => {
 console.log(" Click the home page ")
 }
 },
 {
 value: " my ",
 action: () => {
 console.log(" Click the home page ")
 }
 }
 ] })
 }
 }


The sample running results are shown in the following figure ：

• When the parameter is  
  CustomBuilder
    Type , Styles can be customized , A simple example is shown below ：

 @Entry @Component struct ComponentTest {
 
 @State index: number = 0;//  Tab subscript , Default to first
 
 @Builder toolbarWidget() {//  adopt builder Customize toolbar
 Row() {
 Column() {
 Image(this.index == 0 ? 'common/images/tab-home-Select.png' : 'common/images/tab-home-Unchecked.png')
 .size({width: 25, height: 25}).margin({bottom:4,top:4})
 Text(' Home page ')
 .fontSize(16)
 .fontColor(this.index == 0 ? Color.Orange : null)
 }
 .alignItems(HorizontalAlign.Center)
 .height('100%')
 .layoutWeight(1)
 .onClick(() => {
 this.index = 0;
 })
 
 Column() {
 Image(this.index == 1 ? 'common/images/tab-my-Select.png' : 'common/images/tab-my-Unchecked.png')
 .size({width: 25, height: 25}).margin({bottom:4,top:4})
 Text(' Wang Wang ')
 .fontSize(16)
 .fontColor(this.index == 1 ? Color.Orange : null)
 }
 .alignItems(HorizontalAlign.Center)
 .height('100%')
 .layoutWeight(1)
 .onClick(() => {
 this.index = 1;
 })
 
 Column() {
 Image(this.index == 2 ? 'common/images/tab-news-Select.png' : 'common/images/tab-news-Unchecked.png')
 .size({width: 25, height: 25}).margin({bottom:4,top:4})
 Text(' news ')
 .fontSize(16)
 .fontColor(this.index == 2 ? Color.Orange : null)
 }
 .alignItems(HorizontalAlign.Center)
 .height('100%')
 .layoutWeight(1)
 .onClick(() => {
 this.index = 2;
 })
 }
 .width('100%')
 .height(60)
 }
 
 build() {
 Navigation() {
 Text(this.index == 0 ? " Home page " : this.index == 1 ? " Wang Wang " : " news ")
 .textAlign(TextAlign.Center)
 .fontSize(30)
 .size({width: '100%', height: '100%'})
 .backgroundColor(Color.Orange)
 }
 .size({width: '100%', height: '100%'})
 .title(" Learn from nuts OpenHarmony")
 .toolBar(this.toolbarWidget())
 }
 }


The sample running results are shown in the following figure ：

hideTitleBar

、

hideToolBar

： Set whether to show or hide the title bar 、 The toolbar , A simple example is shown below ：

@Entry @Component struct ComponentTest {

 @State index: number = 0;//  Tab subscript , Default to first
 @State hideToolBar: boolean = false;
 @State hideTitleBar: boolean = false;

 @Builder toolbarWidget() {//  adopt builder Customize toolbar
 Row() {
 Column() {
 Image(this.index == 0 ? 'common/images/tab-home-Select.png' : 'common/images/tab-home-Unchecked.png')
 .size({width: 25, height: 25}).margin({bottom:4,top:4})
 Text(' Home page ')
 .fontSize(16)
 .fontColor(this.index == 0 ? Color.Orange : null)
 }
 .alignItems(HorizontalAlign.Center)
 .height('100%')
 .layoutWeight(1)
 .onClick(() => {
 this.index = 0;
 })

 Column() {
 Image(this.index == 1 ? 'common/images/tab-my-Select.png' : 'common/images/tab-my-Unchecked.png')
 .size({width: 25, height: 25}).margin({bottom:4,top:4})
 Text(' Wang Wang ')
 .fontSize(16)
 .fontColor(this.index == 1 ? Color.Orange : null)
 }
 .alignItems(HorizontalAlign.Center)
 .height('100%')
 .layoutWeight(1)
 .onClick(() => {
 this.index = 1;
 })

 Column() {
 Image(this.index == 2 ? 'common/images/tab-news-Select.png' : 'common/images/tab-news-Unchecked.png')
 .size({width: 25, height: 25}).margin({bottom:4,top:4})
 Text(' news ')
 .fontSize(16)
 .fontColor(this.index == 2 ? Color.Orange : null)
 }
 .alignItems(HorizontalAlign.Center)
 .height('100%')
 .layoutWeight(1)
 .onClick(() => {
 this.index = 2;
 })
 }
 .width('100%')
 .height(60)
 }

 build() {
 Navigation() {
 Column({space: 20}) {
 Text(this.index == 0 ? " Home page " : this.index == 1 ? " Wang Wang " : " news ")
 .textAlign(TextAlign.Center)
 .fontSize(30)

 Button(this.hideTitleBar ? " Show TitleBar" : " hide TitleBar")
 .onClick(() => {
 this.hideTitleBar = !this.hideTitleBar;
 }).backgroundColor(Color.Green)


 Button(this.hideToolBar ? " Show ToolBar" : " hide ToolBar")
 .onClick(() => {
 this.hideToolBar = !this.hideToolBar;
 }).backgroundColor(Color.Red)
 }
 .backgroundColor(Color.Orange).justifyContent(FlexAlign.SpaceAround).alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center)
 .size({width: '100%', height: '100%'})
 }
 .size({width: '100%', height: '100%'})
 .title(" Learn from nuts OpenHarmony")
 .toolBar(this.toolbarWidget()) .hideToolBar(this.hideToolBar)
 .hideTitleBar(this.hideTitleBar)
 }
}


The sample running results are shown in the following figure ：

menus

： Set the menu item in the upper right corner of the title bar , When the parameter is  

CustomBuilder

  You can customize menu items .

• When the parameter is  
  NavigationMenuItem
    Array time , The parameters are described as follows ：

• value
  ： The display text of the menu item .

• icon
  ： Display icon path of menu item .

• action
  ： Click the event callback of the menu item .

• A simple example is shown below ：

 @Entry @Component struct ComponentTest {
 
 @State index: number = 0;//  Tab subscript , Default to first
 @State hideToolBar: boolean = false;
 @State hideTitleBar: boolean = false;
 
 @Builder toolbarWidget() {//  adopt builder Customize toolbar
 Row() {
 Column() {
 Image(this.index == 0 ? 'common/images/tab-home-Select.png' : 'common/images/tab-home-Unchecked.png')
 .size({width: 25, height: 25}).margin({bottom:4,top:4})
 Text(' Home page ')
 .fontSize(16)
 .fontColor(this.index == 0 ? Color.Orange : null)
 }
 .alignItems(HorizontalAlign.Center)
 .height('100%')
 .layoutWeight(1)
 .onClick(() => {
 this.index = 0;
 })
 
 Column() {
 Image(this.index == 1 ? 'common/images/tab-my-Select.png' : 'common/images/tab-my-Unchecked.png')
 .size({width: 25, height: 25}).margin({bottom:4,top:4})
 Text(' Wang Wang ')
 .fontSize(16)
 .fontColor(this.index == 1 ? Color.Orange : null)
 }
 .alignItems(HorizontalAlign.Center)
 .height('100%')
 .layoutWeight(1)
 .onClick(() => {
 this.index = 1;
 })
 
 Column() {
 Image(this.index == 2 ? 'common/images/tab-news-Select.png' : 'common/images/tab-news-Unchecked.png')
 .size({width: 25, height: 25}).margin({bottom:4,top:4})
 Text(' news ')
 .fontSize(16)
 .fontColor(this.index == 2 ? Color.Orange : null)
 }
 .alignItems(HorizontalAlign.Center)
 .height('100%')
 .layoutWeight(1)
 .onClick(() => {
 this.index = 2;
 })
 }
 .width('100%')
 .height(60)
 }
 
 build() {
 Navigation() {
 Column({space: 20}) {
 Text(this.index == 0 ? " Home page " : this.index == 1 ? " Wang Wang " : " news ")
 .textAlign(TextAlign.Center)
 .fontSize(30)
 
 Button(this.hideTitleBar ? " Show TitleBar" : " hide TitleBar")
 .onClick(() => {
 this.hideTitleBar = !this.hideTitleBar;
 }).backgroundColor(Color.Green)
 
 
 Button(this.hideToolBar ? " Show ToolBar" : " hide ToolBar")
 .onClick(() => {
 this.hideToolBar = !this.hideToolBar;
 }).backgroundColor(Color.Red)
 }
 .backgroundColor(Color.Orange).justifyContent(FlexAlign.SpaceAround).alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center)
 .size({width: '100%', height: '100%'})
 }
 .size({width: '100%', height: '100%'})
 .title(" Learn from nuts OpenHarmony")
 .toolBar(this.toolbarWidget()) .hideToolBar(this.hideToolBar)
 .hideTitleBar(this.hideTitleBar) .menus([
 {
 value: " close ",
 icon: 'common/images/door_lock.svg',
 action: () => {
 
 }
 },
 {
 value: " Kai men ",
 icon: 'common/images/door_unlock.svg',
 action: () => {
 
 }
 }
 ])
 }
 }


The sample running results are shown in the following figure ：

titleMode

：  Page title bar display mode , The default is NavigationTitleMode.Free

NavigationTitleMode Enumeration description

Navigation Introduction to the incident

declare class NavigationAttribute extends CommonMethod<NavigationAttribute> {
 onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void): NavigationAttribute;
}


• onTitleModeChange
  ： When  
  titleMode
    by  
  NavigationTitleMode.Free
    when , This callback is triggered when the sliding title bar mode of the scrollable component changes .

@Entry @Component struct ComponentTest {

 @State index: number = 0;//  Tab subscript , Default to first
 @State hideToolBar: boolean = false;
 @State hideTitleBar: boolean = false;

 @Builder toolbarWidget() {//  adopt builder Customize toolbar
 Row() {
 Column() {
 Image(this.index == 0 ? 'common/images/tab-home-Select.png' : 'common/images/tab-home-Unchecked.png')
 .size({width: 25, height: 25}).margin({bottom:4,top:4})
 Text(' Home page ')
 .fontSize(16)
 .fontColor(this.index == 0 ? Color.Orange : null)
 }
 .alignItems(HorizontalAlign.Center)
 .height('100%')
 .layoutWeight(1)
 .onClick(() => {
 this.index = 0;
 })

 Column() {
 Image(this.index == 1 ? 'common/images/tab-my-Select.png' : 'common/images/tab-my-Unchecked.png')
 .size({width: 25, height: 25}).margin({bottom:4,top:4})
 Text(' Wang Wang ')
 .fontSize(16)
 .fontColor(this.index == 1 ? Color.Orange : null)
 }
 .alignItems(HorizontalAlign.Center)
 .height('100%')
 .layoutWeight(1)
 .onClick(() => {
 this.index = 1;
 })

 Column() {
 Image(this.index == 2 ? 'common/images/tab-news-Select.png' : 'common/images/tab-news-Unchecked.png')
 .size({width: 25, height: 25}).margin({bottom:4,top:4})
 Text(' news ')
 .fontSize(16)
 .fontColor(this.index == 2 ? Color.Orange : null)
 }
 .alignItems(HorizontalAlign.Center)
 .height('100%')
 .layoutWeight(1)
 .onClick(() => {
 this.index = 2;
 })
 }
 .width('100%')
 .height(60)
 }

 build() {
 Navigation() {
 Column({space: 20}) {
 Text(this.index == 0 ? " Home page " : this.index == 1 ? " Wang Wang " : " news ")
 .textAlign(TextAlign.Center)
 .fontSize(30)

 Button(this.hideTitleBar ? " Show TitleBar" : " hide TitleBar")
 .onClick(() => {
 this.hideTitleBar = !this.hideTitleBar;
 }).backgroundColor(Color.Green)


 Button(this.hideToolBar ? " Show ToolBar" : " hide ToolBar")
 .onClick(() => {
 this.hideToolBar = !this.hideToolBar;
 }).backgroundColor(Color.Red)
 }
 .backgroundColor(Color.Orange).justifyContent(FlexAlign.SpaceAround).alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center)
 .size({width: '100%', height: '100%'})
 }
 .size({width: '100%', height: '100%'})
 .title(" Learn from nuts OpenHarmony")
 .toolBar(this.toolbarWidget()) .hideToolBar(this.hideToolBar)
 .hideTitleBar(this.hideTitleBar) .menus([
 {
 value: " close ",
 icon: 'common/images/door_lock.svg',
 action: () => {

 }
 },
 {
 value: " Kai men ",
 icon: 'common/images/door_unlock.svg',
 action: () => {

 }
 }
 ]).onTitleModeChange((titleModel: NavigationTitleMode) => {
 console.log('titleMode')
 }) .titleMode(NavigationTitleMode.Free)
 }
}


effect

Summary

After you understand this component , If it's UI Development , With a more intuitive understanding , in my opinion , As long as you learn how to use this component , So I believe , Most of UI It's all possible .

了  

Navigation

  Basic use of components , Readers can develop richer after mastering the use of this component  UI  Interface .

Reference resources

• [Navigation](ying y