鸿蒙自定义侧滑菜单布局(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、控件效果:

相关推荐
Industio_触觉智能18 小时前
如何在开源鸿蒙OpenHarmony开启SELinux模式?RK3566鸿蒙开发板演示
openharmony·selinux·开源鸿蒙·鸿蒙开发板·rk3566开发板
xiaolaoshuXD6 天前
深入解析 OpenHarmony 构建系统-4-OHOSLoader类
编译·openharmony·build·构建·hb
雪域迷影6 天前
OpenHarmony的公共事件
openharmony·ces公共事件·资源调度服务
伊二7 天前
鸿蒙next ui安全区域适配(刘海屏、摄像头挖空等)
华为·harmonyos·鸿蒙·openharmony·团结引擎·huamony next
Industio_触觉智能15 天前
OpenHarmony4.1蓝牙芯片如何适配?触觉智能RK3568主板SBC3568演示
openharmony·rk3568·开源鸿蒙·鸿蒙开发板·触觉智能
ssslar16 天前
Harmony OS 如何实现 C++ NATIVE YUV420(其他数据格式如BGRA等)自渲染
华为·harmonyos·鸿蒙·openharmony
Industio_触觉智能19 天前
【鸿蒙新闻】10月29日警用鸿蒙开发者大会在北京胜利召开,开启智慧应用新时代!
鸿蒙系统·openharmony·开源鸿蒙·纯血鸿蒙·警用鸿蒙
Industio_触觉智能1 个月前
触觉智能Purple Pi OH鸿蒙开发板成功适配OpenHarmony5.0 Release,开启新征程!
harmonyos·openharmony·开源鸿蒙·鸿蒙开发板·触觉智能·原生鸿蒙
码匠许师傅1 个月前
【开源鸿蒙】OpenHarmony 5.0轻量系统最小开发环境搭建
python·pip·risc-v·openharmony·gcc·1024程序员节·hi3861
SuperHeroWu71 个月前
【HarmonyOS】鸿蒙目前最好用的路由管理 HMRouter (一)
华为·harmonyos·openharmony·路由管理·hmrouter·回退栈