当前位置:网站首页>Detailed explanation of navigation component of openharmony application development
Detailed explanation of navigation component of openharmony application development
2022-07-05 12:59:00 【InfoQ】
Page navigation (Navigation)
Navigation
Navigation
CustomBuilder
Navigation
CustomBuilder
Navigation Definition Introduction
interface NavigationInterface {
/**
* Called when the navigator view interface is used.
*/
(): NavigationAttribute;
}
Navigation
Navigation
@Entry
@Component
struct ResourceTest {
@State text_string: string = " Learn from nuts OpenHarmony application development ";
build() {
Navigation() { // Navigation Can only contain one subcomponent
}
}
}
Navigation
Navigation Property introduction
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;
}
string
CustomBuilder
- 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
}
}
- 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
}
}
@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)
}
}
@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)
}
}
object
CustomBuilder
- 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 ")
}
}
] })
}
}
- 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())
}
}
@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)
}
}
CustomBuilder
- 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: () => {
}
}
])
}
}
Navigation Introduction to the incident
declare class NavigationAttribute extends CommonMethod<NavigationAttribute> {
onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void): NavigationAttribute;
}
- onTitleModeChange: When
titleMode
byNavigationTitleMode.Freewhen , 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)
}
}
Summary
Navigation
Reference resources
- [Navigation](ying y
边栏推荐
- Introduction to sap ui5 dynamicpage control
- 石臻臻的2021总结和2022展望 | 文末彩蛋
- 《信息系统项目管理师》备考笔记---信息化知识
- 10 minute fitness method reading notes (1/5)
- Get to know linkerd project for the first time
- 《2022年中国银行业RPA供应商实力矩阵分析》研究报告正式启动
- Annotation problem and hidden Markov model
- Wechat enterprise payment to change access, open quickly
- About the single step debugging of whether SAP ui5 floating footer is displayed or not and the benefits of using SAP ui5
- 946. Verify stack sequence
猜你喜欢
stirring! 2022 open atom global open source summit registration is hot!
Super efficient! The secret of swagger Yapi
Vonedao solves the problem of organizational development effectiveness
Notes for preparation of information system project manager --- information knowledge
Introduction to the principle of DNS
无密码身份验证如何保障用户隐私安全?
CVPR 2022 | single step 3D target recognizer based on sparse transformer
2021-12-22 transaction record
[cloud native] use of Nacos taskmanager task management
SAP UI5 DynamicPage 控件介紹
随机推荐
Pinduoduo flag insertion remarks API
Alipay transfer system background or API interface to avoid pitfalls
A deep long article on the simplification and acceleration of join operation
【云原生】Nacos-TaskManager 任务管理的使用
Simply take stock reading notes (1/8)
Laravel文档阅读笔记-mews/captcha的使用(验证码功能)
由扫地增而引起的小叙
CVPR 2022 | single step 3D target recognizer based on sparse transformer
《2022年中国银行业RPA供应商实力矩阵分析》研究报告正式启动
超高效!Swagger-Yapi的秘密
Super efficient! The secret of swagger Yapi
JSON parsing error special character processing (really speechless... Troubleshooting for a long time)
Hiengine: comparable to the local cloud native memory database engine
SAP UI5 FlexibleColumnLayout 控件介绍
Transactions from December 29, 2021 to January 4, 2022
NLP engineer learning summary and index
10 minute fitness method reading notes (3/5)
Simply take stock reading notes (3/8)
Taobao short videos are automatically released in batches without manual RPA open source
OpenHarmony应用开发之Navigation组件详解