快速实现鸿蒙侧边栏显示与隐藏

文章目录

前言
侧边栏组件使用
快速搞定侧边栏
总结

一、前言

有好多文章要分享，但是来不及，就把最近觉得比较重要的组件分享下。最近因为在完善玩android的一个app，我的这个app叫玩鸿蒙，过段时间就开源了，敬请期待。

今天就分享，我在WanHarmony中用到的这个组件。先不多说，看下效果，老读者都知道我在维护一个组件使用的项目，所以我今天的这个组件使用，也会放到那个项目中，能快速的上手。

话不多说，看效果。

展开效果：
在这里插入图片描述

收缩效果：
在这里插入图片描述
上边的效果是在WanHarmony项目中已经实现的效果，如果你也想实现，那么你要把握这个关键组件。只要会使用这个组件，就能写出上面的效果。至于上面的效果，等我把WanHarmony开源就可以查看。

二、侧边栏使用

组件是SideBarContainer

   Column(){SideBarContainer(SideBarContainerType.Embed) { //侧边栏和内容并列显示，Overlay是侧边栏浮在内容上面//侧边栏的布局 （也就是左半边布局）Column(){ForEach(this.arr, (item, index)=>{Column({space:5}){Image(this.current === index ? this.selectedIcon : this.normalIcon).width(64).height(64)Text('index0' + item).fontSize(25).fontColor(this.current === index ?  '#0A59F7' : '#999')}.onClick(()=>{this.current = index})}, item => item)}.width('100%').margin({top: 90}).backgroundColor(Color.Red).justifyContent(FlexAlign.SpaceEvenly)//右边 内容的布局  （右边半边的布局）List(){ForEach(this.arr,(item, index)=>{ListItem(){Text(item + '文本').height(50)}}, (item)=>item)}.margin({top: 90}).height('100%')}.controlButton({//控制侧边栏显示隐藏的按钮icons:{hidden: $r('app.media.ic_broadside_close'),shown:$r('app.media.ic_broadside_default'),switching: $r('app.media.ic_broadside_close')},width:32,height:32}).sideBarWidth(150).minSideBarWidth(50).maxSideBarWidth('100%').onChange((value)=>{ //侧边栏是否显示的值console.log('当前的值：' + value)}).backgroundColor(Color.Green)}.margin({top: -40})

三、快速搞定侧边栏

从上面注释基本就能知道这个组件的使用了，自己再撸一把就掌握了。
这里罗列下SideBarContainer的要点：
1、里面放两个布局，一个作为左半部分用，一个作为右半边部分用。
2、controlButton 这个是侧边栏切换的按钮，可以设置按钮图片和大小
3、sideBarWidth 这个是设定侧边栏（左边部分）的宽度，也就是左半边的大小。
4、如果想让左边部分滚动，那么里面就放List组件就可以了。

在这里插入图片描述