# DrawerScaffold **Repository Path**: jackiehou/DrawerScaffold ## Basic Information - **Project Name**: DrawerScaffold - **Description**: DrawerScaffold是一个左右侧抽屉类型的组件。它允许您在内容之上放置一个可滑动的左右侧的抽屉，也可以让您的内容区域跟随这个抽屉滑动，也可以让您内容区的宽度跟随抽屉滑动而变化。 - **Primary Language**: Unknown - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 4 - **Forks**: 0 - **Created**: 2025-06-13 - **Last Updated**: 2025-12-20 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # drawerScaffold #### 介绍 DrawerScaffold是一个左右侧抽屉类型的组件。它允许您在内容之上放置一个可滑动的左右侧的抽屉，也可以让您的内容区域跟随这个抽屉滑动，也可以让您内容区的宽度跟随抽屉滑动而变化。 | 默认样式 | 背景模糊 | Content跟随抽屉滑动 | |---------------------------------------------------------------------------|---------------------------------------------------------------------------|---------------------------------------------------------------------------| | ![alt text](https://gitee.com/jackiehou/image/raw/master/8ulqm-9ya0m.gif) | ![alt text](https://gitee.com/jackiehou/image/raw/master/0o49z-3g1yn.gif) | ![alt text](https://gitee.com/jackiehou/image/raw/master/2zfad-2la0r.gif) | | 宽度自适应 | |---------------------------------------------------------------------------| | ![alt text](https://gitee.com/jackiehou/image/raw/master/h4az3-ddrcy.gif) | #### 安装教程 ``` ohpm install @jackiehou/drawer-scaffold ``` #### 使用说明 ```ts import { DrawerScaffold, DrawerModifier} from '@jackiehou/drawer-scaffold' ``` ```ts @LocalBuilder //组件内部@Builder 建议使用@LocalBuilder，不然会碰到this指向的问题 leftBuilder(modifier: DrawerModifier) { Column() {//也可以替换成Stack、RelativeContainer等其它容器组件 //... } .attributeModifier(modifier)//一定要加上这个，不然就没效果 .width('70%')//抽屉的宽度,自行设置 .height('100%') } @LocalBuilder contentBuilder() { //... } build() { Column() { DrawerScaffold({ leftDrawerBuilder: this.leftBuilder,//左侧抽屉，如果没有则可以不填 //rightDrawerBuilder:this.rightBuilder,//右侧抽屉，如果没有则可以不填 contentBuilder:this.contentBuilder//您的内容，必填 }) } .height('100%') .width('100%') } ``` #### DrawerScaffold组件各项属性 | 名称 | 类型 | 是否必填 | 说明 | |--------------------|----------------------------------------------|------|------------------------------------------------| | drawerController | DrawerController | 否 | DrawerScaffold控制器，控制开启、关闭左/右侧抽屉 | | drawerStyle | DrawerStyle | 否 | DrawerScaffold样式，默认是NORMAL：在内容之上放置一个可滑动的左右侧的抽屉 | | maskProp | Mask\|undefined | 否 | 遮罩颜色、透明度等属性 | | dragArea | DragArea | 否 | 关闭/开启状态下可以拖动打开drawer的区域 | | leftDrawerBuilder | (modifier: DrawerModifier) => void | 否 | 左侧抽屉 | | rightDrawerBuilder | (modifier: DrawerModifier) => void | 否 | 右侧抽屉 | | contentBuilder | () => void | 是 | content内容 | | onStateChanged | (oldState: number, newState: number) => void | 否 | 左/右抽屉开启关闭状态的回调函数 | #### DrawerController控制器 | 方法名/字段名 | 参数/类型 | 说明 | |-----------------|-----------------------------------------------------------|--------------------------------------------------| | LEFT_DRAWER_ID | string | 左侧drawer组件的id | | RIGHT_DRAWER_ID | string | 右侧drawer组件的id | | CONTENT_ID | string | content的组件id | | state | DrawerState | DrawerModifier组件左右侧抽屉的开启关闭状态，改变会刷新UI（兼容V1和V2组件）） | | animParam | AnimatorParam | 动画属性 | | fractionChange | (old: number, now: number) => void | fraction改变监听 | | fraction | number | 从Collapsed(关闭):0 到Expanded(开启):1 | | isOpen | isLeft:boolean (true:左侧，false：右侧) | isLeft对应侧drawer是否打开，状态改变会刷新UI（兼容V1和V2组件） | | isClosed | -(左右侧drawer不能同时打开，因此无参) | 左侧或者右侧的drawer是否关闭，状态改变会刷新UI（兼容V1和V2组件） | | toggle | isLeft: boolean(true:左侧，false：右侧) , anim?:boolean(是否播放动画) | 关闭或打开对应侧的drawer | | openLeftDrawer | anim?:boolean(是否播放动画) | 打开左侧drawer | | openRightDrawer | anim?:boolean(是否播放动画) | 打开右侧drawer | | release | - | 释放资源 | | create | state,animParam,fractionChange | 静态构造器方法 | #### DrawerStyle枚举 | 枚举名称 | 说明 | |----------------------------------|--------------------------------------------------| | NORMAL | 默认样式，Drawer覆盖在content之上，并且content和Drawer之间覆盖一层蒙版 | | CONTENT_TRANSLATE | content跟随drawer平移 | | CONTENT_AUTO_WIDTH | content的宽度随着parent宽度-drawer显示宽度变化发生改变 | | CONTENT_TRANSLATE_WITHOUT_DRAWER | drawer在content的背后，只有content平移，drawer不移动 | #### Mask | 名称 | 类型 | 说明 | |-------------|-------------------|-----------------------------------------| | maskOpacity | number | 抽屉彻底打开后，遮罩的透明度 | | maskColor | ResourceColor | 遮罩颜色 | | maskBlur | number\|undefined | 高斯模糊半径,maskOpacity>0且maskBlur>0 高斯模糊才生效 | #### DragArea | 名称 | 类型 | 说明 | |------------------------|-------------------|---------------------------------------------| | leftDragWidthInClosed | Length\|undefined | 在drawer关闭状态下，从屏幕左边的可拖动的宽度,undefined或者为0不能拖动 | | rightDragWidthInClosed | Length\|undefined | 在drawer关闭状态下，从屏幕右边的可拖动的宽度,undefined或者为0不能拖动 | | dragTypeInOpened | DragAreaType | 在drawer开启状态下，可拖动的区域 | #### DrawerState枚举 | 枚举名称 | 说明 | |--------------|---------------| | CLOSED | 左右的drawer都关闭了 | | LEFT_OPENED | 左侧drawer打开了 | | RIGHT_OPENED | 右侧drawer打开了 | #### AnimatorParam | 名称 | 类型 | 说明 | |----------|--------|-----------------------------------------------------------------------------------------------------------------------------------------| | duration | number | 动画播放的时长，单位毫秒 | | easing | string | 动画插值曲线，参考[AnimatorOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-animator#animatoroptions)的easing属性 | #### DragAreaType枚举 | 枚举名称 | 说明 | |---------|--------------------------| | ALL | 整个DrawerScaffold区域，都可以拖动 | | DRAWER | 只有drawer区域可以拖动 | | NONE | 不能拖动 | | CONTENT | 只有Content区域可以拖动 | #### 使用示例 上图2示例： ```ts drawerController: DrawerController = DrawerController.create() build() { Column() { DrawerScaffold({ drawerController: this.drawerController, //drawer控制器，控制开启、关闭抽屉 drawerStyle: DrawerStyle.NORMAL, //默认遮罩效果 dragArea: { leftDragWidthInClosed: '30%',//拖动左侧'30%'的区域可以打开左侧的drawer rightDragWidthInClosed: '30%',//拖动右侧'30%'的区域可以打开右侧的drawer dragTypeInOpened: DragAreaType.DRAWER//打开drawer后，拖动drawer区域可以关闭，其他区域拖动不能关闭 }, maskProp: { maskOpacity: 1,//遮罩透明度 maskColor: Color.Transparent,//遮罩颜色 maskBlur: 30 //遮罩高斯模糊半径（maskOpacity>0 && maskBlur>0）模糊才生效 }, leftDrawerBuilder: this.leftBuilder, //左侧抽屉，如果没有则可以不填 rightDrawerBuilder: this.rightBuilder, //右侧抽屉，如果没有则可以不填 contentBuilder: this.contentBuilder//您的内容，必填 }) } .height('100%') .width('100%') } ``` 上图4示例： ```ts drawerController: DrawerController = DrawerController.create() build() { Column() { DrawerScaffold({ drawerController: this.drawerController, //drawer控制器，控制开启、关闭抽屉 drawerStyle: DrawerStyle.CONTENT_AUTO_WIDTH,//content宽度自适应 maskProp:undefined,//为undefined则没有遮罩 leftDrawerBuilder: this.leftBuilder, //左侧抽屉，如果没有则可以不填 rightDrawerBuilder: this.rightBuilder, //右侧抽屉，如果没有则可以不填 contentBuilder: this.contentBuilder//您的内容，必填 }) } .height('100%') .width('100%') } ``` #### 示例代码 https://gitee.com/jackiehou/drawer-scaffold #### 开源协议 本项目基于 [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0.html) ，在拷贝和借鉴代码时，请大家务必注明出处。