鸿蒙自定义DrawerLayout侧滑菜单实现原理

前言

DevEcoStudio版本:

DrawerLayout如何使用:鸿蒙自定义侧滑菜单布局(DrawerLayout)-CSDN博客

实现原理

1、Library创建

新建module选择static library,命名为DrawerLibrary

2、DrawerLayout原理分析

复制代码
import { DrawerController } from './DrawerController'

/**
 * 自定义抽屉布局
 */
@Component
export struct DrawerLayout {
   @State offsetX: number = 0
   //缩放比例
   @State scaleX: number = 1
   //是否显示侧边栏
   @Link isShowSideBar: boolean
   //侧边栏的宽度
   private sideBarWidth: number = 300
   // 按下的x坐标
   private downX = 0
   @BuilderParam
   leftView: () => void
   @BuilderParam
   rightView: () => void
   //控制器
   @Link controller: DrawerController;

   aboutToAppear() {
      if (this.isShowSideBar) {
         this.offsetX = this.sideBarWidth
         this.scaleX = 0.8
      } else {
         this.offsetX = 0
         this.scaleX = 1
      }
      this.controller.showSideBar = () => {
         this.showSideBar();
      };
      this.controller.hideSideBar = () => {
         this.hideSideBar();
      };
   }

   build() {
      Row() {
         Stack() {
            this.leftView()
         }
         .backgroundColor(Color.White)
         .width(this.sideBarWidth)
         .height('100%')
         .offset({ x: this.offsetX - this.sideBarWidth, y: 0 })

         Stack() {
            this.rightView()
         }
         .backgroundColor(Color.White)
         .width(`${this.scaleX * 100}%`)
         .height(`${this.scaleX * 100}%`)
         .margin({ left: (1 - this.scaleX) * 180 })
         .offset({ x: this.offsetX - this.sideBarWidth, y: 0 })
         .onClick(() => {
            this.controller.hideSideBar()
         })
      }
      // .onTouch((event) => this.touchEvent(event)) //留的手指滑动的口子,大家根据下面原理自己实现
      .backgroundColor('#CCCCCCCC')
      .width('100%')
      .height('100%')
   }

 
   /**
    * 显示侧边栏
    */
   private showSideBar() {
      animateTo({ duration: 300 }, () => {
         this.offsetX = this.sideBarWidth
         this.scaleX = 0.8
         this.isShowSideBar = true
      })
   }

   /**
    * 隐藏侧边栏
    */
   private hideSideBar() {
      animateTo({ duration: 300 }, () => {
         this.offsetX = 0
         this.scaleX = 1
         this.isShowSideBar = false
      })
   }
}
复制代码
DrawerController类:
复制代码
/**
 * 抽屉布局控制器
 */
export class DrawerController {
   showSideBar: () => void;
   hideSideBar: () => void;
}

a:偏移量

通过offset({ x: this.offsetX - this.sideBarWidth, y: 0 })动态调整左右视图在x轴方向的偏移量,有两种状态:显示和隐藏侧边栏,在显示状态下通过animateTo动画将offsetX=0在300ms内改变成offsetX = sideBarWidth(侧边栏宽度),同理在隐藏状态下通过animateTo动画将offsetX = sideBarWidth(侧边栏宽度)在300ms内改变成 offsetX = 0。

b:右侧内容缩放

通过动态调整右侧内容的width和height值来实现缩放效果。在显示状态下通过animateTo动画将scaleX = 1在300ms内改变成scaleX = 0.8,同理在隐藏状态下通过animateTo动画将scaleX = 0.8在300ms内改变成 scaleX = 1。

复制代码
.width(`${this.scaleX * 100}%`)
.height(`${this.scaleX * 100}%`)

c:右侧内容距离左侧侧边栏的距离

通过动态调整右侧内容的的外边距左侧距离margin({ left: (1 - this.scaleX) * 180 })

通过以上的原理就能实现侧边栏效果了。

思考:

上面的实现原理没有实现通过手指滑动来控制侧边栏的隐藏和显示,通过下图的示意图分析下了手指滑动的原理,这里给大家留一个自己动手的机会,自己实现下如何通过手指控制侧边栏的显示和隐藏。

提示下:通过给最外层Row()设置触摸监听

复制代码
Row(){}.onTouch((event) => this.touchEvent(event))
相关推荐
yuanlaile1 天前
Flutter开发HarmonyOS鸿蒙App商业项目实战已出炉
flutter·华为·harmonyos
cooldream20091 天前
【案例实战】智能出行导航助手HarmonyOS 开发全流程复盘
华为·harmonyos
CodeCaptain1 天前
可直接落地的「Flutter 桥接鸿蒙 WebSocket」端到端实施方案
websocket·flutter·harmonyos
猫林老师1 天前
HarmonyOS图形图像处理与OpenGL ES实战
harmonyos
白鹿第一帅1 天前
【成长纪实】星光不负 码向未来|我的 HarmonyOS 学习之路与社区成长故事
harmonyos·白鹿第一帅·成都ug社区·csdn成都站·鸿蒙开放能力·鸿蒙学习之路·鸿蒙第一课
俩毛豆1 天前
【页面路由导航】三步实现页面跳转的完整示例
前端·harmonyos
羑悻的小杀马特1 天前
探秘仓颉:当函数式编程遇见面向对象王国,当协程风暴席卷并发荒原——从基础语法到实战测试联动的多维编程奇遇记
华为·harmonyos·仓颉·仓颉征文·个人感受·标准库源码·语法剖析
LucianaiB1 天前
【案例实战】基于分布式能力的跨设备任务协同应用开发
harmonyos·鸿蒙·1024程序员节·案例实战
摘星编程2 天前
【成长纪实】HarmonyOS Next学习地图:新手避坑指南与核心知识点拆解
学习·华为·harmonyos·鸿蒙开发
爱笑的眼睛112 天前
HarmonyOS生物识别认证深度解析:从指纹到人脸的安全实践
华为·harmonyos