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

文章目录

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

一、前言

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

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

话不多说，看效果。

展开效果：

收缩效果：

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

二、侧边栏使用

组件是SideBarContainer

cpp 复制代码

   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
    })