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

文章目录

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

一、前言

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

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

话不多说，看效果。

展开效果：

51.png

收缩效果：

52.png

上边的效果是在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组件就可以了。

53.png

最后呢，将我整理的这个组件放到这个项目中，后面有新增，也会一并上传。开发中，某些api忘记了，可以重新拿出来看看。

最后献上我的个人v，专属终身顾问，解答关于鸿蒙相关的东西，包括项目中的问题，还有最新的技术点，快速开发，抢在前头。 hmssz1

技术迭代很快，不要在一个问题上拔不出来，找到专业的人，快速的解决，作为程序员时间是最宝贵的，不要自己蒙头苦干，等你搞懂了，这个技术已经过时了。

以上代码地址：https://github.com/shenshizhong/ViewUseDemo
找到这个类 SlideBarContainerTestPage.ets

总结

1、SideBarContainer 的使用
2、给定好左边部分 和右边部分的布局
3、设置好左半边大小 和右半天大小

如果对你有一点点帮助，那是值得高兴的事情。：)
我的csdn：http://blog.csdn.net/shenshizhong
我的简书：http://www.jianshu.com/u/345daf0211ad