鸿蒙自定义侧滑菜单布局（DrawerLayout）

媒介

为了实现安卓中的侧滑菜单布局结果，通过查找鸿蒙的布局控件，发现SideBarContainer控件有点像，但是使用中发现并不是很符合我们的UI交互结果，因此我在鸿蒙中通过自定义布局的方式实现，本文重要先容该自定义控件怎样使用、SideBarContainer原生控件怎样使用，后面会先容怎样通过自定义实现侧滑菜单布局。
DeVEcoStudio版本如下：

1. "minAPIVersion": 9,
2. "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文件

1. {
2.   "license": "",
3.   "devDependencies": {},
4.   "author": "",
5.   "name": "entry",
6.   "description": "Please describe the basic information.",
7.   "main": "",
8.   "version": "1.0.0",
9.   "dependencies": {
10.     "@app/DrawerLibrary": "file:./src/main/libs/DrawerLibrary.har"
11.   }
12. }

复制代码

2、调用DrawerLayout布局

1. import { DrawerController, DrawerLayout } from '@app/DrawerLibrary'
3. @Entry
4. @Component
5. struct Index {
6.    @State controller: DrawerController = new DrawerController()
7.    @State isShowSideBar: boolean = false
9.    @Builder
10.    leftView() {
11.       Text('我是侧边栏').fontSize(30)
12.    }
14.    @Builder
15.    rightView() {
16.       Column() {
17.          RelativeContainer() {
18.             Image(this.isShowSideBar ? $r('app.media.drawer_select') : $r('app.media.drawer_normal'))
19.                .width(32)
20.                .height(32)
21.                .id('imageDrawer')
22.                .margin({ left: 20 })
23.                .alignRules({
24.                   center: { anchor: '__container__', align: VerticalAlign.Center },
25.                   left: { anchor: '__container__', align: HorizontalAlign.Start }
26.                })
27.                .onClick(() => {
28.                   if (this.isShowSideBar) {
29.                      this.controller.hideSideBar()
30.                   } else {
31.                      this.controller.showSideBar()
32.                   }
33.                })
35.             Text('首页')
36.                .fontSize(24)
37.                .fontColor(Color.White)
38.                .fontWeight(FontWeight.Bold)
39.                .id("textTitle")
40.                .alignRules({
41.                   center: { anchor: '__container__', align: VerticalAlign.Center },
42.                   middle: { anchor: '__container__', align: HorizontalAlign.Center }
43.                })
44.          }
45.          .backgroundColor('#1296db')
46.          .width('100%')
47.          .height(56)
48.       }.width('100%')
49.       .height('100%')
50.    }
52.    build() {
53.       Stack() {
54.          DrawerLayout({
55.             isShowSideBar: this.isShowSideBar,
56.             controller: this.controller,
57.             leftView: () => this.leftView(),
58.             rightView: () => this.rightView()
59.          })
60.       }.width('100%')
61.       .height('100%')
62.    }
63. }

复制代码

DrawerLayout参数表明：

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

鸿蒙原生侧边栏布局使用先容

SideBarContainer控件官方先容：sidebarcontainer先容

1、SideBarContainer调用

2. @Entry
3. @Component
4. struct Index {
5.    @State isShowSideBar: boolean = false
7.    @Builder
8.    leftView() {
9.       Text('我是侧边栏').fontSize(30)
10.    }
12.    @Builder
13.    rightView() {
14.       Column() {
15.          RelativeContainer() {
16.             Image(this.isShowSideBar ? $r('app.media.drawer_select') : $r('app.media.drawer_normal'))
17.                .width(32)
18.                .height(32)
19.                .id('imageDrawer')
20.                .margin({ left: 20 })
21.                .alignRules({
22.                   center: { anchor: '__container__', align: VerticalAlign.Center },
23.                   left: { anchor: '__container__', align: HorizontalAlign.Start }
24.                })
25.                .onClick(() => {
26.                   this.isShowSideBar = !this.isShowSideBar
27.                })
29.             Text('首页')
30.                .fontSize(24)
31.                .fontColor(Color.White)
32.                .fontWeight(FontWeight.Bold)
33.                .id("textTitle")
34.                .alignRules({
35.                   center: { anchor: '__container__', align: VerticalAlign.Center },
36.                   middle: { anchor: '__container__', align: HorizontalAlign.Center }
37.                })
38.          }
39.          .backgroundColor('#1296db')
40.          .width('100%')
41.          .height(56)
42.       }.width('100%')
43.       .height('100%')
44.    }
46.    build() {
47.       Stack() {
48.          SideBarContainer(SideBarContainerType.Embed) {
49.             this.leftView()
51.             this.rightView()
52.          }
53.          .showSideBar(this.isShowSideBar)
54.          .showControlButton(false) //是否显示控制按钮
55.          .sideBarWidth(300)
56.          .maxSideBarWidth(300)
57.          .onChange((value: boolean) => {
58.             console.info('status:' + value)
59.          })
60.       }.width('100%')
61.       .height('100%')
62.    }
63. }

复制代码

2、控件结果：

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。