SideBarContainer：在 ArkUI 中轻松做出抽屉式与并排式侧边栏

想在手机 APP 中做一个滑出的菜单，或者在平板应用里保持常驻导航？ArkUI 的 SideBarContainer 一招搞定。下面带你从零开始，一步步学会它：

1. 两种布局模式，随意切换

1. Embed（并排式）

   • 侧边栏与主内容区并排展示，始终可见。适合大屏或平板场景。

2. Overlay（浮层式）

   • 侧边栏叠加在主内容上方，通常带蒙层；收起后完全隐藏，节省空间。更适合手机端。

// 仅需在容器构造时传入类型：
SideBarContainer(SideBarContainerType.Embed)   // 并排
SideBarContainer(SideBarContainerType.Overlay) // 抽屉

2. 最简单的示例

@Entry @Component struct SimpleSidebar {
  @State menuOpen: boolean = false;

  build() {
    SideBarContainer(SideBarContainerType.Overlay) {
      // —— 第一个子组件：侧边栏内容 ——
      Column({ space: 12 }) {
        Text("导航菜单").fontSize(20)
        Button("关闭").onClick(() => this.menuOpen = false)
      }
      .width(220)
      .backgroundColor("#f5f5f5")

      // —— 第二个子组件：主区域内容 ——
      Column({ space: 12 }) {
        Button(this.menuOpen ? "隐藏菜单" : "打开菜单")
          .onClick(() => this.menuOpen = !this.menuOpen)
        Text("这里是主内容区").fontSize(18)
      }
      .backgroundColor("#ffffff")
    }
    .showSideBar(this.menuOpen)
    .width("100%")
    .height("100%")
  }
}

• 点击“打开菜单”后，侧边栏滑出；
• showSideBar(...) 绑定了 @State menuOpen 来控制展开/收起。

3. 深度定制：控制按钮 & 宽度

你可以给侧边栏加一个小按钮，用来切换状态；还可以设定宽度范围。

SideBarContainer(SideBarContainerType.Embed) {
  /* …侧边栏 & 主内容… */
}
.showSideBar(this.menuOpen)
.sideBarWidth(250)      // 固定宽度
.minSideBarWidth(120)   // 最小宽
.maxSideBarWidth(300)   // 最大宽
.showControlButton(true)
.controlButton({
  left: this.menuOpen ? 250 - 20 : 0,  // 收起时按钮会滑到内容区左侧
  top: 16,
  width: 24, height: 24,
  icons: {
    shown: "icon_back",    // 本地资源 ID 或 PixelMap
    hidden: "icon_menu",
  }
})
.onChange((visible) => {
  // 每次侧栏收起/展开都会调用
  console.log("侧栏现在", visible ? "可见" : "隐藏");
})

• controlButton({...})：定义按钮位置、大小、图标；
• 收起态与展开态可分别用 icons.hidden / icons.shown；
• onChange 拖拽或按钮切换时，也能捕捉状态变化。

4. 场景演示

• 桌面端导航：Embed 模式下，按钮仅作折叠侧边栏；
• 移动端抽屉：Overlay 模式，侧边栏覆盖内容，加上遮罩；
• 响应式：结合 GridContainer、Flex，让主区域内容在侧栏展开与收缩时自动适配宽度。

5. 小贴士

• 可访问性：确保控制按钮至少 44×44dp，并添加无障碍提示；
• 图标资源：最好用矢量或不同主题下清晰可见的图标；
• 动画效果：可在 onChange 回调里配合 Animation 模块，增加平滑过渡；
• 调试模式：在预览器上测试 Overlay 有时不如真机顺畅，实机检验更靠谱。

掌握了 SideBarContainer，你就能在 ArkUI 里无缝实现各种侧边栏交互 —— 不管是常驻导航，还是灵活抽屉，都轻松搞定。