HarmonyOS 鸿蒙Next怎么实现侧滑菜单类似安卓的DrawerLayout

HarmonyOS 鸿蒙Next怎么实现侧滑菜单类似安卓的DrawerLayout

cke_146.png

怎么实现侧滑菜单类似安卓的DrawerLayout，出现和消失都有动画，类似于小红书的侧边栏cke_2223.png


更多关于HarmonyOS 鸿蒙Next怎么实现侧滑菜单类似安卓的DrawerLayout的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

用这个可以模拟的

[@Entry](/user/Entry)
[@Component](/user/Component)
struct SideBarContainerExample2 {
 normalIcon: Resource = $r("app.media.icon")
 selectedIcon: Resource = $r("app.media.icon")
 [@State](/user/State) arr: number[] = [1, 2, 3]
 [@State](/user/State) current: number = 1
 [@State](/user/State) controlShow:boolean = false;

 build() {
   SideBarContainer(SideBarContainerType.Overlay) {
     Column() {
       ForEach(this.arr, (item: number) => {
         Column({ space: 5 }) {
           Image(this.current === item ? this.selectedIcon : this.normalIcon).width(64).height(64)
           Text("Index0" + item)
             .fontSize(25)
             .fontColor(this.current === item ? '#0A59F7' : '#999')
             .fontFamily('source-sans-pro,cursive,sans-serif')
         }
         .onClick(() => {
           this.current = item
         })
       }, (item: string) => item)
     }.width('100%')
     .justifyContent(FlexAlign.SpaceEvenly)
     .backgroundColor('#19000000')

     Column() {
     }
     .margin({ top: 50, left: 20, right: 30 })
   }
   .controlButton({
     icons: {
       hidden: $r('app.media.app_icon'),
       shown: $r('app.media.startIcon'),
       switching: $r('app.media.icon')
     }
   })
   .sideBarWidth(150)
   .minSideBarWidth(50)
   .maxSideBarWidth(300)
   .minContentWidth(0)
   .sideBarPosition(SideBarPosition.Start)
   .showSideBar(this.controlShow)
   .onChange((value: boolean) => {
     console.info('status:' + value)
   })
   .divider({ strokeWidth: '1vp', color: Color.Gray, startMargin: '4vp', endMargin: '4vp' })
   .gesture(
     SwipeGesture()
       .tag("swipe1")// 设置滑动手势标志
   )
   .onGestureJudgeBegin((gestureInfo: GestureInfo, event: BaseGestureEvent) => {
     // 若该手势类型为滑动手势，转换为滑动手势事件
     if (gestureInfo.type == GestureControl.GestureType.SWIPE_GESTURE) {
       let swipeEvent = event as SwipeGestureEvent;
       this.controlShow = true;
       console.log("angle " + swipeEvent.angle)
     }
     return GestureJudgeResult.CONTINUE;
   })
 }
}

更多关于HarmonyOS 鸿蒙Next怎么实现侧滑菜单类似安卓的DrawerLayout的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


SideBarContainer

提供侧边栏可以显示和隐藏的侧边栏容器，通过子组件定义侧边栏和内容区，第一个子组件表示侧边栏，第二个子组件表示内容区。

试过这个组件了，效果和想要实现的不一样，需要的是叠加在背景上层的侧边栏，感谢

类似于小红书的侧边栏

然后就是SideBarContainer触发按钮没法隐藏

HarmonyOS 鸿蒙Next 实现侧滑菜单功能，可以依赖其提供的UI组件库。类似于安卓的DrawerLayout，HarmonyOS 使用 SwipeMenuList 或自定义组件来实现类似效果。

具体步骤如下：

  1. 布局文件：在布局XML文件中，定义一个包含主内容和侧滑菜单的布局。可以使用 DirectionalLayout 或 StackLayout 来组织这些组件。

  2. 侧滑菜单组件：定义一个侧滑菜单的容器，可以是 ListContainer 或自定义的 ScrollView。在这个容器中放置菜单项。

  3. 主内容：主内容区域通常放置页面的主要信息，可以是 Page 或其他自定义组件。

  4. 手势识别：通过监听手势滑动事件（如 SwipeEvent），控制侧滑菜单的显示和隐藏。可以使用 GestureDetector 组件来实现手势识别。

  5. 动画效果：为侧滑菜单的显示和隐藏添加动画效果，提升用户体验。HarmonyOS 提供了动画API，可以方便地实现这一功能。

示例代码片段（简化版）：

<DirectionalLayout>
  <SwipeMenuList>
    <!-- 侧滑菜单项 -->
  </SwipeMenuList>
  <Page>
    <!-- 主内容 -->
  </Page>
</DirectionalLayout>

在代码中通过事件监听和动画控制侧滑菜单的显示与隐藏。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部