Navigation二级导航嵌套

Navigation二级导航嵌套

HarmonyOS
2024-05-26 12:16:25
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
chmqn

本文主要用于实现Navigation的二级导航,希望导航可以进行嵌套,也就是导航页面支持子页面导航,目前没有直接的二级导航组件,但可以在NavDestination中嵌套NavDestination完成,大多数场景例如购物平台中均会出现二级导航效果。

使用的核心API

Navigation

NavRouter

NavDestination

核心代码解释

1. 使用Navigation作为页面的根容器,设置mode为split(将导航栏和内容区分为两块),搭配NavRouter一起使用,可达到页面跳转的效果。

2. 在NavRouter中必须使用两个组件,且第二个子组件必须为NavDestination,否则无效,对于List中选中的每一项进行背景颜色的改变,同时改变内容区的内容。

3. 在NavDestination中对NavRouter和NavDestination进行二次嵌套,形成一个二级导航的效果实现效果。

// xxx.ets 
@Entry 
@Component 
struct NavRouterExample { 
  private arr: number[] = [0, 1, 2, 3] 
  @State isActive: boolean = false 
  @State dex: number = -1 
 
  build() { 
    Column() { 
      Navigation() { 
        List({ space: 12, initialIndex: 0 }) { 
          ForEach(this.arr, (item: number, index: number = 0) => { 
            ListItem() { 
              NavRouter() { 
                Row() { 
                  Image($r('app.media.icon')).width(30).height(30).borderRadius(30).margin({ left: 3, right: 10 }) 
                  Text(`NavRouter${item + 1}`) 
                    .fontSize(22) 
                    .fontWeight(500) 
                    .textAlign(TextAlign.Center) 
                } 
                .width(180) 
                .height(72) 
                .backgroundColor(this.dex === index ? '#ccc' : '#fff') 
                .borderRadius(24) 
 
                NavDestination() { 
                  NavRouter() { 
                    Row() { 
                      // Image($r('app.media.icon')).width(30).height(30).borderRadius(30).margin({ left: 3, right: 10 }) 
                      Text(`NavRouter${item + 1}`) 
                        .fontSize(22) 
                        .fontWeight(500) 
                        .textAlign(TextAlign.Center) 
                    } 
                    .width(180) 
                    .height(72) 
                    .backgroundColor(this.dex === index ? '#ccc' : '#fff') 
                    .borderRadius(24) 
 
                    NavDestination() { 
 
                      Text(`我是NavDestination第${item + 1}页内容`).fontSize(20) 
 
                    }.backgroundColor(Color.Pink) 
                    .title(`NavDestination${item + 1}`) 
                  }.onStateChange((isActivated: boolean) => { 
                    if (isActivated) { 
                      this.dex = index; 
                    } 
                  }) 
 
                  Text(`我是NavDestination第${item + 1}页内容`).fontSize(20) 
                }.backgroundColor('#ccc') 
                .title(`NavDestination${item + 1}`) 
              }.onStateChange((isActivated: boolean) => { 
                if (isActivated) { 
                  this.dex = index; 
                } 
              }) 
            } 
          }, (item: number) => item.toString()) 
        } 
        .height('100%') 
        .margin({ top: 12, left: 12 }) 
      } 
      .mode(NavigationMode.Split) 
      .hideTitleBar(true) 
      .hideToolBar(true) 
    }.height('100%') 
  } 
}

实现效果

适配的版本信息

IDE:DevEco    Studio 4.0.3.600

SDK:HarmoneyOS    4.0.10.11

分享
微博
QQ
微信
回复
2024-05-27 16:01:26
相关问题
HarmonyOS 二级页面左滑关闭问题
93浏览 • 1回复 待解决
HarmonyOS 需要二级联动的demo
155浏览 • 1回复 待解决
二级浮层的出场动画实现
603浏览 • 1回复 待解决
HarmonyOS 点击tabs如何跳转到二级页面
160浏览 • 1回复 待解决
Navigation如何隐藏导航
2032浏览 • 1回复 待解决
navigation 导航栏支持毛玻璃效果吗?
629浏览 • 1回复 待解决
webview导航无法正常导航,怎么处理?
5761浏览 • 1回复 待解决