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

shenshizhong

已于 2024-03-18 17:26:44 修改

阅读量485

点赞数 4

文章标签： harmonyos 华为鸿蒙组件

于 2024-03-18 17:20:29 首次发布

本文链接：https://blog.csdn.net/shenshizhong/article/details/136813392

版权

文章目录

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

一、前言

有好多文章要分享，但是来不及，就把最近觉得比较重要的组件分享下。最近因为在完善玩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组件就可以了。

在这里插入图片描述