巴中建设银行官方网站,织梦wap网站模版,企业系统管理软件有哪些,wordpress 主题太大了(创作不易#xff0c;感谢有你#xff0c;你的支持#xff0c;就是我前行的最大动力#xff0c;如果看完对你有帮助#xff0c;还请三连支持一波哇ヾ(#xff20;^∇^#xff20;)ノ#xff09; 目录 组件导航 (Navigation)
设置页面显示模式
设置标题栏模式
设置菜… (创作不易感谢有你你的支持就是我前行的最大动力如果看完对你有帮助还请三连支持一波哇ヾ(^∇^)ノ 目录 组件导航 (Navigation)
设置页面显示模式
设置标题栏模式
设置菜单栏
设置工具栏
路由操作
页面跳转
页面返回
页面替换
页面删除
参数获取
路由拦截
子页面
页面显示类型
页面生命周期
页面监听和查询 组件导航 (Navigation) Navigation是路由容器组件一般作为首页的根容器包括单栏(Stack)、分栏(Split)和自适应(Auto)三种显示模式。Navigation组件适用于模块内和跨模块的路由切换一次开发多端部署场景。通过组件级路由能力实现更加自然流畅的转场体验并提供多种标题栏样式来呈现更好的标题和内容联动效果。在不同尺寸的设备上Navigation组件能够自适应显示大小自动切换分栏展示效果。 Navigation组件主要包含导航页(NavBar)和子页(NavDestination)。导航页由标题栏(Titlebar包含菜单栏menu)、内容区(Navigation子组件)和工具栏(Toolbar)组成其中导航页可以通过hideNavBar属性进行隐藏导航页不存在页面栈中导航页和子页以及子页之间可以通过路由操作进行切换。 在API Version 9上需要配合NavRouter组件实现页面路由从API Version 10开始推荐使用NavPathStack实现页面路由。 设置页面显示模式 Navigation组件通过mode属性设置页面的显示模式。 自适应模式 Navigation组件默认为自适应模式此时mode属性为NavigationMode.Auto。自适应模式下当页面宽度大于等于一定阈值( API version 9及以前520vpAPI version 10及以后600vp )时Navigation组件采用分栏模式反之采用单栏模式。 Navigation() {...
}
.mode(NavigationMode.Auto)
单页面模式 图1 单页面布局示意图 将mode属性设置为NavigationMode.StackNavigation组件即可设置为单页面显示模式。 Navigation() {...
}
.mode(NavigationMode.Stack) 分栏模式 图2 分栏布局示意图 将mode属性设置为NavigationMode.SplitNavigation组件即可设置为分栏显示模式。 Entry
Component
struct NavigationExample {State TooTmp: ToolbarItem {value: func, icon: ./image/ic_public_highlights.svg, action: () {}}Provide(pageInfos) pageInfos: NavPathStack new NavPathStack()private arr: number[] [1, 2, 3];BuilderPageMap(name: string) {if (name NavDestinationTitle1) {pageOneTmp()} else if (name NavDestinationTitle2) {pageTwoTmp()} else if (name NavDestinationTitle3) {pageThreeTmp()}}build() {Column() {Navigation(this.pageInfos) {TextInput({ placeholder: search... }).width(90%).height(40).backgroundColor(#FFFFFF)List({ space: 12 }) {ForEach(this.arr, (item:string) {ListItem() {Text(NavRouter item).width(100%).height(72).backgroundColor(#FFFFFF).borderRadius(24).fontSize(16).fontWeight(500).textAlign(TextAlign.Center).onClick((){this.pageInfos.pushPath({ name: NavDestinationTitle item})})}}, (item:string):string item)}.width(90%).margin({ top: 12 })}.title(主标题).mode(NavigationMode.Split).navDestination(this.PageMap).menus([{value: , icon: ./image/ic_public_search.svg, action: () {}},{value: , icon: ./image/ic_public_add.svg, action: () {}},{value: , icon: ./image/ic_public_add.svg, action: () {}},{value: , icon: ./image/ic_public_add.svg, action: () {}},{value: , icon: ./image/ic_public_add.svg, action: () {}}]).toolbarConfiguration([this.TooTmp, this.TooTmp, this.TooTmp])}.height(100%).width(100%).backgroundColor(#F1F3F5)}
}// PageOne.ets
Component
export struct pageOneTmp {Consume(pageInfos) pageInfos: NavPathStack;build() {NavDestination() {Column() {Text(NavDestinationContent1)}.width(100%).height(100%)}.title(NavDestinationTitle1).onBackPressed(() {const popDestinationInfo this.pageInfos.pop() // 弹出路由栈栈顶元素console.log(pop 返回值 JSON.stringify(popDestinationInfo))return true})}
}// PageTwo.ets
Component
export struct pageTwoTmp {Consume(pageInfos) pageInfos: NavPathStack;build() {NavDestination() {Column() {Text(NavDestinationContent2)}.width(100%).height(100%)}.title(NavDestinationTitle2).onBackPressed(() {const popDestinationInfo this.pageInfos.pop() // 弹出路由栈栈顶元素console.log(pop 返回值 JSON.stringify(popDestinationInfo))return true})}
}// PageThree.ets
Component
export struct pageThreeTmp {Consume(pageInfos) pageInfos: NavPathStack;build() {NavDestination() {Column() {Text(NavDestinationContent3)}.width(100%).height(100%)}.title(NavDestinationTitle3).onBackPressed(() {const popDestinationInfo this.pageInfos.pop() // 弹出路由栈栈顶元素console.log(pop 返回值 JSON.stringify(popDestinationInfo))return true})}
} 设置标题栏模式 标题栏在界面顶部用于呈现界面名称和操作入口Navigation组件通过titleMode属性设置标题栏模式。 Mini模式 普通型标题栏用于一级页面不需要突出标题的场景。 图3 Mini模式标题栏 Navigation() {...
}
.titleMode(NavigationTitleMode.Mini)
Full模式 强调型标题栏用于一级页面需要突出标题的场景。 图4 Full模式标题栏 Navigation() {...
}
.titleMode(NavigationTitleMode.Full)
设置菜单栏 菜单栏位于Navigation组件的右上角开发者可以通过menus属性进行设置。menus支持ArrayNavigationMenuItem和CustomBuilder两种参数类型。使用ArrayNavigationMenuItem类型时竖屏最多支持显示3个图标横屏最多支持显示5个图标多余的图标会被放入自动生成的更多图标。 图5 设置了3个图标的菜单栏 let TooTmp: NavigationMenuItem {value: , icon: ./image/ic_public_highlights.svg, action: () {}}
Navigation() {...
}
.menus([TooTmp,TooTmp,TooTmp]) 图片也可以引用resources中的资源。 let TooTmp: NavigationMenuItem {value: , icon: resources/base/media/ic_public_highlights.svg, action: () {}}
Navigation() {...
}
.menus([TooTmp,TooTmp,TooTmp])
图6 设置了4个图标的菜单栏 let TooTmp: NavigationMenuItem {value: , icon: ./image/ic_public_highlights.svg, action: () {}}
Navigation() {...
}
.menus([TooTmp,TooTmp,TooTmp,TooTmp])
设置工具栏 工具栏位于Navigation组件的底部开发者可以通过toolbarConfiguration属性进行设置。 图7 工具栏 let TooTmp: ToolbarItem {value: func, icon: ./image/ic_public_highlights.svg, action: () {}}
let TooBar: ToolbarItem[] [TooTmp,TooTmp,TooTmp]
Navigation() {...
}
.toolbarConfiguration(TooBar)
路由操作 Navigation路由相关的操作都是基于页面栈NavPathStack提供的方法进行每个Navigation都需要创建并传入一个NavPathStack对象用于管理页面。主要涉及页面跳转、页面返回、页面替换、页面删除、参数获取、路由拦截等功能。 从API version 12开始页面栈允许被继承。开发者可以在派生类中自定义属性和方法也可以重写父类的方法。派生类对象可以替代基类NavPathStack对象使用。具体示例代码参见页面栈继承示例代码。 Entry
Component
struct Index {// 创建一个页面栈对象并传入NavigationpageStack: NavPathStack new NavPathStack()build() {Navigation(this.pageStack) {}.title(Main)}
}
页面跳转 NavPathStack通过Push相关的接口去实现页面跳转的功能主要分为以下三类: 普通跳转通过页面的name去跳转并可以携带param。 this.pageStack.pushPath({ name: PageOne, param: PageOne Param })
this.pageStack.pushPathByName(PageOne, PageOne Param) 带返回回调的跳转跳转时添加onPop回调能在页面出栈时获取返回信息并进行处理。 this.pageStack.pushPathByName(PageOne, PageOne Param, (popInfo) {
console.log(Pop page name is: popInfo.info.name , result: JSON.stringify(popInfo.result))
}); 带错误码的跳转跳转结束会触发异步回调返回错误码信息。 this.pageStack.pushDestinationByName(PageOne, PageOne Param)
.catch((error: BusinessError) {console.error(Push destination failed, error code ${error.code}, error.message ${error.message}.);
}).then(() {
console.error(Push destination succeed.);
}); 页面返回 NavPathStack通过Pop相关接口去实现页面返回功能。 // 返回到上一页
this.pageStack.pop()
// 返回到上一个PageOne页面
this.pageStack.popToName(PageOne)
// 返回到索引为1的页面
this.pageStack.popToIndex(1)
// 返回到根首页清除栈中所有页面
this.pageStack.clear()
页面替换 NavPathStack通过Replace相关接口去实现页面替换功能。 // 将栈顶页面替换为PageOne
this.pageStack.replacePath({ name: PageOne, param: PageOne Param })
this.pageStack.replacePathByName(PageOne, PageOne Param)
页面删除 NavPathStack通过Remove相关接口去实现删除页面栈中特定页面的功能。 // 删除栈中name为PageOne的所有页面
this.pageStack.removeByName(PageOne)
// 删除指定索引的页面
this.pageStack.removeByIndexes([1,3,5])
参数获取 NavPathStack通过Get相关接口去获取页面的一些参数。 // 获取栈中所有页面name集合
this.pageStack.getAllPathName()
// 获取索引为1的页面参数
this.pageStack.getParamByIndex(1)
// 获取PageOne页面的参数
this.pageStack.getParamByName(PageOne)
// 获取PageOne页面的索引集合
this.pageStack.getIndexByName(PageOne)
路由拦截 NavPathStack提供了setInterception方法用于设置Navigation页面跳转拦截回调。该方法需要传入一个NavigationInterception对象该对象包含三个回调函数 名称描述willShow页面跳转前回调允许操作栈在当前跳转生效。didShow页面跳转后回调在该回调中操作栈会在下一次跳转生效。modeChangeNavigation单双栏显示状态发生变更时触发该回调。 说明 无论是哪个回调在进入回调时页面栈都已经发生了变化。 开发者可以在willShow回调中通过修改路由栈来实现路由拦截重定向的能力。 this.pageStack.setInterception({willShow: (from: NavDestinationContext | navBar, to: NavDestinationContext | navBar,operation: NavigationOperation, animated: boolean) {if (typeof to string) {console.log(target page is navigation home page.);return;}// 将跳转到PageTwo的路由重定向到PageOnelet target: NavDestinationContext to as NavDestinationContext;if (target.pathInfo.name PageTwo) {target.pathStack.pop();target.pathStack.pushPathByName(PageOne, null);}}
})
子页面 NavDestination是Navigation子页面的根容器用于承载子页面的一些特殊属性以及生命周期等。NavDestination可以设置独立的标题栏和菜单栏等属性使用方法与Navigation相同。NavDestination也可以通过mode属性设置不同的显示类型用于满足不同页面的诉求。 页面显示类型 标准类型 NavDestination组件默认为标准类型此时mode属性为NavDestinationMode.STANDARD。标准类型的NavDestination的生命周期跟随其在NavPathStack页面栈中的位置变化而改变。 弹窗类型 NavDestination设置mode为NavDestinationMode.DIALOG弹窗类型此时整个NavDestination默认透明显示。弹窗类型的NavDestination显示和消失时不会影响下层标准类型的NavDestination的显示和生命周期两者可以同时显示。 页面生命周期 Navigation作为路由容器其生命周期承载在NavDestination组件上以组件事件的形式开放。 其生命周期大致可分为三类自定义组件生命周期、通用组件生命周期和自有生命周期其中aboutToAppear和aboutToDisappear是自定义组件的生命周期。如果NavDestination外层包含自定义组件时则存在OnAppear和OnDisappear是组件的通用生命周期剩下的六个生命周期为NavDestination独有。 生命周期时序如下图所示 aboutToAppear在创建自定义组件后执行其build()函数之前执行NavDestination创建之前允许在该方法中改变状态变量更改将在后续执行build()函数中生效。onWillAppearNavDestination创建后挂载到组件树之前执行在该方法中更改状态变量会在当前帧显示生效。onAppear通用生命周期事件NavDestination组件挂载到组件树时执行。onWillShowNavDestination组件布局显示之前执行此时页面不可见应用切换到前台不会触发。onShownNavDestination组件布局显示之后执行此时页面已完成布局。onWillHideNavDestination组件触发隐藏之前执行应用切换到后台不会触发。onHiddenNavDestination组件触发隐藏后执行非栈顶页面push进栈栈顶页面pop出栈或应用切换到后台。onWillDisappearNavDestination组件即将销毁之前执行如果有转场动画会在动画前触发栈顶页面pop出栈。onDisappear通用生命周期事件NavDestination组件从组件树上卸载销毁时执行。aboutToDisappear自定义组件析构销毁之前执行不允许在该方法中改变状态变量。 页面监听和查询 为了方便组件跟页面解耦在NavDestination子页面内部的自定义组件可以通过全局方法监听或查询到页面的一些状态信息。 页面信息查询 自定义组件提供queryNavDestinationInfo方法可以在NavDestination内部查询到当前所属页面的信息返回值为NavDestinationInfo若查询不到则返回undefined。 import { uiObserver } from kit.ArkUI;// NavDestination内的自定义组件Componentstruct MyComponent {navDesInfo: uiObserver.NavDestinationInfo | undefinedaboutToAppear(): void {this.navDesInfo this.queryNavDestinationInfo();}build() {Column() {Text(所属页面Name: this.navDesInfo?.name)}.width(100%).height(100%)}} 页面状态监听 通过ohos.arkui.observer提供的注册接口可以注册NavDestination生命周期变化的监听使用方式如下 uiObserver.on(navDestinationUpdate, (info) {console.info(NavDestination state update, JSON.stringify(info));}); 也可以注册页面切换的状态回调能在页面发生路由切换的时候拿到对应的页面信息NavDestinationSwitchInfo并且提供了UIAbilityContext和UIContext不同范围的监听 // 在UIAbility中使用import { UIContext, uiObserver } from kit.ArkUI;// callBackFunc 是开发者定义的监听回调函数function callBackFunc(info: uiObserver.NavDestinationSwitchInfo) {}uiObserver.on(navDestinationSwitch, this.context, callBackFunc);// 可以通过窗口的getUIContext()方法获取对应的UIContentuiContext: UIContext | null null;uiObserver.on(navDestinationSwitch, this.uiContext, callBackFunc);
