往期鸿蒙全套实战精彩文章必看内容：

• 鸿蒙开发核心知识点，看这篇文章就够了

• 最新版！鸿蒙HarmonyOS Next应用开发实战学习路线

• 鸿蒙HarmonyOS NEXT开发技术最全学习路线指南

• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）

SideBarContainer如何设置controlButton属性

SideBarContainer组件提供了侧边栏可以显示和隐藏的侧边栏容器，它的controlButton属性可以设置侧边栏控制按钮的属性。

参考代码如下：

@Entry 
@Component 
struct SideBarContainerExample { 
  normalIcon: Resource = $r("app.media.icon") 
  selectedIcon: Resource = $r("app.media.icon") 
  @State arr: number[] = [1, 2, 3] 
  @State current: number = 1 
 
  build() { 
    SideBarContainer(SideBarContainerType.Embed) { 
      Column() { 
        ForEach(this.arr, (item: number, index) => { 
          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') 
              .fontFamily('source-sans-pro,cursive,sans-serif') 
          } 
          .onClick(() => { 
            this.current = item 
          }) 
        }) 
      }.width('100%') 
      .justifyContent(FlexAlign.SpaceEvenly) 
      .backgroundColor('#19000000') 
 
      Column() { 
        Text('SideBarContainer content text1').fontSize(25) 
        Text('SideBarContainer content text2').fontSize(25) 
      } 
      .margin({ top: 50, left: 20, right: 30 }) 
    } 
    .sideBarWidth(150) 
    .minSideBarWidth(50) 
    .controlButton({ 
      left: 32, 
      top: 32, 
      width: 32, 
      height: 32, 
      icons: { shown: $r("app.media.icon"), 
        hidden: $r("app.media.icon"), 
        switching: $r("app.media.icon") } 
    }) 
    .maxSideBarWidth(300) 
    .onChange((value: boolean) => { 
      console.info('status:' + value) 
    }) 
  } 
}

​