HarmonyOS 6.1 实战：SideBarContainer 侧边栏导航详解

发布时间：2026/10/3 3:25:55

HarmonyOS 6.1 实战：SideBarContainer 侧边栏导航详解
前言SideBarContainer是 ArkUI 专为平板/大屏设备设计的侧边导航容器在宽屏下展示侧边栏 主内容双栏布局窄屏时自动折叠为汉堡菜单。本文演示从基础用法到自定义侧边栏的完整实现。运行效果初始状态侧边栏展开首页切换到文章页核心 API 一览API说明SideBarContainer(SideBarContainerType)侧边栏容器第一个子组件为侧边栏第二个为主内容SideBarContainerType.Embed侧边栏嵌入主内容区推挤主内容默认SideBarContainerType.Overlay侧边栏浮于主内容上方.showSideBar(bool)控制侧边栏显隐.sideBarWidth(n)侧边栏宽度.minSideBarWidth(n)侧边栏最小宽度.maxSideBarWidth(n)侧边栏最大宽度.autoHide(bool)窄屏时自动隐藏侧边栏.showControlButton(bool)是否显示系统控制按钮.onChange(bool)侧边栏展开/收起状态变化回调完整示例代码interface NavItem { icon: string label: string badge: number } interface Article { title: string summary: string time: string icon: string } Entry Component struct Index { State selectedNav: number 0 State sideBarVisible: boolean true private navItems: NavItem[] [ { icon: , label: 首页, badge: 0 }, { icon: , label: 文章, badge: 3 }, { icon: , label: 项目, badge: 0 }, { icon: , label: 关于, badge: 0 }, ] private articles: Article[] [ { title: ArkUI Stack 布局详解, summary: 深入理解 Stack 层叠布局与 Overlay 浮层..., time: 5分钟前, icon: }, { title: List 高性能渲染, summary: 虚拟化列表与 ListItemGroup 分组吸顶实战..., time: 1小时前, icon: }, { title: Swiper 轮播图实战, summary: DotIndicator 自定义、SwiperController 编程控制..., time: 昨天, icon: }, ] Builder sideBarContent() { Column({ space: 0 }) { // 用户信息区 Column({ space: 8 }) { Text(‍) .fontSize(48) .width(72) .height(72) .textAlign(TextAlign.Center) .backgroundColor(#e8f0ff) .borderRadius(36) Text(HarmonyOS 开发者) .fontSize(16) .fontWeight(FontWeight.Bold) .fontColor(#1a1a1a) Text(harmonydev.com) .fontSize(12) .fontColor(#888888) } .width(100%) .padding({ top: 40, bottom: 20 }) .alignItems(HorizontalAlign.Center) .backgroundColor(#f8faff) .border({ width: { bottom: 1 }, color: #e8eeff }) // 导航列表 ForEach(this.navItems, (item: NavItem, idx: number) { Row({ space: 0 }) { Text(item.icon) .fontSize(22) .width(36) .textAlign(TextAlign.Center) Text(item.label) .fontSize(15) .fontColor(this.selectedNav idx ? #0066ff : #333333) .fontWeight(this.selectedNav idx ? FontWeight.Bold : FontWeight.Normal) .layoutWeight(1) .padding({ left: 8 }) if (item.badge 0) { Text(item.badge.toString()) .fontSize(11) .fontColor(#ffffff) .backgroundColor(#ff4444) .width(20) .height(20) .textAlign(TextAlign.Center) .borderRadius(10) } } .width(100%) .height(52) .padding({ left: 20, right: 16 }) .backgroundColor(this.selectedNav idx ? #f0f5ff : transparent) .border({ width: { left: this.selectedNav idx ? 3 : 0 }, color: { left: #0066ff } }) .onClick(() { this.selectedNav idx }) }) } .width(100%) .height(100%) .backgroundColor(#ffffff) } Builder mainContent() { Column({ space: 0 }) { // 顶部工具栏 Row({ space: 12 }) { Button() .width(44) .height(44) .borderRadius(22) .backgroundColor(#f5f5f5) .onClick(() { this.sideBarVisible !this.sideBarVisible }) Text(this.navItems[this.selectedNav].label) .fontSize(18) .fontWeight(FontWeight.Bold) .fontColor(#1a1a1a) .layoutWeight(1) Text(⋯) .fontSize(24) .fontColor(#333) .padding({ right: 4 }) } .width(100%) .height(56) .padding({ left: 16, right: 16 }) .backgroundColor(#ffffff) .border({ width: { bottom: 1 }, color: #f0f0f0 }) // 内容区 if (this.selectedNav 0) { // 首页内容 Scroll() { Column({ space: 16 }) { // 欢迎卡片 Column({ space: 8 }) { Text( 欢迎回来) .fontSize(22) .fontWeight(FontWeight.Bold) .fontColor(#1a1a1a) Text(今天是学习 HarmonyOS 的好日子) .fontSize(14) .fontColor(#666) } .width(100%) .padding(20) .backgroundColor(#0066ff) .borderRadius(14) .alignItems(HorizontalAlign.Start) // 统计数据 Row({ space: 12 }) { Column({ space: 4 }) { Text(42).fontSize(28).fontWeight(FontWeight.Bold).fontColor(#0066ff) Text(已学文章).fontSize(12).fontColor(#888) } .layoutWeight(1) .height(80) .backgroundColor(#f0f5ff) .borderRadius(12) .justifyContent(FlexAlign.Center) Column({ space: 4 }) { Text(7).fontSize(28).fontWeight(FontWeight.Bold).fontColor(#ff6600) Text(连续天数).fontSize(12).fontColor(#888) } .layoutWeight(1) .height(80) .backgroundColor(#fff5f0) .borderRadius(12) .justifyContent(FlexAlign.Center) Column({ space: 4 }) { Text(95%).fontSize(28).fontWeight(FontWeight.Bold).fontColor(#00aa44) Text(完成率).fontSize(12).fontColor(#888) } .layoutWeight(1) .height(80) .backgroundColor(#f0fff5) .borderRadius(12) .justifyContent(FlexAlign.Center) } } .width(100%) .padding({ left: 16, right: 16, top: 16, bottom: 16 }) } .layoutWeight(1) } else if (this.selectedNav 1) { // 文章列表 List() { ForEach(this.articles, (article: Article) { ListItem() { Row({ space: 12 }) { Text(article.icon) .fontSize(28) .width(52) .height(52) .textAlign(TextAlign.Center) .backgroundColor(#f0f5ff) .borderRadius(12) Column({ space: 4 }) { Text(article.title) .fontSize(15) .fontWeight(FontWeight.Medium) .fontColor(#1a1a1a) .maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) Text(article.summary) .fontSize(12) .fontColor(#888) .maxLines(2) .textOverflow({ overflow: TextOverflow.Ellipsis }) Text(article.time) .fontSize(11) .fontColor(#bbb) } .layoutWeight(1) .alignItems(HorizontalAlign.Start) } .width(100%) .padding({ left: 16, right: 16, top: 14, bottom: 14 }) .backgroundColor(#ffffff) } }) } .divider({ strokeWidth: 1, color: #f5f5f5, startMargin: 80 }) .layoutWeight(1) } else { // 其他页面占位 Column({ space: 12 }) { Text(this.navItems[this.selectedNav].icon).fontSize(56) Text(this.navItems[this.selectedNav].label 页面) .fontSize(20) .fontWeight(FontWeight.Bold) .fontColor(#1a1a1a) Text(内容建设中敬请期待…) .fontSize(14) .fontColor(#aaa) } .layoutWeight(1) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) } } .width(100%) .height(100%) .backgroundColor(#f8f8f8) } build() { SideBarContainer(SideBarContainerType.Embed) { this.sideBarContent() this.mainContent() } .showSideBar(this.sideBarVisible) .sideBarWidth(220) .minSideBarWidth(180) .maxSideBarWidth(280) .autoHide(false) .showControlButton(true) .onChange((show: boolean) { this.sideBarVisible show }) .width(100%) .height(100%) } }关键知识点1. 子组件顺序第一个是侧边栏第二个是主内容SideBarContainer的子组件顺序有严格规定SideBarContainer() { sideBarBuilder() // ① 侧边栏必须是第一个 mainContent() // ② 主内容区必须是第二个 }2. Embed vs Overlay 类型// Embed默认侧边栏展开时主内容区被压缩 SideBarContainer(SideBarContainerType.Embed) // Overlay侧边栏展开时浮于主内容之上主内容不被压缩 SideBarContainer(SideBarContainerType.Overlay)场景推荐类型平板主导航主内容需全屏时Embed移动端抽屉菜单Overlay3. showControlButton 与 showSideBar 双重控制.showControlButton(true)显示系统内置的三角形箭头按钮右上角点击收起/展开侧边栏.showSideBar(this.sideBarVisible)编程式控制显隐需配合.onChange()同步状态// 手动汉堡菜单按钮 Button(☰) .onClick(() { this.sideBarVisible !this.sideBarVisible }) SideBarContainer() .showSideBar(this.sideBarVisible) .showControlButton(false) // 隐藏系统按钮使用自定义汉堡菜单 .onChange((show: boolean) { this.sideBarVisible show // 同步系统拖拽改变的状态 })4. 宽度三元组.sideBarWidth(220) // 默认宽度 .minSideBarWidth(160) // 最小用户拖拽下限 .maxSideBarWidth(320) // 最大用户拖拽上限侧边栏宽度支持用户拖拽调整min/max限定调整范围。5. autoHide.autoHide(true) // 小屏时自动隐藏侧边栏折叠屏手机形态推荐 .autoHide(false) // 始终显示平板形态推荐小结SideBarContainer专为平板/大屏双栏布局设计支持侧边栏的显隐、拖拽调宽子组件顺序严格第一个子组件是侧边栏第二个是主内容区Embed模式侧边栏占用空间Overlay模式侧边栏悬浮在主内容上showSideBar与onChange配合才能保持状态同步系统按钮和自定义按钮都能正确工作autoHide(true)配合折叠屏的状态监听可以自动在不同屏幕形态下切换显隐

相关新闻

智源多模型测试：大语言模型智能体具备协助绕过现有生物安全机制的技术能力

智源多模型测试：大语言模型智能体具备协助绕过现有生物安全机制的技术能力

当前大语言模型正从“聊天机器”进化为能调用工具、规划任务的“智能体”。这种进化在生物信息学、实验设计等领域展现出巨大潜力，除此之外，需要正视一个关键问题：当AI的能力从信息处理延伸到物理实验操作，生物安全的边界会发生怎…

2026/10/3 3:25:14 阅读更多 →
音乐推荐系统

音乐推荐系统

音乐推荐系统的选题背景音乐推荐系统是信息过滤技术与人工智能在音乐领域的典型应用，其核心目标是通过分析用户的历史行为、偏好及上下文信息，为其推荐可能感兴趣的音乐内容。随着数字音乐的普及和流媒体服务的迅猛发展，音乐数据的规模呈爆炸…

2026/10/3 3:22:16 阅读更多 →
098、视频防抖EIS/OIS融合：陀螺仪数据与图像对齐的工程化

098、视频防抖EIS/OIS融合：陀螺仪数据与图像对齐的工程化

098、视频防抖EIS/OIS融合：陀螺仪数据与图像对齐的工程化 去年在某个旗舰机项目上，我盯着示波器上的陀螺仪波形整整三天。画面里，OIS镜头像喝醉了一样左右摇摆，EIS裁剪窗口跟着疯狂跳动，最终输出的视频却依然抖得像手持DV。产线那边催着要过CTA认证，算法团队说OIS和EIS各…

2026/9/30 6:08:47 阅读更多 →

最新新闻

-fno-rtti导致invalid vptr？跨模块RTTI混用问题详解

-fno-rtti导致invalid vptr？跨模块RTTI混用问题详解

1. 事故现场：凌晨一点半的“invalid vptr”先说结论：如果你在一个 C 项目里看到object has invalid vptr，而且编译参数里恰好躺着-fno-rtti，那大概率不是内存被踩坏，也不是某个析构提前执行，而是 RTTI 相关…

2026/10/3 3:25:18 阅读更多 →
贝叶斯变点Copula模型：相关性突变检测的MCMC与Matlab实现

贝叶斯变点Copula模型：相关性突变检测的MCMC与Matlab实现

1. 为什么需要给Copula模型加一个“变点”1.1 从独立建模到依赖结构做金融风险、气象水文或工业过程数据分析的人，大概率都遇到过这样一个困境：两个变量之间的关联关系并不是一成不变的。股票市场里，不同板块的联动性在平稳期和危机期差别巨大…

2026/10/3 3:25:18 阅读更多 →
NDWI与MNDWI水体提取算法原理及Python实现对比

NDWI与MNDWI水体提取算法原理及Python实现对比

前几年做遥感水体监测时，经常有项目方拿着Landsat影像问我："为什么同一片湖区，不同人提出来的水体边界差那么多？"这个问题背后，其实就是指数选型和阈值分割的细节问题。今天我就把NDWI与MNDWI水体提取算法从…

2026/10/3 3:25:18 阅读更多 →
基于Python深度学习的音乐流行趋势预测系统：LSTM时间序列与Django/Flask双部署实战

基于Python深度学习的音乐流行趋势预测系统：LSTM时间序列与Django/Flask双部署实战

简介：这份资源是面向计算机相关专业学生与开发者的深度学习实战项目包，围绕音乐流行趋势预测这一典型时间序列任务展开，可用于毕业设计、课程设计、项目立项演示或自学进阶。包内共64个文件，以36个ipynb实验笔记为核心&#xff0c…

2026/10/3 3:25:18 阅读更多 →
HBuilderX云打包Vue项目为APK：Vue2+Vant H5转安卓App完整实战

HBuilderX云打包Vue项目为APK：Vue2+Vant H5转安卓App完整实战

我一年多前接过一个需求：公司内部管理系统是Vue2 Vant 2写的，页面和数据逻辑都跑通了，老板突然说，“把它做成安卓App装到手机上，出去谈客户的时候方便现场演示”。原生开发来不及，重写uni-app成本又太高&a…

2026/10/3 3:25:18 阅读更多 →
fsQCA完整实操指南：从数据校准到结果解读的R语言实现

fsQCA完整实操指南：从数据校准到结果解读的R语言实现

做fsQCA这大半年，从数据校准到结果解读每一步我都踩过坑，今天把这些经验完整整理出来，配上可直接运行的R代码示例，希望能帮到正在跟fsQCA较劲的朋友。这篇内容面向已经了解一些概念但缺少完整实操路径的读者，也适合从零…

2026/10/3 3:24:18 阅读更多 →

日新闻

把回忆蒸馏成 AI 的浪漫实验：为什么你需要前任.skill 完整指南

把回忆蒸馏成 AI 的浪漫实验：为什么你需要前任.skill 完整指南

把回忆蒸馏成 AI 的浪漫实验：为什么你需要前任.skill 完整指南 【免费下载链接】ex-skill 前任 skill 项目地址: https://gitcode.com/gh_mirrors/exsk/ex-skill 前任.skill 是一个运行在 Claude Code 上的开源 Skill：导入微信、iMessage、短信、…

2026/10/3 0:00:27 阅读更多 →
45个经典Linux面试题：从命令到网络排障的完整考点解析

45个经典Linux面试题：从命令到网络排障的完整考点解析

刚开始带应届生的时候，我最头疼的就是他们拿着一摞Linux面试题背得滚瓜烂熟，一上机全露馅。后来自己从被面的人变成面别人的人，才慢慢摸清楚：Linux面试题考的根本不是答案本身，而是你面对一个不确定的系统问题时&#…

2026/10/3 0:01:28 阅读更多 →
SAP生产预留实战指南：MB21/MB23/MB25协同与MRP集成

SAP生产预留实战指南：MB21/MB23/MB25协同与MRP集成

简介：本资源是一份面向SAP ABAP开发人员、生产计划专员及ERP实施顾问的实操型操作指南，聚焦SAP生产预留核心业务场景，系统解决物料预留创建、查询、校验与批量处理等高频问题。文档以结构化方式覆盖预留背景原理、OMC2编码规则、工厂级参数配…

2026/10/3 0:01:28 阅读更多 →

周新闻

如何划分训练/验证集：Spirula Studio五种eval_mode策略详解

如何划分训练/验证集：Spirula Studio五种eval_mode策略详解

如何划分训练/验证集：Spirula Studio五种eval_mode策略详解 【免费下载链接】spirula-studio Cross-vendor 3D Gaussian Splatting trainer - video to splat to mesh, Vulkan or CUDA. 项目地址: https://gitcode.com/GitHub_Trending/sp/spirula-studio Sp…

2026/10/1 19:40:48 阅读更多 →
SEO怎么推广速查手册新手避坑实战指南

SEO怎么推广速查手册新手避坑实战指南

SEO怎么推广速查手册新手避坑实战指南 模板网站太丑不够用？别急着加滤镜，那是治标不治本。很多老板盯着后台流量掉得眼红，却还在纠结首页Banner的圆角是不是3像素。这就像穿着西装去挖土，姿势不对，努力白费。我整理这份 速查手册…

2026/10/1 19:41:40 阅读更多 →
FireRed-OpenStoryline少样本仿写深度解析:AI Agent如何复刻你的独特文案风格与节奏

FireRed-OpenStoryline少样本仿写深度解析:AI Agent如何复刻你的独特文案风格与节奏

FireRed-OpenStoryline少样本仿写深度解析:AI Agent如何复刻你的独特文案风格与节奏 【免费下载链接】FireRed-OpenStoryline FireRed-OpenStoryline is an AI video editing agent that transforms manual editing into intention-driven directing through natural language …

2026/10/1 20:05:24 阅读更多 →

月新闻

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/2 10:36:31 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/2 5:26:06 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/2 6:09:11 阅读更多 →