HarmonyOS鸿蒙Next中基于ArkTS基础组件封装的抽屉(侧边栏)布局组件

HarmonyOS鸿蒙Next中基于ArkTS基础组件封装的抽屉(侧边栏)布局组件 DrawerLayout

DrawerLayout是基于HarmonyOS，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()
    .setDrawerType(DrawerLayout.Type.LEFT)
    .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()