鸿蒙自定义侧滑菜单布局(DrawerLayout)

前言

为了实现安卓中的侧滑菜单布局效果,通过查找鸿蒙的布局控件,发现SideBarContainer控件有点像,但是使用中发现并不是很符合我们的UI交互效果,因此我在鸿蒙中通过自定义布局的方式实现,本文主要介绍该自定义控件如何使用、SideBarContainer原生控件如何使用,后面会介绍如何通过自定义实现侧滑菜单布局。

DeVEcoStudio版本如下:

复制代码
"minAPIVersion": 9,
"targetAPIVersion": 9,

控件效果

如何使用

1、DrawerLayout.har包的引用

DrawerLayout.har 下载地址:https://download.csdn.net/download/Abner_Crazy/88864397

entry 下的main 目录下新建libs 目录将下载完成的DrawerLayout.har 拷贝到该目录,然后在oh-package.json5 文件中添加对DrawerLayout.har的引用

oh-package.json5文件

复制代码
{
  "license": "",
  "devDependencies": {},
  "author": "",
  "name": "entry",
  "description": "Please describe the basic information.",
  "main": "",
  "version": "1.0.0",
  "dependencies": {
    "@app/DrawerLibrary": "file:./src/main/libs/DrawerLibrary.har"
  }
}

2、调用DrawerLayout布局

复制代码
import { DrawerController, DrawerLayout } from '@app/DrawerLibrary'

@Entry
@Component
struct Index {
   @State controller: DrawerController = new DrawerController()
   @State isShowSideBar: boolean = false

   @Builder
   leftView() {
      Text('我是侧边栏').fontSize(30)
   }

   @Builder
   rightView() {
      Column() {
         RelativeContainer() {
            Image(this.isShowSideBar ? $r('app.media.drawer_select') : $r('app.media.drawer_normal'))
               .width(32)
               .height(32)
               .id('imageDrawer')
               .margin({ left: 20 })
               .alignRules({
                  center: { anchor: '__container__', align: VerticalAlign.Center },
                  left: { anchor: '__container__', align: HorizontalAlign.Start }
               })
               .onClick(() => {
                  if (this.isShowSideBar) {
                     this.controller.hideSideBar()
                  } else {
                     this.controller.showSideBar()
                  }
               })

            Text('首页')
               .fontSize(24)
               .fontColor(Color.White)
               .fontWeight(FontWeight.Bold)
               .id("textTitle")
               .alignRules({
                  center: { anchor: '__container__', align: VerticalAlign.Center },
                  middle: { anchor: '__container__', align: HorizontalAlign.Center }
               })
         }
         .backgroundColor('#1296db')
         .width('100%')
         .height(56)
      }.width('100%')
      .height('100%')
   }

   build() {
      Stack() {
         DrawerLayout({
            isShowSideBar: this.isShowSideBar,
            controller: this.controller,
            leftView: () => this.leftView(),
            rightView: () => this.rightView()
         })
      }.width('100%')
      .height('100%')
   }
}

DrawerLayout参数解释:

|---------------|----------|------------------------------------------------------|
| 属性 | 是否必须 | 描述 |
| isShowSideBar | 是 | 侧边栏是否显示 |
| controller | 是 | 布局控制器,有两个方法: showSideBar():显示侧边栏 hideSideBar():隐藏侧边栏 |
| leftView | 是 | 左侧侧边栏的布局 |
| rightView | 是 | 右侧内容的布局 |
| sideBarWidth | 否 | 左侧侧边栏的宽度 |

鸿蒙原生侧边栏布局使用介绍

SideBarContainer控件官方介绍:sidebarcontainer介绍

1、SideBarContainer调用

复制代码
@Entry
@Component
struct Index {
   @State isShowSideBar: boolean = false

   @Builder
   leftView() {
      Text('我是侧边栏').fontSize(30)
   }

   @Builder
   rightView() {
      Column() {
         RelativeContainer() {
            Image(this.isShowSideBar ? $r('app.media.drawer_select') : $r('app.media.drawer_normal'))
               .width(32)
               .height(32)
               .id('imageDrawer')
               .margin({ left: 20 })
               .alignRules({
                  center: { anchor: '__container__', align: VerticalAlign.Center },
                  left: { anchor: '__container__', align: HorizontalAlign.Start }
               })
               .onClick(() => {
                  this.isShowSideBar = !this.isShowSideBar
               })

            Text('首页')
               .fontSize(24)
               .fontColor(Color.White)
               .fontWeight(FontWeight.Bold)
               .id("textTitle")
               .alignRules({
                  center: { anchor: '__container__', align: VerticalAlign.Center },
                  middle: { anchor: '__container__', align: HorizontalAlign.Center }
               })
         }
         .backgroundColor('#1296db')
         .width('100%')
         .height(56)
      }.width('100%')
      .height('100%')
   }

   build() {
      Stack() {
         SideBarContainer(SideBarContainerType.Embed) {
            this.leftView()

            this.rightView()
         }
         .showSideBar(this.isShowSideBar)
         .showControlButton(false) //是否显示控制按钮
         .sideBarWidth(300)
         .maxSideBarWidth(300)
         .onChange((value: boolean) => {
            console.info('status:' + value)
         })
      }.width('100%')
      .height('100%')
   }
}

2、控件效果:

相关推荐
雪域迷影8 小时前
OpenHarmony之电源模式定制开发指导
openharmony·电源模式
智驾1 天前
Openharmony 和 HarmonyOS 区别?
harmonyos·openharmony
TARDIS_20204 天前
OpenHarmony-Risc-V上运行openBLAS中的benchmark
risc-v·openharmony
少年的云河月5 天前
OpenHarmony Camera开发指导(五):相机预览功能(ArkTS)
harmonyos·openharmony·camera·相机开发
少年的云河月8 天前
OpenHarmony Camera开发指导(四):相机会话管理(ArkTS)
harmonyos·相机·openharmony·camera
夜星辰202310 天前
最新 OpenHarmony 系统一二级目录整理
openharmony
ursamjnor12 天前
基于 OpenHarmony 5.0 的星闪轻量型设备应用开发-Ch1 开发环境搭建
openharmony·星闪·轻量型设备开发
少年的云河月12 天前
OpenHarmony Camera组件简介
harmonyos·相机·openharmony·camera
ursamjnor12 天前
基于 OpenHarmony 5.0 的星闪轻量型设备应用开发——Ch2 OpenHarmony LiteOS-M 内核应用开发
openharmony·ws63·liteos-m 内核应用
少年的云河月13 天前
OpenHarmony Camera开发指导(二):相机设备管理(ArkTS)
harmonyos·openharmony·camera·相机开发