侧边栏布局

效果

流程

流程

类似 Stack 布局，只不过侧边栏布局是左右布局，左边是侧边栏，右边是内容区

1. 必须是 SideBarContainer 布局模式 参数就是控制按钮是否遮盖内容区

2. 第一个组件就是左边的侧边栏 第二个组件就是右边的内容区

3. 剩下的就是属性.方法就是 onChange

参数

SideBarContainer(SideBarContainerType.Embed) {}

- SideBarContainerType.Embed // 侧边栏和内容区一起变化

- SideBarContainerType.Overlay // 侧边栏会在内容区上面 。侧边栏动 内容区不动

- SideBarContainerType.Auto // 自动判断 选择上面哪个

属性

declare class SideBarContainerAttribute {
  showSideBar: boolean; // 是否显示侧边栏 true 就是显示 false就是不显示
  controlButton:ButtonStyle; // 设置侧边控制按钮属性
  showControlButton:boolean; // 是否显示侧边控制按钮 true 就是显示 false就是不显示
  sideBarWidth: number; // 侧边栏宽度
  minSideBarWidth: number; // 侧边栏最小宽度
  maxSideBarWidth: number; // 侧边栏最大宽度
  // 当分割线拖拽
  // 侧边栏拖拽到小于最小宽度后，是否自动隐藏 默认是true, true 就是自动隐藏 false就是不隐藏
  autoHide:boolean;
  sideBarPosition: SideBarPosition; // 侧边栏位置 SideBarPosition.Start 就是左边 End 就是右边
  divider:DividerStyle||null; // 侧边栏和内容区之间的分割线属性,null 就不做处理和默认值保持一致
}

declare class ButtonStyle {
   width: number, // 按钮宽度
   height: number, // 按钮高度
   left: number, // 按钮左边距
   top: number, // 按钮上边距
   icons: {
      hidden: $r('app.media.startIcon'), // 侧边栏隐藏的时候图标
      shown: $r('app.media.startIcon'), // 侧边栏显示的时候图标
      switching: $r('app.media.startIcon') // 侧边栏切换的时候图标
    }
}
declare class DividerStyle{

  strokeWidth: number // 分割线宽度 默认值 1vp

  color: Color // 分割线颜色 默认值 Color.Gray

  startMargin: number // 分割线与侧边栏顶端的距 默认值 4vp

  endMargin: number // 分割线与侧边栏底端 默认值 4vp

}

事件

当侧边栏的状态在显示和隐藏之间切换时触发回调。

注意

1. showSideBar 属性值变换时；

2. showSideBar 属性自适应行为变化时；

3. 分割线拖拽触发 autoHide 时。

onChange((value: boolean) => {
  console.info("status:" + value);
});

代码

@Entry
@Component
struct Index8 {
    normalIcon: Resource = $r("app.media.app_icon")
    selectedIcon: Resource = $r("app.media.background")
    @State arr: number[] = [1, 2, 3]
    @State current: number = 1

    build() {
        SideBarContainer(SideBarContainerType.Embed) {
            Column() {
                ForEach(this.arr, (item: number) => {
                    Column({ space: 5 }) {
                        Image(this.current === item ? this.selectedIcon : this.normalIcon).width(64).height(64)
                        Text("Index0" + item)
                            .fontSize(25)
                            .fontColor(this.current === item ? '#0A59F7' : '#999')

                    }
                    .onClick(() => {
                        this.current = item
                    })
                }, (item: string) => item)
            }.width('100%')
            .justifyContent(FlexAlign.SpaceEvenly)
            .backgroundColor('#19000000')

            Column() {
                Text('SideBarContainer content text1').fontSize(25)
                Text('SideBarContainer content text2').fontSize(25)
            }
            .margin({ top: 0, left: 35, })
        }
        .showSideBar(false)
        .controlButton({
            width: 30,
            height: 30,
            left: 10,
            top: 30,
            icons: {
                hidden: $r('app.media.startIcon'),
                shown: $r('app.media.startIcon'),
                switching: $r('app.media.startIcon')
            }
        })
        .sideBarWidth(150)
        .minSideBarWidth(100)
        .maxSideBarWidth(300)
        .minContentWidth(50)
        .onChange((value: boolean) => {
            console.info('status:' + value)
        })
        .sideBarPosition(SideBarPosition.Start)
        .divider({
            strokeWidth: '1vp',
            color: Color.Gray,
            startMargin: '4vp',
            endMargin: '4vp'
        })
    }
}