codecamp

导航组件

导航组件，默认提供点击响应处理，不需要开发者自定义点击事件逻辑。

说明

该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

必须包含两个子组件，其中第二个子组件必须为NavDestination。

说明

子组件个数异常时：

  1. 有且仅有1个时，触发路由到NavDestination的能力失效。
  2. 有且仅有1个时，且使用NavDestination场景下，不进行路由。
  3. 大于2个时，后续的子组件不显示。
  4. 第二个子组件不为NavDestination时，触发路由功能失效。

接口

NavRouter()

事件

名称

功能描述

onStateChange(callback: (isActivated: boolean) => void)

组件激活状态切换时触发该回调。返回值isActivated为true时表示激活，为false时表示未激活。

说明：

开发者点击激活NavRouter，加载对应的NavDestination子组件时，回调onStateChange(true)。NavRouter对应的NavDestination子组件不再显示时，回调onStateChange(false)。

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct NavRouterExample {
  5.   @State isActiveWLAN: boolean = false
  6.   @State isActiveBluetooth: boolean = false
  7. 

  8.   build() {
  9.     Column() {
  10.       Navigation() {
  11.         NavRouter() {
  12.           Row() {
  13.             Row().width(30).height(30).borderRadius(30).margin({ left: 3, right: 10 }).backgroundColor(Color.Pink)
  14.             Text(`WLAN`)
  15.               .fontSize(22)
  16.               .fontWeight(500)
  17.               .textAlign(TextAlign.Center)
  18.           }
  19.           .width('90%')
  20.           .height(72)
  21.           NavDestination() {
  22.             Flex({ direction: FlexDirection.Row }) {
  23.               Text('未找到可用WLAN').fontSize(30).padding({ left: 15 })
  24.             }
  25.           }.hideTitleBar(false).backgroundColor('#0c182431')
  26.         }.backgroundColor(this.isActiveWLAN ? '#ccc' : '#fff')
  27.         .borderRadius(24)
  28.         .onStateChange((isActivated: boolean) => {
  29.           this.isActiveWLAN = isActivated
  30.         })
  31. 

  32.         NavRouter() {
  33.           Row() {
  34.             Row().width(30).height(30).borderRadius(30).margin({ left: 3, right: 10 }).backgroundColor(Color.Pink)
  35.             Text(`蓝牙`)
  36.               .fontSize(22)
  37.               .fontWeight(500)
  38.               .textAlign(TextAlign.Center)
  39.           }
  40.           .width('90%')
  41.           .height(72)
  42. 

  43.           NavDestination() {
  44.             Flex({ direction: FlexDirection.Row }) {
  45.               Text('未找到可用蓝牙').fontSize(30).padding({ left: 15 })
  46.             }
  47.           }.hideTitleBar(false).backgroundColor('#0c182431')
  48.         }.backgroundColor(this.isActiveBluetooth ? '#ccc' : '#fff')
  49.         .borderRadius(24)
  50.         .onStateChange((isActivated: boolean) => {
  51.           this.isActiveBluetooth = isActivated
  52.         })
  53.       }
  54.       .title('设置')
  55.       .titleMode(NavigationTitleMode.Free)
  56.       .mode(NavigationMode.Auto)
  57.       .hideTitleBar(false)
  58.       .hideToolBar(true)
  59.     }.height('100%')
  60.   }
  61. }

展示菜单MenuItem的分组
用于显示导航内容区
温馨提示
下载编程狮App，免费阅读超1000+编程语言教程
取消
确定
目录

通用事件

通用属性

手势处理

基础组件

容器组件

媒体组件

绘制组件

画布组件

动画

弹窗

生命周期

状态管理

像素

枚举

类型

接口

错误码合集

关闭

 MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }