arkts组件SideBarContainer :让侧边栏像呼吸一样自然

暮乘白帝过重山2025-12-11 10:36

SideBarContainer 是 ArkTS 中专门处理「侧边栏+内容区」布局的容器组件，就像给应用装了一个智能抽屉------需要时滑出，不需要时自动隐藏。

核心设计

不同于传统布局的「固定占位」，SideBarContainer 通过空间智能分配实现三种形态的无缝切换：

· Embed模式：侧边栏与内容区共享空间，像书本的左右页
· Overlay模式：侧边栏悬浮覆盖，类似抽屉的推拉效果
· AUTO模式：根据容器尺寸自动选择最优方案

结构约束：2个子组件的精密舞蹈

SideBarContainer 对子组件有严格的「双人舞」规则：

子组件位置	角色定义	异常处理
第1个子组件	侧边栏（导航菜单）	超过2个时仅显示前两个
第2个子组件	内容区（主显示区域）	超过2个时仅显示前两个

特殊场景：当只有1个子组件时，侧边栏独占显示，内容区保持空白

三态切换的智能逻辑

Embed模式：空间共享的艺术

当容器宽度 ≥ minSideBarWidth + minContentWidth 时生效，侧边栏与内容区像拼图般严丝合缝。此时调整侧边栏宽度会实时挤压内容区空间，形成动态布局效果。

Overlay模式：悬浮层的优雅

侧边栏以蒙层形式出现，不占用主内容空间。适合小屏设备或需要聚焦内容的场景，配合半透明背景可营造层次感。

AUTO模式：自适应的智慧

API 10+ 引入的智能模式，以600vp为断点自动切换 Embed/Overlay。就像给组件装了一个「环境感知器」，能根据容器尺寸自动选择最优展示方案。

关键属性

尺寸控制体系

sideBarWidth。默认值240vp，支持动态调整（API 18+双向绑定）

minContentWidth。内容区最小360vp，保障核心内容不被压缩

交互控制开关

showControlButton默认true，可自定义图标样式

autoHide拖拽到最小宽度时自动隐藏

代码

复制代码

@Entry
@Component
struct SmartSideBar {
  @State isShow: boolean = true
  
  build() {
    SideBarContainer(SideBarContainerType.AUTO) {
      // 侧边栏：导航菜单
      Column() {
        Text('文档').fontSize(16).padding(12)
        Text('设置').fontSize(16).padding(12)
        Text('账户').fontSize(16).padding(12)
      }
      .backgroundColor('#F5F5F5')
      .width('200vp')
      
      // 内容区：主显示区域
      Column() {
        Text('内容区域')
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
      }
      .padding(20)
    }
    .sideBarWidth('240vp')
    .minContentWidth('360vp')
    .showSideBar(this.isShow)
    .onChange((show: boolean) => {
      this.isShow = show
    })
  }
}