文档知识库教程OpenHarmony【免费下载链接】CangjieCorpus本仓库为仓颉编程语言语料库聚焦 仓颉编程语言 核心知识体系整合官方开发指南、API 文档、典型代码示例及语法规范等多维度资源经结构化处理与专业标注构建为支持 RAG检索增强生成技术 的高质量知识基座适配智能编码助手、学习辅助工具等应用开发需求。 欢迎开发者基于本语料库构建仓颉语言智能应用推动鸿蒙开发生态智能化升级项目地址https://gitcode.com/Cangjie/CangjieCorpus点击查看免费下载SideBarContainer 是仓颉 ArkUI方舟 UI 框架中用于搭建侧边栏 内容区经典布局的容器组件通过第一个子组件定义侧边栏、第二个子组件定义内容区并支持拖拽调宽、自动隐藏、控制按钮与分割线样式等完整交互能力。阅读本文后你将掌握 SideBarContainer 的创建方式、全部组件属性与事件回调的语义、按钮/分割线基础类型的使用方法并能直接落地一个可在不同容器宽度下自适应显隐侧边栏的仓颉页面。SideBarContainer 组件概述SideBarContainer 提供可以显示和隐藏的侧边栏容器。它的布局模型非常明确通过子组件定义侧边栏和内容区第一个子组件表示侧边栏第二个子组件表示内容区。这一组件位于 ArkUI 栅格与分栏能力族中详见 ArkUI 组件索引适合构建设置页、消息列表、应用主导航等带有侧边菜单结构的界面。组件能力边界系统能力SystemCapability.ArkUI.ArkUI.Full起始版本22导入模块使用前需导入仓颉 ArkUI 包import kit.ArkUI.*子组件约束SideBarContainer 可以包含子组件但存在严格的类型与数量约束子组件类型系统组件和自定义组件不支持渲染控制类型例如 if/else、ForEach、LazyForEach。子组件个数必须且仅包含2 个子组件即侧边栏 内容区。子组件个数异常时的表现3 个或以上子组件显示第一个和第二个多余的被忽略1 个子组件显示侧边栏内容区为空白。说明由于不支持渲染控制类型侧边栏与内容区的按需渲染需要借助showSideBar等属性来控制显隐而非在子组件内部直接书写if/else。创建组件init(?SideBarContainerType, () - Unit)public init(sideBarType!: ?SideBarContainerType None, child!: () - Unit {})功能创建一个侧边栏容器。参数名类型必填默认值说明sideBarType?SideBarContainerType否None命名参数。设置侧边栏的显示类型。初始值SideBarContainerType.Embed。child() - Unit否{}命名参数。定义侧边栏和内容区。侧边栏显示类型 SideBarContainerTypesideBarType参数的取值由 SideBarContainerType 枚举定义见cj-common-types.md中enum SideBarContainerType的定义它实现了EquatableSideBarContainerType可用/!运算符比较枚举值功能说明Embed侧边栏嵌入到组件内和内容区并列显示默认行为侧边栏与内容区共同占据容器空间Overlay侧边栏浮在内容区上面侧边栏以浮层方式覆盖内容区收起时不挤压内容区Auto自动模式由组件根据容器尺寸自动选择合适表现通用属性与通用事件SideBarContainer 对 ArkUI 的通用属性与通用事件全部支持包括尺寸设置cj-universal-attribute-size.md、背景、边框、显隐控制、点击/触摸事件等可在链式调用中组合使用。组件属性SideBarContainer 的组件属性均返回This支持链式调用。下面按功能分组逐一说明。autoHide(?Bool)拖拽到最小宽度后是否自动隐藏public func autoHide(value: ?Bool): This功能设置当侧边栏拖拽到小于最小宽度后是否自动隐藏。说明受 minSideBarWidth 属性方法影响当minSideBarWidth属性方法未设置值时使用初始值。拖拽过程中判断是否要自动隐藏。小于最小宽度时需要阻尼效果触发隐藏越界一段距离。参数名类型必填默认值说明value?Bool是-侧边栏拖拽到小于最小宽度后是否自动隐藏。true会自动隐藏。false不会自动隐藏。初始值true。controlButton(?ButtonStyle)设置控制按钮属性public func controlButton(value: ?ButtonStyle): This功能设置侧边栏控制按钮的属性。按钮的具体外观位置、尺寸、图标由 ButtonStyle 类型描述。参数名类型必填默认值说明value?ButtonStyle是-侧边栏控制按钮的属性。divider(?DividerStyle)设置分割线样式public func divider(value: ?DividerStyle): This功能设置分割线的样式默认显示分割线。参数名类型必填默认值说明value?DividerStyle是-分割线的样式。初始值DividerStyle(strokeWidth: 1.vp)。maxSideBarWidth(?Length)侧边栏最大宽度public func maxSideBarWidth(value: ?Length): This功能设置侧边栏最大宽度。说明设置为小于 0 的值时按默认值显示。值不能超过侧边栏容器本身宽度超过则使用侧边栏容器本身宽度。maxSideBarWidth优先于侧边栏子组件maxWidthmaxSideBarWidth未设置时默认值的优先级高于侧边栏子组件maxWidth。参数名类型必填默认值说明value?Length是-设置侧边栏最大宽度。单位vp。初始值280.vp。minContentWidth(?Length)内容区可显示的最小宽度public func minContentWidth(value: ?Length): This功能设置 SideBarContainer 组件内容区可显示的最小宽度。说明当最小宽度设置为小于 0内容区显示的最小宽度为 360.vp未设置该属性时组件内容区可缩小到 0。Embed 场景下增大组件尺寸时仅增大内容区的尺寸。缩小组件尺寸时先缩小内容区的尺寸至minContentWidth。继续缩小组件尺寸时保持内容区宽度minContentWidth不变优先缩小侧边栏的尺寸。当缩小侧边栏的尺寸至minSideBarWidth后继续缩小组件尺寸时如果autoHide属性为 false则会保持侧边栏宽度minSideBarWidth和内容区宽度minContentWidth不变但内容区会被截断显示如果autoHide属性为 true则会优先隐藏侧边栏然后继续缩小至内容区宽度minContentWidth后内容区宽度保持不变但内容区会被截断显示。minContentWidth优先于侧边栏的 maxSideBarWidth 与 sideBarWidth 属性minContentWidth未设置时默认值的优先级低于设置的minSideBarWidth与maxSideBarWidth属性。参数名类型必填默认值说明value?Length是-SideBarContainer 组件内容区可显示的最小宽度。单位vp。初始值360.vp。minSideBarWidth(?Length)侧边栏最小宽度public func minSideBarWidth(value: ?Length): This功能设置侧边栏最小宽度。说明设置为小于 0 的值时按默认值显示。值不能超过侧边栏容器本身宽度超过则使用侧边栏容器本身宽度。minSideBarWidth优先于侧边栏子组件minWidthminSideBarWidth未设置时默认值的优先级高于侧边栏子组件minWidth。参数名类型必填默认值说明value?Length是-侧边栏最小宽度。初始值240.vp。showControlButton(?Bool)是否显示控制按钮public func showControlButton(value: ?Bool): This功能设置是否显示控制按钮。参数名类型必填默认值说明value?Bool是-是否显示控制按钮。true显示控制按钮。false不显示控制按钮。初始值true。showSideBar(?Bool)是否显示侧边栏public func showSideBar(value: ?Bool): This功能设置是否显示侧边栏。参数名类型必填默认值说明value?Bool是-是否显示侧边栏。true显示侧边栏。false不显示侧边栏。初始值true。sideBarPosition(?SideBarPosition)侧边栏显示位置public func sideBarPosition(value: ?SideBarPosition): This功能设置侧边栏显示位置。取值由 SideBarPosition 枚举定义见cj-common-types.md中enum SideBarPosition的定义枚举值功能Start侧边栏位于容器左侧默认值End侧边栏位于容器右侧参数名类型必填默认值说明value?SideBarPosition是-侧边栏显示位置。初始值SideBarPosition.Start。sideBarWidth(?Length)侧边栏宽度public func sideBarWidth(value: ?Length): This功能设置侧边栏的宽度。说明设置为小于 0 的值时按默认值显示。受最小宽度和最大宽度限制不在限制区域内取最近的点。参数名类型必填默认值说明value?Length是-侧边栏的宽度。单位vp。初始值240.vp。宽度属性的单位与类型说明上述各宽度属性均接受 Length 类型。从cj-common-types.md中interface Length的定义可以看到Length 由value: Float64与unitType: LengthUnit组成Float64、Int64、AppResource均实现了该接口同时 ArkUI 提供LengthProp便捷构造px、vp、fp、percent、lpx因此代码中既可书写280.vp这样的字面量也可使用50.percent这类比例值再由组件按 vp 语义参与布局计算。未设置 showSideBar 时的自适应显隐规则当showSideBar属性未设置时组件会依据自身大小自动决定侧边栏的显示状态该规则在原文档的 DividerStyle 说明中给出小于minSideBarWidth minContentWidth默认不显示侧边栏大于等于minSideBarWidth minContentWidth默认显示侧边栏。这一规则配合autoHide、minSideBarWidth、minContentWidth三个属性构成了侧边栏在窗口尺寸变化时自动收起、自动展开的自适应机制是实现响应式布局的关键。组件事件onChange(?(Bool) - Unit)侧边栏显隐状态切换事件public func onChange(callback: ?(Bool) - Unit): This功能当侧边栏的状态在显示和隐藏之间切换时触发该事件。说明满足以下任意条件时触发该事件showSideBar 属性值变换时。showSideBar 属性自适应行为变化时。分割线拖拽触发 autoHide 时。参数名类型必填默认值说明callback?(Bool) - Unit是-回调函数当侧边栏的状态由隐藏变为显示时参数值为 true当侧边栏的状态由显示变为隐藏时参数值为 false。初始值{ _ }。该事件非常适合用于在侧边栏收起/展开时同步刷新内容区布局、记忆侧边栏状态或联动其他 UI 元素。基础类型定义SideBarContainer 依赖三类基础类型分别描述控制按钮图标、控制按钮样式与分割线样式。class ButtonIconOptionspublic class ButtonIconOptions { public var shown: ?ResourceStr public var hidden: ?ResourceStr public var switching: ?ResourceStr public init(shown!: ?ResourceStr, hidden!: ?ResourceStr, switching!: ?ResourceStr None) }功能表示图标类型。三个可读写成员分别对应控制按钮在三种状态下的图标类型为 ?ResourceStr成员功能shown侧边栏显示时控制按钮的图标hidden侧边栏隐藏时控制按钮的图标switching侧边栏显示和隐藏状态切换时控制按钮的图标构造参数说明参数名类型必填默认值说明shown?ResourceStr是-命名参数。设置侧边栏显示时控制按钮的图标。hidden?ResourceStr是-命名参数。设置侧边栏隐藏时控制按钮的图标。switching?ResourceStr否None命名参数。设置侧边栏显示和隐藏状态切换时控制按钮的图标。初始值class ButtonStylepublic class ButtonStyle { public var left: ?Float64 public var top: ?Float64 public var width: ?Float64 public var height: ?Float64 public var icons: ?ButtonIconOptions public init( left!: ?Float64 None, top!: ?Float64 None, width!: ?Float64 None, height!: ?Float64 None, icons!: ?ButtonIconOptions None ) }功能侧边栏控制按钮属性类型。各成员含义与默认值成员功能单位初始值left侧边栏控制按钮距离容器左界限的间距vp16.0top侧边栏控制按钮距离容器上界限的间距vp48.0width侧边栏控制按钮的宽度vp24.0height侧边栏控制按钮的高度vp24.0icons侧边栏控制按钮的图标-ButtonIconOptions(shown: , hidden: )构造参数均为可选命名参数类型为?Float64/?ButtonIconOptions未指定时采用上表中的初始值。class DividerStylepublic class DividerStyle { public var strokeWidth: ?Length public var color: ?ResourceColor public var startMargin: ?Length public var endMargin: ?Length public init(strokeWidth!: ?Length, color!: ?ResourceColor None, startMargin!: ?Length None, endMargin!: ?Length None) }功能SideBar 分割线样式。各成员含义与默认值成员功能初始值strokeWidth分割线的线宽1.vpcolor分割线的颜色?ResourceColor0x08000000startMargin分割线与侧边栏顶端的距离0.vpendMargin分割线与侧边栏底端的距离0.vp构造参数说明参数名类型必填默认值说明strokeWidth?Length是-命名参数。分割线的线宽。初始值1.vp。color?ResourceColor否None命名参数。分割线的颜色。初始值0x08000000。startMargin?Length否None命名参数。分割线与侧边栏顶端的距离。初始值0.vp。endMargin?Length否None命名参数。分割线与侧边栏底端的距离。初始值0.vp。说明与内容区布局相关针对侧边栏内容区设置通用属性宽高时宽高都不生效内容区默认占满 SideBarContainer 的剩余空间。 当showSideBar属性未设置时依据组件大小进行自动显示小于minSideBarWidth minContentWidth默认不显示侧边栏。大于等于minSideBarWidth minContentWidth默认显示侧边栏。完整示例带控制按钮与宽度约束的侧边栏布局下面这段可运行的仓颉示例来自原文档综合演示了 SideBarContainer 的创建、控制按钮定制、宽度约束链式设置与状态管理StateForEach的配合用法package ohos_app_cangjie_entry import kit.ArkUI.* import ohos.arkui.state_management.* import ohos.arkui.state_macro_manage.* import ohos.i18n.* import ohos.resource_manager.* import ohos.resource.__GenerateResource__ Entry Component class EntryView { State var arr: ArrayInt64 [1, 2, 3] State var current: Int64 1 var normalIcon: AppResource r(app.media.startIcon) let ctrlButton: ButtonStyle ButtonStyle(left: 17.0, top: 49.0, width: 20.0, height: 31.0, icons: ButtonIconOptions(shown: , hidden: , switching: )) func build() { SideBarContainer() { Column() { ForEach( this.arr, itemGeneratorFunc: { item: Int64, idx: Int64 Column() { Image(this.normalIcon) .width(50) .height(50) Text(Index${item}) .fontSize(25) .fontColor(0x0A59F7) .fontFamily(source-sans-pro,cursive,sans-serif) }.onClick({ event this.current idx }) } ) } .width(100.percent) .justifyContent(FlexAlign.SpaceEvenly) .backgroundColor(0x19000000) Column() { Text(SideBarContainer content text1) .fontSize(20) Text(SideBarContainer content text2) .fontSize(20) } } .id(SideBarDefault) .showSideBar(true) .showControlButton(true) .showControlButton(true) .autoHide(false) .sideBarWidth(150.vp) .minSideBarWidth(50.vp) .maxSideBarWidth(300.vp) .minContentWidth(1.vp) .sideBarPosition(SideBarPosition.Start) .controlButton(ctrlButton) .width(90.percent) .height(85.percent) } }示例要点解读两个子组件第一个Column含ForEach渲染的图标列表是侧边栏第二个Column含两段文本是内容区ForEach位于容器内部、由State var arr驱动符合子组件个数必须为 2的约束。宽度约束体系sideBarWidth(150.vp)设置当前宽度minSideBarWidth(50.vp)/maxSideBarWidth(300.vp)划定可拖拽范围minContentWidth(1.vp)允许内容区几乎完全缩小autoHide(false)表示拖拽到最小宽度后不自动隐藏。控制按钮定制通过ButtonStyle指定按钮位置left: 17.0, top: 49.0与尺寸20.0 × 31.0 vp并为三种状态设置图标showControlButton(true)保证按钮可见。位置与容器尺寸sideBarPosition(SideBarPosition.Start)将侧边栏置于左侧容器自身占父容器 90% 宽、85% 高。小结与实战建议SideBarContainer 是 ArkUI 栅格与分栏布局体系与 GridRow、GridCol、RowSplit 等组件并列中面向主从结构的容器方案。实战中的关键决策点可归纳如下显隐控制优先使用showSideBar显式控制未设置时组件会依据minSideBarWidth minContentWidth与自身尺寸自适应显隐可借助onChange回调感知状态切换。宽度联动sideBarWidth受minSideBarWidth/maxSideBarWidth钳制而minContentWidth在 Embed 模式下拥有更高优先级缩小时先压缩内容区、再压缩侧边栏最后依据autoHide决定是否隐藏侧边栏或截断内容区。视觉定制分割线divider与控制按钮controlButtonButtonStyleButtonIconOptions均可独立配置其中控制按钮图标支持显示、隐藏、切换三种状态资源。内容区布局内容区宽高通用属性不生效默认占满剩余空间因此内容区内部的布局应交给其自身子组件完成。依赖的核心类型与枚举SideBarContainerType、SideBarPosition、Length、ResourceStr、ResourceColor均在 cj-common-types.md 中有统一定义可按需查阅完整声明。赞分享文档知识库教程OpenHarmony【免费下载链接】CangjieCorpus本仓库为仓颉编程语言语料库聚焦 仓颉编程语言 核心知识体系整合官方开发指南、API 文档、典型代码示例及语法规范等多维度资源经结构化处理与专业标注构建为支持 RAG检索增强生成技术 的高质量知识基座适配智能编码助手、学习辅助工具等应用开发需求。 欢迎开发者基于本语料库构建仓颉语言智能应用推动鸿蒙开发生态智能化升级项目地址https://gitcode.com/Cangjie/CangjieCorpus点击查看免费下载相关推荐CSS Layout侧边栏可折叠侧边栏实现CSS Layout侧边栏可折叠侧边栏实现 你是否还在为网页布局中的侧边栏实现而烦恼是否想要一个既美观又实用的可折叠侧边栏解决方案本文将为你详细介绍如何使教程前端WordPress Gutenberg 插件侧边栏开发指南WordPress Gutenberg 插件侧边栏开发指南 前言 在 WordPress Gutenberg 编辑器中插件侧边栏是一个强大的扩展点允许开发者后端前端如何用 Browser-Use 自定义格式提取网页数据完整指南如何用 Browser Use 自定义格式提取网页数据完整指南 把10个商品页的价格逐个粘进Excel太磨人了。Browser Use 让 AI 像人一样打人工智能AI Agent浏览器控制MCP 服务上一篇Go Playground完全指南从零开始体验Go语言在线编程的终极平台下一篇Unison 嵌套 Doc 块解析与回归测试实战从 fix4592 看 {{ ... }} 文档语法的词法处理创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
文档知识库教程OpenHarmony【免费下载链接】CangjieCorpus本仓库为仓颉编程语言语料库聚焦 仓颉编程语言 核心知识体系整合官方开发指南、API 文档、典型代码示例及语法规范等多维度资源经结构化处理与专业标注构建为支持 RAG检索增强生成技术 的高质量知识基座适配智能编码助手、学习辅助工具等应用开发需求。 欢迎开发者基于本语料库构建仓颉语言智能应用推动鸿蒙开发生态智能化升级项目地址https://gitcode.com/Cangjie/CangjieCorpus点击查看免费下载SideBarContainer 是仓颉 ArkUI方舟 UI 框架中用于搭建侧边栏 内容区经典布局的容器组件通过第一个子组件定义侧边栏、第二个子组件定义内容区并支持拖拽调宽、自动隐藏、控制按钮与分割线样式等完整交互能力。阅读本文后你将掌握 SideBarContainer 的创建方式、全部组件属性与事件回调的语义、按钮/分割线基础类型的使用方法并能直接落地一个可在不同容器宽度下自适应显隐侧边栏的仓颉页面。SideBarContainer 组件概述SideBarContainer 提供可以显示和隐藏的侧边栏容器。它的布局模型非常明确通过子组件定义侧边栏和内容区第一个子组件表示侧边栏第二个子组件表示内容区。这一组件位于 ArkUI 栅格与分栏能力族中详见 ArkUI 组件索引适合构建设置页、消息列表、应用主导航等带有侧边菜单结构的界面。组件能力边界系统能力SystemCapability.ArkUI.ArkUI.Full起始版本22导入模块使用前需导入仓颉 ArkUI 包import kit.ArkUI.*子组件约束SideBarContainer 可以包含子组件但存在严格的类型与数量约束子组件类型系统组件和自定义组件不支持渲染控制类型例如 if/else、ForEach、LazyForEach。子组件个数必须且仅包含2 个子组件即侧边栏 内容区。子组件个数异常时的表现3 个或以上子组件显示第一个和第二个多余的被忽略1 个子组件显示侧边栏内容区为空白。说明由于不支持渲染控制类型侧边栏与内容区的按需渲染需要借助showSideBar等属性来控制显隐而非在子组件内部直接书写if/else。创建组件init(?SideBarContainerType, () - Unit)public init(sideBarType!: ?SideBarContainerType None, child!: () - Unit {})功能创建一个侧边栏容器。参数名类型必填默认值说明sideBarType?SideBarContainerType否None命名参数。设置侧边栏的显示类型。初始值SideBarContainerType.Embed。child() - Unit否{}命名参数。定义侧边栏和内容区。侧边栏显示类型 SideBarContainerTypesideBarType参数的取值由 SideBarContainerType 枚举定义见cj-common-types.md中enum SideBarContainerType的定义它实现了EquatableSideBarContainerType可用/!运算符比较枚举值功能说明Embed侧边栏嵌入到组件内和内容区并列显示默认行为侧边栏与内容区共同占据容器空间Overlay侧边栏浮在内容区上面侧边栏以浮层方式覆盖内容区收起时不挤压内容区Auto自动模式由组件根据容器尺寸自动选择合适表现通用属性与通用事件SideBarContainer 对 ArkUI 的通用属性与通用事件全部支持包括尺寸设置cj-universal-attribute-size.md、背景、边框、显隐控制、点击/触摸事件等可在链式调用中组合使用。组件属性SideBarContainer 的组件属性均返回This支持链式调用。下面按功能分组逐一说明。autoHide(?Bool)拖拽到最小宽度后是否自动隐藏public func autoHide(value: ?Bool): This功能设置当侧边栏拖拽到小于最小宽度后是否自动隐藏。说明受 minSideBarWidth 属性方法影响当minSideBarWidth属性方法未设置值时使用初始值。拖拽过程中判断是否要自动隐藏。小于最小宽度时需要阻尼效果触发隐藏越界一段距离。参数名类型必填默认值说明value?Bool是-侧边栏拖拽到小于最小宽度后是否自动隐藏。true会自动隐藏。false不会自动隐藏。初始值true。controlButton(?ButtonStyle)设置控制按钮属性public func controlButton(value: ?ButtonStyle): This功能设置侧边栏控制按钮的属性。按钮的具体外观位置、尺寸、图标由 ButtonStyle 类型描述。参数名类型必填默认值说明value?ButtonStyle是-侧边栏控制按钮的属性。divider(?DividerStyle)设置分割线样式public func divider(value: ?DividerStyle): This功能设置分割线的样式默认显示分割线。参数名类型必填默认值说明value?DividerStyle是-分割线的样式。初始值DividerStyle(strokeWidth: 1.vp)。maxSideBarWidth(?Length)侧边栏最大宽度public func maxSideBarWidth(value: ?Length): This功能设置侧边栏最大宽度。说明设置为小于 0 的值时按默认值显示。值不能超过侧边栏容器本身宽度超过则使用侧边栏容器本身宽度。maxSideBarWidth优先于侧边栏子组件maxWidthmaxSideBarWidth未设置时默认值的优先级高于侧边栏子组件maxWidth。参数名类型必填默认值说明value?Length是-设置侧边栏最大宽度。单位vp。初始值280.vp。minContentWidth(?Length)内容区可显示的最小宽度public func minContentWidth(value: ?Length): This功能设置 SideBarContainer 组件内容区可显示的最小宽度。说明当最小宽度设置为小于 0内容区显示的最小宽度为 360.vp未设置该属性时组件内容区可缩小到 0。Embed 场景下增大组件尺寸时仅增大内容区的尺寸。缩小组件尺寸时先缩小内容区的尺寸至minContentWidth。继续缩小组件尺寸时保持内容区宽度minContentWidth不变优先缩小侧边栏的尺寸。当缩小侧边栏的尺寸至minSideBarWidth后继续缩小组件尺寸时如果autoHide属性为 false则会保持侧边栏宽度minSideBarWidth和内容区宽度minContentWidth不变但内容区会被截断显示如果autoHide属性为 true则会优先隐藏侧边栏然后继续缩小至内容区宽度minContentWidth后内容区宽度保持不变但内容区会被截断显示。minContentWidth优先于侧边栏的 maxSideBarWidth 与 sideBarWidth 属性minContentWidth未设置时默认值的优先级低于设置的minSideBarWidth与maxSideBarWidth属性。参数名类型必填默认值说明value?Length是-SideBarContainer 组件内容区可显示的最小宽度。单位vp。初始值360.vp。minSideBarWidth(?Length)侧边栏最小宽度public func minSideBarWidth(value: ?Length): This功能设置侧边栏最小宽度。说明设置为小于 0 的值时按默认值显示。值不能超过侧边栏容器本身宽度超过则使用侧边栏容器本身宽度。minSideBarWidth优先于侧边栏子组件minWidthminSideBarWidth未设置时默认值的优先级高于侧边栏子组件minWidth。参数名类型必填默认值说明value?Length是-侧边栏最小宽度。初始值240.vp。showControlButton(?Bool)是否显示控制按钮public func showControlButton(value: ?Bool): This功能设置是否显示控制按钮。参数名类型必填默认值说明value?Bool是-是否显示控制按钮。true显示控制按钮。false不显示控制按钮。初始值true。showSideBar(?Bool)是否显示侧边栏public func showSideBar(value: ?Bool): This功能设置是否显示侧边栏。参数名类型必填默认值说明value?Bool是-是否显示侧边栏。true显示侧边栏。false不显示侧边栏。初始值true。sideBarPosition(?SideBarPosition)侧边栏显示位置public func sideBarPosition(value: ?SideBarPosition): This功能设置侧边栏显示位置。取值由 SideBarPosition 枚举定义见cj-common-types.md中enum SideBarPosition的定义枚举值功能Start侧边栏位于容器左侧默认值End侧边栏位于容器右侧参数名类型必填默认值说明value?SideBarPosition是-侧边栏显示位置。初始值SideBarPosition.Start。sideBarWidth(?Length)侧边栏宽度public func sideBarWidth(value: ?Length): This功能设置侧边栏的宽度。说明设置为小于 0 的值时按默认值显示。受最小宽度和最大宽度限制不在限制区域内取最近的点。参数名类型必填默认值说明value?Length是-侧边栏的宽度。单位vp。初始值240.vp。宽度属性的单位与类型说明上述各宽度属性均接受 Length 类型。从cj-common-types.md中interface Length的定义可以看到Length 由value: Float64与unitType: LengthUnit组成Float64、Int64、AppResource均实现了该接口同时 ArkUI 提供LengthProp便捷构造px、vp、fp、percent、lpx因此代码中既可书写280.vp这样的字面量也可使用50.percent这类比例值再由组件按 vp 语义参与布局计算。未设置 showSideBar 时的自适应显隐规则当showSideBar属性未设置时组件会依据自身大小自动决定侧边栏的显示状态该规则在原文档的 DividerStyle 说明中给出小于minSideBarWidth minContentWidth默认不显示侧边栏大于等于minSideBarWidth minContentWidth默认显示侧边栏。这一规则配合autoHide、minSideBarWidth、minContentWidth三个属性构成了侧边栏在窗口尺寸变化时自动收起、自动展开的自适应机制是实现响应式布局的关键。组件事件onChange(?(Bool) - Unit)侧边栏显隐状态切换事件public func onChange(callback: ?(Bool) - Unit): This功能当侧边栏的状态在显示和隐藏之间切换时触发该事件。说明满足以下任意条件时触发该事件showSideBar 属性值变换时。showSideBar 属性自适应行为变化时。分割线拖拽触发 autoHide 时。参数名类型必填默认值说明callback?(Bool) - Unit是-回调函数当侧边栏的状态由隐藏变为显示时参数值为 true当侧边栏的状态由显示变为隐藏时参数值为 false。初始值{ _ }。该事件非常适合用于在侧边栏收起/展开时同步刷新内容区布局、记忆侧边栏状态或联动其他 UI 元素。基础类型定义SideBarContainer 依赖三类基础类型分别描述控制按钮图标、控制按钮样式与分割线样式。class ButtonIconOptionspublic class ButtonIconOptions { public var shown: ?ResourceStr public var hidden: ?ResourceStr public var switching: ?ResourceStr public init(shown!: ?ResourceStr, hidden!: ?ResourceStr, switching!: ?ResourceStr None) }功能表示图标类型。三个可读写成员分别对应控制按钮在三种状态下的图标类型为 ?ResourceStr成员功能shown侧边栏显示时控制按钮的图标hidden侧边栏隐藏时控制按钮的图标switching侧边栏显示和隐藏状态切换时控制按钮的图标构造参数说明参数名类型必填默认值说明shown?ResourceStr是-命名参数。设置侧边栏显示时控制按钮的图标。hidden?ResourceStr是-命名参数。设置侧边栏隐藏时控制按钮的图标。switching?ResourceStr否None命名参数。设置侧边栏显示和隐藏状态切换时控制按钮的图标。初始值class ButtonStylepublic class ButtonStyle { public var left: ?Float64 public var top: ?Float64 public var width: ?Float64 public var height: ?Float64 public var icons: ?ButtonIconOptions public init( left!: ?Float64 None, top!: ?Float64 None, width!: ?Float64 None, height!: ?Float64 None, icons!: ?ButtonIconOptions None ) }功能侧边栏控制按钮属性类型。各成员含义与默认值成员功能单位初始值left侧边栏控制按钮距离容器左界限的间距vp16.0top侧边栏控制按钮距离容器上界限的间距vp48.0width侧边栏控制按钮的宽度vp24.0height侧边栏控制按钮的高度vp24.0icons侧边栏控制按钮的图标-ButtonIconOptions(shown: , hidden: )构造参数均为可选命名参数类型为?Float64/?ButtonIconOptions未指定时采用上表中的初始值。class DividerStylepublic class DividerStyle { public var strokeWidth: ?Length public var color: ?ResourceColor public var startMargin: ?Length public var endMargin: ?Length public init(strokeWidth!: ?Length, color!: ?ResourceColor None, startMargin!: ?Length None, endMargin!: ?Length None) }功能SideBar 分割线样式。各成员含义与默认值成员功能初始值strokeWidth分割线的线宽1.vpcolor分割线的颜色?ResourceColor0x08000000startMargin分割线与侧边栏顶端的距离0.vpendMargin分割线与侧边栏底端的距离0.vp构造参数说明参数名类型必填默认值说明strokeWidth?Length是-命名参数。分割线的线宽。初始值1.vp。color?ResourceColor否None命名参数。分割线的颜色。初始值0x08000000。startMargin?Length否None命名参数。分割线与侧边栏顶端的距离。初始值0.vp。endMargin?Length否None命名参数。分割线与侧边栏底端的距离。初始值0.vp。说明与内容区布局相关针对侧边栏内容区设置通用属性宽高时宽高都不生效内容区默认占满 SideBarContainer 的剩余空间。 当showSideBar属性未设置时依据组件大小进行自动显示小于minSideBarWidth minContentWidth默认不显示侧边栏。大于等于minSideBarWidth minContentWidth默认显示侧边栏。完整示例带控制按钮与宽度约束的侧边栏布局下面这段可运行的仓颉示例来自原文档综合演示了 SideBarContainer 的创建、控制按钮定制、宽度约束链式设置与状态管理StateForEach的配合用法package ohos_app_cangjie_entry import kit.ArkUI.* import ohos.arkui.state_management.* import ohos.arkui.state_macro_manage.* import ohos.i18n.* import ohos.resource_manager.* import ohos.resource.__GenerateResource__ Entry Component class EntryView { State var arr: ArrayInt64 [1, 2, 3] State var current: Int64 1 var normalIcon: AppResource r(app.media.startIcon) let ctrlButton: ButtonStyle ButtonStyle(left: 17.0, top: 49.0, width: 20.0, height: 31.0, icons: ButtonIconOptions(shown: , hidden: , switching: )) func build() { SideBarContainer() { Column() { ForEach( this.arr, itemGeneratorFunc: { item: Int64, idx: Int64 Column() { Image(this.normalIcon) .width(50) .height(50) Text(Index${item}) .fontSize(25) .fontColor(0x0A59F7) .fontFamily(source-sans-pro,cursive,sans-serif) }.onClick({ event this.current idx }) } ) } .width(100.percent) .justifyContent(FlexAlign.SpaceEvenly) .backgroundColor(0x19000000) Column() { Text(SideBarContainer content text1) .fontSize(20) Text(SideBarContainer content text2) .fontSize(20) } } .id(SideBarDefault) .showSideBar(true) .showControlButton(true) .showControlButton(true) .autoHide(false) .sideBarWidth(150.vp) .minSideBarWidth(50.vp) .maxSideBarWidth(300.vp) .minContentWidth(1.vp) .sideBarPosition(SideBarPosition.Start) .controlButton(ctrlButton) .width(90.percent) .height(85.percent) } }示例要点解读两个子组件第一个Column含ForEach渲染的图标列表是侧边栏第二个Column含两段文本是内容区ForEach位于容器内部、由State var arr驱动符合子组件个数必须为 2的约束。宽度约束体系sideBarWidth(150.vp)设置当前宽度minSideBarWidth(50.vp)/maxSideBarWidth(300.vp)划定可拖拽范围minContentWidth(1.vp)允许内容区几乎完全缩小autoHide(false)表示拖拽到最小宽度后不自动隐藏。控制按钮定制通过ButtonStyle指定按钮位置left: 17.0, top: 49.0与尺寸20.0 × 31.0 vp并为三种状态设置图标showControlButton(true)保证按钮可见。位置与容器尺寸sideBarPosition(SideBarPosition.Start)将侧边栏置于左侧容器自身占父容器 90% 宽、85% 高。小结与实战建议SideBarContainer 是 ArkUI 栅格与分栏布局体系与 GridRow、GridCol、RowSplit 等组件并列中面向主从结构的容器方案。实战中的关键决策点可归纳如下显隐控制优先使用showSideBar显式控制未设置时组件会依据minSideBarWidth minContentWidth与自身尺寸自适应显隐可借助onChange回调感知状态切换。宽度联动sideBarWidth受minSideBarWidth/maxSideBarWidth钳制而minContentWidth在 Embed 模式下拥有更高优先级缩小时先压缩内容区、再压缩侧边栏最后依据autoHide决定是否隐藏侧边栏或截断内容区。视觉定制分割线divider与控制按钮controlButtonButtonStyleButtonIconOptions均可独立配置其中控制按钮图标支持显示、隐藏、切换三种状态资源。内容区布局内容区宽高通用属性不生效默认占满剩余空间因此内容区内部的布局应交给其自身子组件完成。依赖的核心类型与枚举SideBarContainerType、SideBarPosition、Length、ResourceStr、ResourceColor均在 cj-common-types.md 中有统一定义可按需查阅完整声明。赞分享文档知识库教程OpenHarmony【免费下载链接】CangjieCorpus本仓库为仓颉编程语言语料库聚焦 仓颉编程语言 核心知识体系整合官方开发指南、API 文档、典型代码示例及语法规范等多维度资源经结构化处理与专业标注构建为支持 RAG检索增强生成技术 的高质量知识基座适配智能编码助手、学习辅助工具等应用开发需求。 欢迎开发者基于本语料库构建仓颉语言智能应用推动鸿蒙开发生态智能化升级项目地址https://gitcode.com/Cangjie/CangjieCorpus点击查看免费下载相关推荐CSS Layout侧边栏可折叠侧边栏实现CSS Layout侧边栏可折叠侧边栏实现 你是否还在为网页布局中的侧边栏实现而烦恼是否想要一个既美观又实用的可折叠侧边栏解决方案本文将为你详细介绍如何使教程前端WordPress Gutenberg 插件侧边栏开发指南WordPress Gutenberg 插件侧边栏开发指南 前言 在 WordPress Gutenberg 编辑器中插件侧边栏是一个强大的扩展点允许开发者后端前端如何用 Browser-Use 自定义格式提取网页数据完整指南如何用 Browser Use 自定义格式提取网页数据完整指南 把10个商品页的价格逐个粘进Excel太磨人了。Browser Use 让 AI 像人一样打人工智能AI Agent浏览器控制MCP 服务上一篇Go Playground完全指南从零开始体验Go语言在线编程的终极平台下一篇Unison 嵌套 Doc 块解析与回归测试实战从 fix4592 看 {{ ... }} 文档语法的词法处理创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
