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

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

发布时间：2026/7/22 15:48:47

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/7/22 15:48:47阅读更多 →
[SPI]SPI接口简介

[SPI]SPI接口简介

SPI接口简介 前言：串行外设接口(SPI)是微控制器和外围IC（如传感器、ADC、DAC、移位寄存器、SRAM等）之间使用较广泛的接口之一。本文先简要说明SPI接口，然后介绍ADI公司支持SPI的模拟开关与多路转换器，以及它们如何帮助减少系统电路板设计中的数字GPIO数量。 SPI是一…

2026/7/22 15:46:46阅读更多 →
选择器分类和权重计算，less 中的 解释

选择器分类和权重计算，less 中的 解释

一、选择器分类 css中选择器有：简单选择器和复杂选择器 1、简单选择器 通配符选择器（*）：匹配任何元素标签选择器（标签）：指用HTML标签名称作为选择器类选择器（class）&a…

2026/7/22 15:46:46阅读更多 →
TI VPDMA中断配置实战：从寄存器解析到系统级调试

TI VPDMA中断配置实战：从寄存器解析到系统级调试

1. 项目概述 在嵌入式视频处理系统的开发中，尤其是面对德州仪器（TI）这类高性能SoC时，中断管理往往是决定系统稳定性和实时性的关键。很多工程师拿到芯片手册，看到动辄几十页的寄存器描述，尤其是像VPDMA&…

2026/7/22 16:38:54阅读更多 →
桌面图标隐藏工具！录屏怕桌面太乱？隐藏S+！

桌面图标隐藏工具！录屏怕桌面太乱？隐藏S+！

前言 常年录教程、直播、线上会议的朋友一定深有体会，满屏文件、快捷方式全暴露，隐私文件一览无余。录出来的视频里，桌面图标乱七八糟。要是手动把图标藏起来，录完还得再费劲挪回原位。 今天分享两款“桌面图标一键隐藏工具”&a…

2026/7/22 16:38:54阅读更多 →
AI副业如何从0到月入5万？揭秘头部玩家正在用的3个公域流量裂变公式

AI副业如何从0到月入5万？揭秘头部玩家正在用的3个公域流量裂变公式

更多请点击： https://kaifayun.com 第一章：AI副业如何从0到月入5万？揭秘头部玩家正在用的3个公域流量裂变公式 在抖音、小红书、B站等公域平台，头部AI副业玩家已不再依赖“单点内容曝光”，而是通过可复制、可度量、可…

2026/7/22 16:38:54阅读更多 →
速度与精度的结合：Faster R-CNN模型的性能剖析

速度与精度的结合：Faster R-CNN模型的性能剖析

目标检测作为计算机视觉领域的核心问题之一，其重要性随着深度学习技术的发展而日益凸显。本文深入探讨了基于深度学习的Faster R-CNN模型，这是一种革命性的目标检测框架，它通过引入区域提议网络（Region Proposal Network, RPN&…

2026/7/22 16:38:54阅读更多 →
深入解析IOMM特殊复用：ADC触发、ePWM同步与安全机制实战

深入解析IOMM特殊复用：ADC触发、ePWM同步与安全机制实战

1. 项目概述与IOMM核心价值在嵌入式系统，尤其是汽车电子和工业控制这类对实时性、可靠性和资源利用率要求极高的领域，微控制器（MCU）的引脚资源往往非常紧张。一颗MCU需要驱动电机、采样传感器、处理通信、管理故障保护&#xff0c…

2026/7/22 16:38:54阅读更多 →
TI VPDMA中断寄存器深度解析与嵌入式视频处理驱动实战

TI VPDMA中断寄存器深度解析与嵌入式视频处理驱动实战

1. 项目概述与中断机制在视频处理中的核心地位在嵌入式视频处理系统的开发中，尤其是面对德州仪器（TI）这类高性能多媒体SoC时，中断管理往往是决定系统实时性、稳定性和效率的“命门”。我处理过不少基于达芬奇（DaVinci&…

2026/7/22 16:36:54阅读更多 →
Go语言静态资源打包方案对比与实践指南

Go语言静态资源打包方案对比与实践指南

1. 项目背景与核心需求在Go语言开发中，我们经常需要处理静态资源文件的打包问题。无论是Web应用的模板文件、前端资源，还是配置文件、证书等，都需要随程序一起分发。传统做法是将这些文件与编译后的二进制文件放在同一目录下，但这…

2026/7/22 0:53:59阅读更多 →
Go语言实现高性能LDAP认证服务的架构与实践

Go语言实现高性能LDAP认证服务的架构与实践

1. 项目背景与核心价值LDAP（轻量级目录访问协议）作为企业级身份认证的黄金标准，已经服务了超过80%的财富500强公司。我在金融科技领域实施统一认证体系时，发现传统Java方案存在启动慢、内存占用高等痛点。而Go语言凭借其协程并发模…

2026/7/22 0:53:59阅读更多 →
【AI面试官实战指南】：用ChatGPT模拟10类高频技术岗面试，3天提升应答精准度92%

【AI面试官实战指南】：用ChatGPT模拟10类高频技术岗面试，3天提升应答精准度92%

更多请点击： https://intelliparadigm.com 第一章：AI面试官实战指南的核心价值与适用场景 AI面试官并非替代人类HR的“黑箱工具”，而是以可解释、可审计、可迭代的方式，赋能招聘全链路的关键基础设施。其核心价值在于将主观经验沉…

2026/7/22 0:53:59阅读更多 →
中小企业小程序开发公司怎么选：预算、上手和售后避坑指南

中小企业小程序开发公司怎么选：预算、上手和售后避坑指南

中小企业做小程序，最常见的矛盾是预算有限，但又不希望功能太单薄；没有技术团队，但又希望后续能自己运营；想快速上线，又担心隐性收费和售后失联。选型时如果只看“低价套餐”或“案例数量”，很容…

2026/7/22 0:01:17阅读更多 →
GEO优化如何沉淀长期内容资产？广拓时代谈AI搜索时代的内容ROI

GEO优化如何沉淀长期内容资产？广拓时代谈AI搜索时代的内容ROI

企业做营销，最怕钱花完了，资产没有留下。 效果广告能带来一段时间的曝光，但预算停止后，流量往往也随之停止。短视频内容可能在几天内冲高，也可能很快沉下去。AI搜索时代，企业需要重新思考一个问题&#xff…

2026/7/22 0:01:17阅读更多 →
Agent 终态判定：何时该停止思考、给出最终回复

Agent 终态判定：何时该停止思考、给出最终回复

Agent 终态判定：何时该停止思考、给出最终回复 一、你的 Agent 在"再想想"的循环里绕了 12 轮，用户已经关窗口了 Agent 与人最大的区别是：人知道什么时候该停下来给答案，Agent 会一直"想"下去。你给 Agent 接…

2026/7/22 0:01:17阅读更多 →
YOLOv8推理性能优化：从1.2FPS到35FPS的全链路加速实践

YOLOv8推理性能优化：从1.2FPS到35FPS的全链路加速实践

如果你在部署 YOLOv8 时，发现推理速度只有可怜的 1-2 FPS，而别人的演示视频却能跑到 30 FPS 以上，那么问题很可能不在模型本身，而在于你的整个处理链路。很多开发者拿到一个训练好的 YOLOv8 模型后，会直接使用官方示例…

2026/7/21 22:53:50阅读更多 →
Coze与Dify对比指南：低代码AI应用开发从入门到实战

Coze与Dify对比指南：低代码AI应用开发从入门到实战

1. 从零到一：为什么你需要了解 Coze 和 Dify？如果你对 AI 应用开发感兴趣，但一看到“大模型”、“智能体”、“工作流”这些词就头疼，觉得门槛太高，那这篇文章就是为你准备的。很多开发者，包括我自己&#…

2026/7/21 18:53:30阅读更多 →
AI生图工具怎么选？2026年6月版实测对比

AI生图工具怎么选？2026年6月版实测对比

做自媒体的朋友应该都有体会：配图一直是个让人头疼的问题。2026年，AI生图工具已经非常成熟了，但工具太多反而不知道怎么选。以下是截至2026年6月我对主流AI生图工具的实测对比。Midjourney V8.1：速度之王2026年6月11日&#xff0c…

2026/7/21 18:53:30阅读更多 →