#鸿蒙通关秘籍#如何使用控制按钮管理SideBarContainer侧边栏的显示？

通过使用 controlButton 属性，可以给 SideBarContainer 添加侧边栏控制按钮，设置按钮的位置、大小和显示的图标。通过图标的显示与否来控制侧边栏的显示和隐藏状态。

bash @Entry @Component struct SideBarButtonExample { build() { SideBarContainer(SideBarContainerType.Overlay) { Column() { Text("侧边栏") .width("100%") .height("100%") .fontSize(30) .textAlign(TextAlign.Center) } .width(10) .height("100%") .backgroundColor("#aabbcc")

  Column() {
    Text("内容区域")
      .width("100%")
      .height("100%")
      .fontSize(30)
      .textAlign(TextAlign.Center)
  }
  .width("100%")
  .height("100%")
  .backgroundColor("#bbccaa")
}
.width("100%")
.height("100%")
.controlButton({
  width: 30,
  height: 30,
  top: 15,
  icons: {
    shown: $r("app.media.icon_back"),
    hidden: $r("app.media.icon_menu"),
    switching: $r("app.media.icon_back")
  }
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

} }