HarmonyOS Next如何实现抽屉式导航效果？

Question

HarmonyOS Next如何实现抽屉式导航效果？
本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

//使用SideBarContainer组件实现侧边导航，并且通过设置该组件的showSideBar控制显示隐藏。在SideBarContainer实现左侧导航样式和右侧内容区。controlButton属性控制侧边导航按钮位置。
// src/main/ets/pages/DrawerTab.ets
SideBarContainer(SideBarContainerType.Overlay) {
  // 左侧导航区域
  Column() {
    // ...
  }
  .height('100%')
  .padding({ top: 104 })
  .backgroundColor('#E9EAEC')
  // src/main/ets/pages/DrawerTab.ets
  // 右侧内容区域
  Column() {
    // ...
  }
  .onClick(() => {
    animateTo({
      duration: Constants.ANIMATION_DURATION,
      curve: Curve.EaseOut,
      playMode: PlayMode.Normal,
    }, () => {
      this.show = false;
    })
  })
  .width('100%')
  .height('110%')
  .backgroundColor(this.show ? '#c1c2c4' : '')
}
.showSideBar(this.show)
.controlButton({
  left: 16,
  top: 48,
  height: 40,
  width: 40,
  icons: {
    shown: $r('app.media.changeBack'),
    hidden: $r('app.media.change'),
    switching: $r('app.media.change')
  }
})
.onChange((value: boolean) => {
  this.show = value;
})
//左侧导航使用Image和Text实现图标加文字的效果。
// src/main/ets/pages/DrawerTab.ets
Column() {
  ForEach(this.navList, (item: number, index: number) => {
    Column() {
      Row() {
        Image(this.active === item ? $r('app.media.activeList') : $r('app.media.list'))
          .width(24)
          .height(24)
        Text($r('app.string.list_name'))
          .fontSize(16)
          .fontColor(Color.Black)
          .fontWeight(FontWeight.Medium)
          .margin({ left: 17 })
      }
      .height(48)
      .width('100%')

      if (this.navList.length - 1 !== index) {
        Row()
          .height(0.5)
          .backgroundColor('#0D000000')
          .width('90%')
      }
    }
    .onClick(() => {
      this.active = item;
    })
    .margin({
      top: 4,
      left:  4,
      right:  4,
      bottom:  4
    })
    .justifyContent(FlexAlign.Center)
    .width(264)
    .height(48)
    .padding({ left: 13})
    .borderRadius(16)
    .backgroundColor(this.active === item ? '#1A0A59F7' : '')
  }, (item: number, index: number) => JSON.stringify(item) + index)

  Row() {
    Image($r('app.media.add'))
      .width(40)
      .height(40)
    Text($r('app.string.add_list')).margin({ left: 8 })
  }
  .width('100%')
  .margin({ top: 284 })
}
.width(272)
.height(344)
.backgroundColor(Color.White)
.borderRadius(20)

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。