OpenHarmony开发者论坛

标题: 基于ArkTS基础组件封装的抽屉(侧边栏)布局组件 [打印本页]

---

作者: smarthane    时间: 2023-12-5 19:03
标题: 基于ArkTS基础组件封装的抽屉(侧边栏)布局组件
[md]## [https://gitee.com/smarthane/drawerlayout](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()
```
[/md]

---

欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/)

Powered by Discuz! X3.5