鸿蒙5.0版开发：ArkTS容器组件（SideBarContainer）

于 2024-09-27 17:16:26 发布
阅读量630 收藏 9
点赞数 22
分类专栏： ArkUI ArkTS 鸿蒙5.0 文章标签： harmonyos 华为 android 鸿蒙 ArkTS ArkUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69424697/article/details/142598391
版权
ArkUI 同时被 3 个专栏收录
84 篇文章 0 订阅
订阅专栏
鸿蒙5.0
84 篇文章 0 订阅
订阅专栏
ArkTS
80 篇文章 0 订阅
订阅专栏

往期鸿蒙全套实战文章必看：

SideBarContainer

提供侧边栏可以显示和隐藏的侧边栏容器，通过子组件定义侧边栏和内容区，第一个子组件表示侧边栏，第二个子组件表示内容区。

说明：

该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

可以包含子组件。

说明：

  • 子组件类型：系统组件和自定义组件，不支持渲染控制类型（if/else、ForEach和LazyForEach）。
  • 子组件个数：必须且仅包含2个子组件。
  • 子组件个数异常时：3个或以上子组件，显示第一个和第二个。1个子组件，显示侧边栏，内容区为空白。

接口

SideBarContainer( type?: SideBarContainerType )

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名参数类型必填参数描述
typeSideBarContainerType否设置侧边栏的显示类型。
默认值：SideBarContainerType.Embed

SideBarContainerType枚举说明

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称描述
Embed侧边栏嵌入到组件内，和内容区并列显示。
组件尺寸小于minContentWidth + minSideBarWidth,并且未设置showSideBar时，侧边栏自动隐藏。
未设置minSideBarWidth或者minContentWidth采用未设置接口的默认值进行计算。
组件在自动隐藏后，如果通过点击控制按钮唤出侧边栏，则侧边栏悬浮在内容区上显示。
Overlay侧边栏浮在内容区上面。
AUTO10+组件尺寸大于等于minSideBarWidth+minContentWidth时，采用Embed模式显示。
组件尺寸小于minSideBarWidth+minContentWidth时，采用Overlay模式显示。
未设置minSideBarWidth或minContentWidth时，会使用未设置接口的默认值进行计算，若计算的值小于600vp，则使用600vp做为模式切换的断点值。

属性

除支持通用属性外，还支持以下属性：

showSideBar

showSideBar(value: boolean)

设置是否显示侧边栏。

从API version 10开始，该属性支持$$双向绑定变量。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueboolean是是否显示侧边栏。
true：显示侧边栏
false：不显示侧边栏
默认值：true

controlButton

controlButton(value: ButtonStyle)

设置侧边栏控制按钮的属性。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueButtonStyle是侧边栏控制按钮的属性。

showControlButton

showControlButton(value: boolean)

设置是否显示控制按钮。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueboolean是是否显示控制按钮。
true：显示控制按钮
false：不显示控制按钮
默认值：true

sideBarWidth

sideBarWidth(value: number | Length)

设置侧边栏的宽度。设置为小于0的值时按默认值显示。受最小宽度和最大宽度限制，不在限制区域内取最近的点。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber | Length9+是侧边栏的宽度。
默认值：240vp
单位：vp
说明：
API version 9及以下版本默认值为200vp，API version 10的默认值为240vp。

minSideBarWidth

minSideBarWidth(value: number | Length)

设置侧边栏最小宽度。设置为小于0的值时按默认值显示。值不能超过侧边栏容器本身宽度，超过使用侧边栏容器本身宽度。

minSideBarWidth优先于侧边栏子组件minWidth，minSideBarWidth未设置时默认值优先级高于侧边栏子组件minWidth。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber | Length9+是侧边栏最小宽度。
默认值：240vp
单位：vp
说明：
API version 9及以下版本默认值为200vp，API version 10的默认值为240vp。

maxSideBarWidth

maxSideBarWidth(value: number | Length)

设置侧边栏最小宽度。设置为小于0的值时按默认值显示。值不能超过侧边栏容器本身宽度，超过使用侧边栏容器本身宽度。

maxSideBarWidth优先于侧边栏子组件maxWidth，maxSideBarWidth未设置时默认值优先级高于侧边栏子组件maxWidth。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber | Length9+是设置侧边栏最大宽度。
默认值：280vp
单位：vp

autoHide9+

autoHide(value: boolean)

设置当侧边栏拖拽到小于最小宽度后，是否自动隐藏。受minSideBarWidth属性方法影响，minSideBarWidth属性方法未设置值使用默认值。

拖拽过程中判断是否要自动隐藏。小于最小宽度时需要阻尼效果触发隐藏（越界一段距离）。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueboolean是侧边栏拖拽到小于最小宽度后，是否自动隐藏。
true：会自动隐藏
false：不会自动隐藏
默认值：true

sideBarPosition9+

sideBarPosition(value: SideBarPosition)

设置侧边栏显示位置。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueSideBarPosition是侧边栏显示位置。
默认值：SideBarPosition.Start

divider10+

divider(value: DividerStyle | null)

设置分割线的样式。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueDividerStyle | null是分割线的样式。
默认为DividerStyle：显示分割线。
- null：不显示分割线。
undefined：行为不做处理，分割线样式与默认值保持一致。

minContentWidth10+

minContentWidth(value: Dimension)

设置SideBarContainer组件内容区可显示的最小宽度。

设置为小于0，内容区显示的最小宽度为360vp，未设置该属性时，组件内容区的可缩小到0。

Embed场景下，增大组件尺寸时仅增大内容区的尺寸。

缩小组件尺寸时，先缩小内容区的尺寸至minContentWidth。继续缩小组件尺寸时，保持内容区宽度minContentWidth不变，优先缩小侧边栏的尺寸。

当缩小侧边栏的尺寸至minSideBarWidth后，继续缩小组件尺寸时，

  • 如果autoHide属性为false，则会保持侧边栏宽度minSideBarWidth和内容区宽度minContentWidth不变，但内容区会被截断显示；
  • 如果autoHide属性为true，则会优先隐藏侧边栏，然后继续缩小至内容区宽度minContentWidth后，内容区宽度保持不变，但内容区会被截断显示。

minContentWidth优先于侧边栏的maxSideBarWidth与sideBarWidth属性，minContentWidth未设置时默认值优先级低于设置的minSideBarWidth与maxSideBarWidth属性。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueDimension是SideBarContainer组件内容区可显示的最小宽度。
默认值：360vp
单位：vp

ButtonStyle对象说明

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称参数类型必填描述
leftnumber否设置侧边栏控制按钮距离容器左界限的间距。
默认值：16vp
单位：vp
topnumber否设置侧边栏控制按钮距离容器上界限的间距。
默认值：48vp
单位：vp
widthnumber否设置侧边栏控制按钮的宽度。
默认值：
API version 9及之前版本：32vp
从API version 10开始：24vp
单位：vp
heightnumber否设置侧边栏控制按钮的高度。
默认值：
API version 9及之前版本：32vp
从API version 10开始：24vp
单位：vp
icons{
shown: string | PixelMap | Resource ,
hidden: string | PixelMap | Resource ,
switching?: string | PixelMap | Resource
}		否设置侧边栏控制按钮的图标：

- shown: 设置侧边栏显示时控制按钮的图标。
说明：
资源获取错误时，使用默认图标。
- hidden: 设置侧边栏隐藏时控制按钮的图标。
- switching:设置侧边栏显示和隐藏状态切换时控制按钮的图标。

SideBarPosition9+枚举说明

侧边栏显示位置。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称描述
Start侧边栏位于容器左侧。
End侧边栏位于容器右侧。

DividerStyle10+对象说明

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称参数类型必填描述
strokeWidthLength是分割线的线宽。
默认值：1vp
colorResourceColor否分割线的颜色。
默认值：#000000，3%
startMarginLength否分割线与侧边栏顶端的距离。
默认值：0
endMarginLength否分割线与侧边栏底端的距离。
默认值：0

说明：

针对侧边栏子组件设置通用属性宽高时，宽高都不生效。 针对侧边栏内容区设置通用属性宽高时，宽高都不生效，默认占满SideBarContainer的剩余空间。

当showSideBar属性未设置时，依据组件大小进行自动显示：

  • 小于minSideBarWidth + minContentWidth：默认不显示侧边栏。
  • 大于等于minSideBarWidth + minContentWidth：默认显示侧边栏。

事件

除支持通用事件外，还支持以下事件：

onChange

onChange(callback: (value: boolean) => void)

当侧边栏的状态在显示和隐藏之间切换时触发回调。

触发该事件的条件：

1、showSideBar属性值变换时；

2、showSideBar属性自适应行为变化时；

3、分割线拖拽触发autoHide时。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueboolean是true表示显示，false表示隐藏。

示例

// xxx.ets
@Entry
@Component
struct SideBarContainerExample {
  normalIcon: Resource = $r("app.media.icon")
  selectedIcon: Resource = $r("app.media.icon")
  @State arr: number[] = [1, 2, 3]
  @State current: number = 1

  build() {
    SideBarContainer(SideBarContainerType.Embed) {
      Column() {
        ForEach(this.arr, (item: number) => {
          Column({ space: 5 }) {
            Image(this.current === item ? this.selectedIcon : this.normalIcon).width(64).height(64)
            Text("Index0" + item)
              .fontSize(25)
              .fontColor(this.current === item ? '#0A59F7' : '#999')
              .fontFamily('source-sans-pro,cursive,sans-serif')
          }
          .onClick(() => {
            this.current = item
          })
        }, (item: string) => item)
      }.width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)
      .backgroundColor('#19000000')

      Column() {
        Text('SideBarContainer content text1').fontSize(25)
        Text('SideBarContainer content text2').fontSize(25)
      }
      .margin({ top: 50, left: 20, right: 30 })
    }
    .controlButton({
      icons: {
        hidden: $r('app.media.drawer'),
        shown: $r('app.media.drawer'),
        switching: $r('app.media.drawer')
      }
    })
    .sideBarWidth(150)
    .minSideBarWidth(50)
    .maxSideBarWidth(300)
    .minContentWidth(0)
    .onChange((value: boolean) => {
      console.info('status:' + value)
    })
    .divider({ strokeWidth: '1vp', color: Color.Gray, startMargin: '4vp', endMargin: '4vp' })
  }
}

星星不闪包退1
关注
专栏目录
鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：SideBarContainer）
m0_64420071的博客
03-16 1154
ArkTS声明式开发（容器组件：SideBarContainer）
HarmonyOS应用开发：SideBarContainer（容器组件）
situnanQAQ的博客
06-19 850
提供侧边栏可以显示和隐藏的侧边栏容器，通过子组件定义侧边栏和内容区，第一个子组件表示侧边栏，第二个子组件表示内容区。
HarmonyOS ArkUI容器类组件-侧边栏容器（SideBarContainer）
m0_71263309的博客
04-22 680
(type?type：设置侧边栏的显示类型，定义了一下 2 中类型：Embed：侧边栏嵌入到组件内，侧边栏和内容区并列显示。Overlay：侧边栏浮在内容区上面。build() {Column() {Text("侧边栏区域").width(10)Column() {Text("侧边栏区域")left?: number;top?: number;width?: number;height?: number;icons?
鸿蒙HarmonyOS实战案例：一多导航栏组件
2401_84917132的博客
08-20 784
​ 本示例使用一次开发多端部署中介绍的自适应布局能力和响应式布局能力进行多设备（或多窗口尺寸）适配，主要通过组件提供窗口断点事件，保证应用在不同设备或不同窗口尺寸下可以正常显示。 ​
HarmonyOS NEXT实战开发：焦点事件
hanyanyou的博客
07-29 658
基础概念与规范.............
鸿蒙(ArkTS)—ArkUI布局开发常见问题
m0_70749039的博客
05-28 1666
容器组件在使用position之后会脱离文本流，导致容器脱离外层容器束缚，导致height不生效，可以将外层容器换成Stack可以解决这个问题。
鸿蒙Harmony开发：通用焦点样式事件规范
2401_84917132的博客
08-07 930
层级页面是焦点框架中特定容器组件的统称，涵盖Page、Dialog、SheetPage、ModalPage、Menu、Popup、NavBar、NavDestination等。
鸿蒙学习必备【建议收藏】—ArkUI组件开发常见问题(ArkTS)
2401_82546228的博客
05-28 1704
自定义弹窗的定义和初始化需要用到属于ArkTS语法内容，必须在ets后缀文件中定义使用，不能在ts后缀文件中定义使用。问题现象在自定义弹窗内定义的变量内容，在关闭弹窗或变量变化时需要及时传递给页面，可以通过何种方式传递？解决措施方式一：使用组件的状态变量传递。方式二：在初始化弹窗时，传递一个方法给自定义弹窗，在自定义弹窗中触发该方法，弹窗中变量作为方法的参数。方式三：使用AppStorage或LocalStorage方式管理页面状态，实现自定义弹窗和页面之间状态的共享。代码示例build() {
HarmonyOS NEXT应用开发案例集
1
03-20 2560
随着应用代码的复杂度提升，为了使应用有更好的可维护性和可扩展性，良好的应用架构设计变得尤为重要。本篇文章将介绍一个应用通用架构的设计思路，以减少模块间的耦合、提升团队开发效率，为开发者呈现一个清晰且结构化的开发框架。本文以“应用通用开发范例App”为例，从分层架构设计和模块化设计的方面介绍应用的架构组成。分层架构设计：将应用划分为产品定制层、基础特性层和公共能力层，可以降低层间的依赖性，从而提升代码的可维护性。|---common // 公共能力层，包括公共UI组件、数据管理、通信和工具库等。
HarmonyOS移动应用开发（ArkTS版）课件PPT
11-14
HarmonyOS 移动应用开发（ArkTS版）是面向开发者的一门课程，旨在教授如何使用 ArkTS 语言在 HarmonyOS 上构建高效、跨平台的应用。本课程由刘安战、余雨萍、陈争艳三位专家编著，由清华大学出版社出版。 ArkTS 是 ...
HarmonyOS鸿蒙开发指南:基于ArkTS开发 公共事件与通知
sybh的博客
01-10 1852
HarmonyOS通过CES（Common Event Service，公共事件服务）为应用程序提供订阅、发布、退订公共事件的能力。公共事件可分为系统公共事件和自定义公共事件。系统公共事件：系统将收集到的事件信息，根据系统策略发送给订阅该事件的用户程序。例如：系统关键服务发布的系统事件（例如：hap安装，更新，卸载等）。自定义公共事件：应用自定义一些公共事件用来实现跨应用的事件通信能力。每个应用都可以按需订阅公共事件，订阅成功且公共事件发布，系统会把其发送给应用。
HarmonyOS鸿蒙开发指南:基于ArkTS开发 音频播放开发
sybh的博客
01-10 1579
音频播放的主要工作是将音频数据转码为可听见的音频模拟信号并通过输出设备进行播放，同时对播放任务进行管理。图1音频播放状态机图2音频播放零层图。
HarmonyOS鸿蒙开发指南:容器组件 form开发指导
sybh的博客
01-08 917
创建input组件，分别设置type属性为checkbox（多选框）和radio（单选框），再使用Form组件的onsubmit和onreset事件实现表单数据的提交与重置。为Form组件添加click-effect属性，实现点击表单后的缩放效果，click-effect枚举值请参考通用属性。通过为Form添加background-color和border属性，来设置表单的背景颜色和边框。为Form组件添加submit和reset事件，来提交表单内容或重置表单选项。
harmonyos面试题
田兴的博客
09-24 493
你说你开发过项目，那么，开发鸿蒙项目流程是怎么样的?鸿蒙的刷新机制是怎么样的，多层嵌套时，是从构建开始刷新吗。页面的生命周期有哪些?UAbility的生命周期呢?对于一些公共的样式你是怎么傲的?你在项目中用过线程通信吗，线程是怎么进行通信的?如果方便的话，简单介绍并演示一下你做的项目?你现在用的是鸿蒙几的api和编辑器?你项目中调到了那些难点，如何解决的?弹室UI是怎么在页面UI中使用的。你是什么时候开始学习鸿蒙的?发布的应用用什么监控的日志呢。常用的修饰符有愿些介绍一下。你项目用到了鸿蒙那些功能?
HarmonyOS第九章：鸿蒙axios(@ohos/axios)
to_the_Future的博客
09-24 1368
@ohos/axios 是一个针对 HarmonyOS 平台定制的 HTTP 客户端库，基于流行的 axios 库进行了适配和优化。它提供了丰富的功能和灵活的配置选项，适用于各种网络请求场景，包括文件上传和下载。本文主要介绍了@ohos/axios 的主要特点和使用方法。
OpenHarmony（鸿蒙南向）——平台驱动开发【PIN】
最新发布
鸿蒙开发知识记录
09-25 915
PIN即管脚控制器，用于统一管理各SoC的管脚资源，对外提供管脚复用功能。PIN模块主要用于管脚资源管理。在各SoC对接HDF框架时，需要来适配PIN驱动。下文将介绍如何进行PIN驱动适配。
【07】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-Swiper轮播组件与样式&结构重用
Bew1tch的博客
09-24 1522
Swiper(){//1.轮播内容//2.设置尺寸（内容会自动拉伸）//tips：给外层设置宽高，未来的子元素都会进行统一的拉伸//定制小圆点Indicator.dot() //小圆点.itemWidth(20) //默认的宽.itemHeight(5) //默认的高.color(Color.Gray) //默认的颜色.selectedItemWidth(30) //选中的宽.selectedItemHeight(5) //选中的高。
鸿蒙 OS 开发单词打卡 APP 项目实战 20240922 笔记和源码分享
Python私教
09-23 1005
代码比较多, 需要整套完整代码的可以私信我获取.零基础入门级别, 有点前端基础都能学会.配套有完整的录播课, 需要的私信.
arkui android
06-21
ARCore Kotlin UI (ARKUI) 是由 Google 开发的针对 Android 平台的一个库，它结合了 ARCore（Android 计算机视觉和增强现实平台）和 Kotlin UI（一个轻量级、高性能的 UI 库）。ARKUI 旨在简化在 Android 上创建沉浸式增强现实应用的过程，提供了一种直观的方式来构建用户界面并与增强现实内容交互。 主要特点包括： 1. **集成性**：ARKUI 将 ARCore 的渲染和跟踪功能无缝融入到 UI 中，开发者无需手动管理 ARCore 和 UI 的交互。 2. **UI定制**：允许开发者使用熟悉的 Android UI 技术（如 Layouts、Widgets），同时支持 AR元素的添加和布局。 3. **性能优化**：通过使用先进的渲染技术，确保了 AR UI 在实时渲染增强现实场景时的流畅性。 4. **交互设计**：提供了丰富的手势和交互方式，使得用户能够自然地与 AR 内容互动。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值