基于ArkTS基础组件封装的抽屉(侧边栏)布局组件

https://gitee.com/smarthane/drawerlayout

DrawerLayout是基于ArkTS语言封装的抽屉（侧边栏）布局组件。 （提供左右侧边栏可以显示和隐藏的侧边栏布局组件，通过子组件定义侧边栏和内容区。）

一、下载安装

ohpm install @smarthane/drawer-layout  

二、使用说明

2.1 引入文件及代码依赖

   import { DrawerLayout } from '@smarthane/drawer-layout'

2.2 使用步骤说明

  （1） 创建model
   @State model: DrawerLayout.Model = new DrawerLayout.Model()
  （2） 创建DrawerLayout
   DrawerLayout({
       // 1.绑定Model
       model: $model,
       // 2.侧边栏布局页面
       drawerView: () => {
         this.buildDrawerView();
       },
       // 3.内容布局页面
       contentView: () => {
         this.buildContentView();
       }
     })
  （3）model方法说明 
   //打开抽屉
   this.model.openDrawer()
   //关闭抽屉
   this.model.closeDrawer()
   //打开或者关闭抽屉
   this.model.openOrCloseDrawer()

2.3 使用示例

   详细可以参考工程entry模块下面的示例代码。

   @Entry
   @Component
   struct DrawerLayoutPage {
     @State model: DrawerLayout.Model = new DrawerLayout.Model()
       // 设置左侧边栏DrawerLayout.Type.LEFT 还是右侧边栏DrawerLayout.Type.RIGHT【默认为左侧】
       .setDrawerType(DrawerLayout.Type.LEFT)
       // 设置侧边栏宽度【默认为260】
       .setDrawerWidth(230);

     // 用于判断手机的物理返回按钮
     onBackPress() {
       if (this.model.isDrawerOpen) {
         this.model.closeDrawer();
         return true;
       }
       return false;
     }

     build() {
       Column() {
         DrawerLayout({
           model: $model,
           drawerView: () => {
             this.buildDrawerView();
           },
           contentView: () => {
             this.buildContentView();
           }
         })
       }
       .height('100%')
     }

     @Builder buildContentView() {
       Column() {
         Text('这是内容项')
           .fontSize(30)
           .fontWeight(FontWeight.Bold)

         Button(this.model.isDrawerOpen ? '关闭侧边栏' : '打开侧边栏')
           .fontSize(20)
           .fontWeight(FontWeight.Bold)
           .margin({ top: 30 })
           .onClick(() => {
             this.model.openOrCloseDrawer();
           })

         Text(this.model.drawerType == DrawerLayout.Type.LEFT ? '当前为左侧边栏' : '当前为右侧边栏')
           .fontSize(20)
           .fontWeight(FontWeight.Bold)
           .margin({ top: 30 })

         Button(this.model.drawerType == DrawerLayout.Type.LEFT ? '切换为右侧边栏' : '切换为左侧边栏')
           .fontSize(20)
           .fontWeight(FontWeight.Bold)
           .margin({ top: 10 })
           .onClick(() => {
             this.model.setDrawerType(this.model.drawerType == DrawerLayout.Type.LEFT ?  DrawerLayout.Type.RIGHT : DrawerLayout.Type.LEFT)
           })
       }
       .justifyContent(FlexAlign.Center)
       .width('100%')
       .height('100%')
     }

     @Builder buildDrawerView() {
       Column() {
         if (this.model.drawerType == DrawerLayout.Type.LEFT) {
           Text('这是左边抽屉项\n1.可左右滑动\n2.点击遮罩层关闭')
             .fontSize(30)
             .fontWeight(FontWeight.Bold)
         } else {
           Text('这是右边抽屉项\n1.可左右滑动\n2.点击遮罩层关闭')
             .fontSize(30)
             .fontWeight(FontWeight.Bold)
         }
       }
       .backgroundColor(Color.Orange)
       .justifyContent(FlexAlign.Center)
       .width('100%')
       .height('100%')
     }
   }

三、接口说明

@State DrawerLayout.Model = new DrawerLayout.Model();

1.设置侧边栏宽度【默认为260】model.setDrawerWidth()
2.设置左、右侧边栏【默认为左侧】model.setDrawerType()
3.打开抽屉model.openDrawer()
4.关闭抽屉model.closeDrawer()
5.打开或者关闭抽屉model.openOrCloseDrawer()