鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Navigation组件

news/2024/4/23 3:04:57

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Navigation组件

一、操作环境

操作系统:  Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1+

二、Navigation组件

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Navigation组件

子组件

可以包含子组件。从API Version 9开始,推荐与NavRouter组件搭配使用。

接口

Navigation()

属性

除支持通用属性外,还支持以下属性:

名称

参数类型

描述

title

string | CustomBuilder8+ | NavigationCommonTitle9+ | NavigationCustomTitle9+

页面标题。

subTitledeprecated

string

页面副标题。从API Version 9开始废弃,建议使用title代替。

menus

Array<NavigationMenuItem> | CustomBuilder8+

页面右上角菜单。使用Array<NavigationMenuItem> 写法时,竖屏最多支持显示3个图标,横屏最多支持显示5个图标,多余的图标会被放入自动生成的更多图标。

titleMode

NavigationTitleMode

页面标题栏显示模式。

默认值:NavigationTitleMode.Free

toolBar

object | CustomBuilder8+

设置工具栏内容。

items: 工具栏所有项。

说明:

items均分底部工具栏,在每个均分内容区布局文本和图标,文本超长时,逐级缩小,缩小之后换行,最后...截断。

hideToolBar

boolean

隐藏工具栏。

默认值:false

true: 隐藏工具栏。

false: 显示工具栏。

hideTitleBar

boolean

隐藏标题栏。

默认值:false

true: 隐藏标题栏。

false: 显示标题栏。

hideBackButton

boolean

隐藏返回键。不支持隐藏NavDestination组件标题栏中的返回图标。

默认值:false

true: 隐藏返回键。

false: 显示返回键。

说明:

返回键仅针对titleMode为NavigationTitleMode.Mini时才生效。

navBarWidth9+

Length

导航栏宽度。

默认值:200vp

单位:vp

说明:

仅在Navigation组件分栏时生效。

navBarPosition9+

NavBarPosition

导航栏位置。

默认值:NavBarPosition.Start

说明:

仅在Navigation组件分栏时生效。

mode9+

NavigationMode

导航栏的显示模式。

默认值:NavigationMode.Auto

自适应:基于组件宽度自适应单栏和双栏。

backButtonIcon9+

string | PixelMap | Resource

设置导航栏返回图标。不支持隐藏NavDestination组件标题栏中的返回图标。

hideNavBar9+

boolean

是否显示导航栏(仅在mode为NavigationMode.Split时生效)。

NavigationMenuItem类型说明

名称

类型

必填

描述

value

string

菜单栏单个选项的显示文本。

icon

string

菜单栏单个选项的图标资源路径。

action

() => void

当前选项被选中的事件回调。

object类型说明

名称

类型

必填

描述

value

string

工具栏单个选项的显示文本。

icon

string

工具栏单个选项的图标资源路径。

action

() => void

当前选项被选中的事件回调。

NavigationTitleMode枚举说明

名称

描述

Free

当内容为可滚动组件时,标题随着内容向上滚动而缩小(子标题的大小不变、淡出)。向下滚动内容到顶时则恢复原样。

Mini

固定为小标题模式。

Full

固定为大标题模式。

NavigationCommonTitle类型说明

名称

类型

必填

描述

main

string

设置主标题。

sub

string

设置副标题。

NavigationCustomTitle类型说明

名称

类型

必填

描述

builder

CustomBuilder

设置标题栏内容。

height

TitleHeight | Length

设置标题栏高度。

NavBarPosition枚举说明

名称

描述

Start

双栏显示时,主列在主轴方向首部。

End

双栏显示时,主列在主轴方向尾部。

NavigationMode枚举说明

名称

描述

Stack

导航栏与内容区独立显示,相当于两个页面。

Split

导航栏与内容区分两栏显示。

Auto

窗口宽度>=520vp时,采用Split模式显示;窗口宽度<520vp时,采用Stack模式显示。

TitleHeight枚举说明

名称

描述

MainOnly

只有主标题时标题栏的推荐高度(56vp)。

MainWithSub

同时有主标题和副标题时标题栏的推荐高度(82vp)。

说明

目前可滚动组件只支持List。

事件

名称

功能描述

onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void)

当titleMode为NavigationTitleMode.Free时,随着可滚动组件的滑动标题栏模式发生变化时触发此回调。

onNavBarStateChange(callback: (isVisible: boolean) => void)

导航栏显示状态切换时触发该回调。返回值isVisible为true时表示显示,为false时表示隐藏。

三、示例

代码
// xxx.ets
@Entry
@Component
struct NavigationExample {private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]@State currentIndex: number = 0@State Build: Array<Object> = [{text: 'add',num: 0},{text: 'app',num: 1},{text: 'collect',num: 2}]@Builder NavigationTitle() {Column() {Text('Title').fontColor('#182431').fontSize(30).lineHeight(41).fontWeight(700)Text('subtitle').fontColor('#182431').fontSize(14).lineHeight(19).opacity(0.4).margin({ top: 2, bottom: 20 })}.alignItems(HorizontalAlign.Start)}@Builder NavigationMenus() {Row() {Image('common/navigation_icon1.svg').width(24).height(24)Image('common/navigation_icon1.svg').width(24).height(24).margin({ left: 24 })Image('common/navigation_icon2.svg').width(24).height(24).margin({ left: 24 })}}@Builder NavigationToolbar() {Row() {ForEach(this.Build, item => {Column() {Image(this.currentIndex == item.num ? 'common/public_icon_selected.svg' : 'common/public_icon.svg').width(24).height(24)Text(item.text).fontColor(this.currentIndex == item.num ? '#007DFF' : '#182431').fontSize(10).lineHeight(14).fontWeight(500).margin({ top: 3 })}.width(104).height(56).onClick(() => {this.currentIndex = item.num})})}.margin({ left: 24 })}build() {Column() {Navigation() {TextInput({ placeholder: 'search...' }).width('90%').height(40).backgroundColor('#FFFFFF').margin({ top: 8 })List({ space: 12, initialIndex: 0 }) {ForEach(this.arr, (item) => {ListItem() {Text('' + item).width('90%').height(72).backgroundColor('#FFFFFF').borderRadius(24).fontSize(16).fontWeight(500).textAlign(TextAlign.Center)}.editable(true)}, item => item)}.height(324).width('100%').margin({ top: 12, left: '10%' })}.title(this.NavigationTitle).menus(this.NavigationMenus).titleMode(NavigationTitleMode.Full).toolBar(this.NavigationToolbar).hideTitleBar(false).hideToolBar(false).onTitleModeChange((titleModel: NavigationTitleMode) => {console.info('titleMode' + titleModel)})}.width('100%').height('100%').backgroundColor('#F1F3F5')}
}

图例

你有时间常去我家看看我在这里谢谢你啦...

我家地址:亚丁号

最后送大家一首诗:

山高路远坑深,
大军纵横驰奔,

谁敢横刀立马?
惟有点赞加关注大军。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.cpky.cn/p/8319.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

Redis篇----第二篇

系列文章目录 文章目录 系列文章目录前言一、Memcache 与 Redis 的区别都有哪些?二、Redis 是单进程单线程的?三、一个字符串类型的值能存储最大容量是多少?四、Redis持久化机制前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点…

蓝桥杯电子类单片机提升一——超声波测距

前言 单片机资源数据包_2023 一、超声波测距原理 二、超声波测距的应用 1.超声波的发射 2.单片机知识补充&#xff1a;定时器 3.超声波的接收与计时 4.距离的计算 1&#xff09;定时器1为16位自动重载&#xff0b;1T11.0592MHz 2&#xff09;定时器1为16位自动重载&am…

【HTML】交友软件上照片的遮罩是如何做的

笑谈 我不知道大家有没有在夜深人静的时候感受到孤苦难耐&#xff0c;&#x1f436;。于是就去下了一些交友软件来排遣寂寞。可惜的是&#xff0c;有些交友软件真不够意思&#xff0c;连一些漂亮小姐姐的图片都要进行遮罩&#xff0c;完全不考虑兄弟们的感受,&#x1f620;。所…

人工智能学习与实训笔记(八):百度飞桨套件使用方法介绍

人工智能专栏文章汇总&#xff1a;人工智能学习专栏文章汇总-CSDN博客 本篇目录 八、百度飞桨套件使用 8.1 飞桨预训练模型套件PaddleHub 8.1.1 一些本机CPU可运行的飞桨预训练简单模型&#xff08;亲测可用&#xff09; 8.1.1.1 人脸检测模型 8.1.1.2 中文分词模型 8.1…

MCU电源控制(PWR)与低功耗

目录 一、STM32 的内核和外设电源系统管理&#xff1a; 二、MCU电源监控&#xff1a; 三、三种低功耗模式&#xff1a; 1、睡眠模式&#xff1a; 2、停止模式&#xff1a; 3、待机模式&#xff1a; 一、STM32 的内核和外设电源系统管理&#xff1a; ① 电池备份区域&#…

springboot登录校验

一、登录功能 二、登录校验 2.1 会话技术 2.2 JWT令牌 JWT令牌解析&#xff1a; 如何校验JWT令牌&#xff1f;Filter和Interceptor两种方式。 2.3 过滤器Filter 2.3.1 快速入门 修改上述代码&#xff1a; 2.3.2 详解 2.3.3 登录校验-Filter 2.4 Interceptor拦截器 2.4.1 …