当前位置:网站首页>OpenHarmony应用开发之Navigation组件详解
OpenHarmony应用开发之Navigation组件详解
2022-07-05 12:41:00 【InfoQ】
页面导航(Navigation)
Navigation
Navigation
CustomBuilder
Navigation
CustomBuilder
Navigation定义介绍
interface NavigationInterface {
/**
* Called when the navigator view interface is used.
*/
(): NavigationAttribute;
}
Navigation
Navigation
@Entry
@Component
struct ResourceTest {
@State text_string: string = "跟着坚果学习OpenHarmony应用开发";
build() {
Navigation() { // Navigation只能包含一个子组件
}
}
}
Navigation
Navigation属性介绍
declare class NavigationAttribute extends CommonMethod<NavigationAttribute> {
/**
* 设置导航栏的标题,当参数类型为 `string` 时,可以直接设置标题,当参数为 `CustomBuilder` 时,可以自定义标题样式。
*/
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
- 参数类型为
string
,简单样例如下所示:
@Entry
@Component
struct ResourceTest {
@State content: string = "跟着坚果学习OpenHarmony应用开发";
@State title: string = "这是标题";
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) // 设置title,此时不支持修改文字大小,颜色等样式
}
}
- 参数类型为
CustomBuilder
,简单样例如下所示:
@Entry
@Component
struct ResourceTest {
@State content: string = "跟着坚果学习OpenHarmony应用开发";
@State title: string = "这是标题";
@Builder titleWidget() {// 通过Builder自定义标题栏,可以灵活的设置标题样式
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) // 设置title,此时不支持修改文字大小,颜色等样式
}
}
@Entry
@Component
struct ResourceTest {
@State content: string = "跟着坚果学习OpenHarmony应用开发";
@State title: string = "这是标题";
@State sub_title: string = "这是副标题";
@Builder titleWidget() {// 通过Builder自定义标题栏,可以灵活的设置标题样式
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) // 设置title,此时不支持修改文字大小,颜色等样式
.subTitle(this.sub_title)
}
}
@Entry
@Component
struct ResourceTest {
@State content: string = "跟着坚果学习OpenHarmony应用开发";
@State title: string = "这是标题";
@State sub_title: string = "这是副标题";
@Builder titleWidget() {// 通过Builder自定义标题栏,可以灵活的设置标题样式
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) // 设置title,此时不支持修改文字大小,颜色等样式
.subTitle(this.sub_title)// 设置subTitle,此时不支持修改文字大小,颜色等样式
.hideBackButton(true)
}
}
object
CustomBuilder
- 当参数为
object
类型时,参数需要按照如下格式定义:
- value:工具栏单个选项的显示文本。
- icon:工具栏单个选项的图标资源路径。
- action:当前选项被选中时的事件回调。
- 简单样例如下所示:
@Entry
@Component
struct ResourceTest {
@State content: string = "跟着坚果学习OpenHarmony应用开发";
@State title: string = "这是标题";
@State sub_title: string = "这是副标题";
@Builder titleWidget() { // 通过Builder自定义标题栏,可以灵活的设置标题样式
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) // 设置title,此时不支持修改文字大小,颜色等样式
.subTitle(this.sub_title) // 设置subTitle,此时不支持修改文字大小,颜色等样式
.hideBackButton(true)
.toolBar({ items: [ // toolBar接收一个数组
{
value: "消息", // 文本
action: () => { // 事件
console.log("点击了消息")
}
},
{
value: "动态",
action: () => {
console.log("点击了首页")
}
},
{
value: "我的",
action: () => {
console.log("点击了首页")
}
}
] })
}
}
- 当参数为
CustomBuilder
类型时,可以自定义样式,简单样例如下所示:
@Entry @Component struct ComponentTest {
@State index: number = 0;// 选项卡下标,默认为第一个
@Builder toolbarWidget() {// 通过builder自定义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('主页')
.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('汪汪')
.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('消息')
.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 ? "主页" : this.index == 1 ? "汪汪" : "消息")
.textAlign(TextAlign.Center)
.fontSize(30)
.size({width: '100%', height: '100%'})
.backgroundColor(Color.Orange)
}
.size({width: '100%', height: '100%'})
.title("跟着坚果学OpenHarmony")
.toolBar(this.toolbarWidget())
}
}
@Entry @Component struct ComponentTest {
@State index: number = 0;// 选项卡下标,默认为第一个
@State hideToolBar: boolean = false;
@State hideTitleBar: boolean = false;
@Builder toolbarWidget() {// 通过builder自定义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('主页')
.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('汪汪')
.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('消息')
.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 ? "主页" : this.index == 1 ? "汪汪" : "消息")
.textAlign(TextAlign.Center)
.fontSize(30)
Button(this.hideTitleBar ? "显示TitleBar" : "隐藏TitleBar")
.onClick(() => {
this.hideTitleBar = !this.hideTitleBar;
}).backgroundColor(Color.Green)
Button(this.hideToolBar ? "显示ToolBar" : "隐藏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("跟着坚果学OpenHarmony")
.toolBar(this.toolbarWidget()) .hideToolBar(this.hideToolBar)
.hideTitleBar(this.hideTitleBar)
}
}
CustomBuilder
- 当参数为
NavigationMenuItem
数组时,参数说明如下:
- value:菜单项的显示文本。
- icon:菜单项的显示图标路径。
- action:点击菜单项的事件回调。
- 简单样例如下所示:
@Entry @Component struct ComponentTest {
@State index: number = 0;// 选项卡下标,默认为第一个
@State hideToolBar: boolean = false;
@State hideTitleBar: boolean = false;
@Builder toolbarWidget() {// 通过builder自定义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('主页')
.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('汪汪')
.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('消息')
.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 ? "主页" : this.index == 1 ? "汪汪" : "消息")
.textAlign(TextAlign.Center)
.fontSize(30)
Button(this.hideTitleBar ? "显示TitleBar" : "隐藏TitleBar")
.onClick(() => {
this.hideTitleBar = !this.hideTitleBar;
}).backgroundColor(Color.Green)
Button(this.hideToolBar ? "显示ToolBar" : "隐藏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("跟着坚果学OpenHarmony")
.toolBar(this.toolbarWidget()) .hideToolBar(this.hideToolBar)
.hideTitleBar(this.hideTitleBar) .menus([
{
value: "关门",
icon: 'common/images/door_lock.svg',
action: () => {
}
},
{
value: "开们",
icon: 'common/images/door_unlock.svg',
action: () => {
}
}
])
}
}
Navigation事件介绍
declare class NavigationAttribute extends CommonMethod<NavigationAttribute> {
onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void): NavigationAttribute;
}
- onTitleModeChange:当
titleMode
为NavigationTitleMode.Free时,随着可滚动组件的滑动标题栏模式发生变化时触发此回调。
@Entry @Component struct ComponentTest {
@State index: number = 0;// 选项卡下标,默认为第一个
@State hideToolBar: boolean = false;
@State hideTitleBar: boolean = false;
@Builder toolbarWidget() {// 通过builder自定义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('主页')
.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('汪汪')
.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('消息')
.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 ? "主页" : this.index == 1 ? "汪汪" : "消息")
.textAlign(TextAlign.Center)
.fontSize(30)
Button(this.hideTitleBar ? "显示TitleBar" : "隐藏TitleBar")
.onClick(() => {
this.hideTitleBar = !this.hideTitleBar;
}).backgroundColor(Color.Green)
Button(this.hideToolBar ? "显示ToolBar" : "隐藏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("跟着坚果学OpenHarmony")
.toolBar(this.toolbarWidget()) .hideToolBar(this.hideToolBar)
.hideTitleBar(this.hideTitleBar) .menus([
{
value: "关门",
icon: 'common/images/door_lock.svg',
action: () => {
}
},
{
value: "开们",
icon: 'common/images/door_unlock.svg',
action: () => {
}
}
]).onTitleModeChange((titleModel: NavigationTitleMode) => {
console.log('titleMode')
}) .titleMode(NavigationTitleMode.Free)
}
}
小结
Navigation
参考
- [Navigation](ying y
边栏推荐
- Kotlin function
- 946. Verify stack sequence
- Simply take stock reading notes (1/8)
- ActiveMQ installation and deployment simple configuration (personal test)
- 关于 SAP UI5 getSAPLogonLanguage is not a function 的错误消息以及 API 版本的讨论
- Reshape the power of multi cloud products with VMware innovation
- Kotlin variable
- Introduction to sap ui5 dynamicpage control
- RHCSA5
- SAP self-development records user login logs and other information
猜你喜欢
Notes for preparation of information system project manager --- information knowledge
石臻臻的2021总结和2022展望 | 文末彩蛋
SAP UI5 ObjectPageLayout 控件使用方法分享
Compilation principle reading notes (1/12)
I met Tencent in the morning and took out 38K, which showed me the basic smallpox
RHCAS6
Taobao flag insertion remarks | logistics delivery interface
Why is your next computer a computer? Explore different remote operations
使用 jMeter 对 SAP Spartacus 进行并发性能测试
将函数放在模块中
随机推荐
Lepton 无损压缩原理及性能分析
Full text search of MySQL
Vonedao solves the problem of organizational development effectiveness
Iterator details in list... Interview pits
DNS的原理介绍
SAP UI5 DynamicPage 控件介绍
Redis cluster configuration
Shi Zhenzhen's 2021 summary and 2022 outlook | colorful eggs at the end of the article
太方便了,钉钉上就可完成代码发布审批啦!
Compile kernel modules separately
实现 1~number 之间,所有数字的加和
逆波兰表达式
Association modeling method in SAP segw transaction code
155. Minimum stack
Using docker for MySQL 8.0 master-slave configuration
2021-12-22 transaction record
单独编译内核模块
RHCSA2
I met Tencent in the morning and took out 38K, which showed me the basic smallpox
【云原生】Nacos中的事件发布与订阅--观察者模式