ToB企服应用市场:ToB评测及商务社交产业平台

标题: HarmonyOS ArkUI容器类组件-侧边栏容器（SideBarContainer） [打印本页]

---

作者: 北冰洋以北    时间: 昨天 17:59
标题: HarmonyOS ArkUI容器类组件-侧边栏容器（SideBarContainer）
SideBarContainer 表示侧边栏容器，它可以添加两个子组件，第一个子组件表示侧边栏，第二个子组件表示内容区，本节笔者简单先容一下 SideBarContainer 的简单使用。
SideBarContainer定义先容

1. interface SideBarContainerInterface {
2.   (type?: SideBarContainerType): SideBarContainerAttribute;
3. }

复制代码

• type：设置侧边栏的表现范例， SideBarContainerType 定义了一下 2 中范例：
  
  
  
  • Embed：侧边栏嵌入到组件内，侧边栏和内容区并列表现。
    
  • Overlay：侧边栏浮在内容区上面。
    
  
  

简单样例如下所示：

1. @Entry @Component struct SideBarContainerTest {
3.   build() {
4.     SideBarContainer(SideBarContainerType.Overlay) {
5.       Column() {
6.         Text("侧边栏区域")
7.           .width("100%")
8.           .height("100%")
9.           .fontSize(30)
10.           .textAlign(TextAlign.Center)
11.       }
12.       .width(10)
13.       .height("100%")
14.       .backgroundColor("#aabbcc")
16.       Column() {
17.         Text("侧边栏区域")
18.           .width("100%")
19.           .height("100%")
20.           .fontSize(30)
21.           .textAlign(TextAlign.Center)
22.       }
23.       .width("100%")
24.       .height("100%")
25.       .backgroundColor("#bbccaa")
26.     }
27.     .width('100%')
28.     .height('100%')
29.   }
30. }

复制代码

样例运行效果如下图所示：

SideBarContainer属性先容

1. declare class SideBarContainerAttribute extends CommonMethod<SideBarContainerAttribute> {
2.   showSideBar(value: boolean): SideBarContainerAttribute;
3.   controlButton(value: ButtonStyle): SideBarContainerAttribute;
4.   showControlButton(value: boolean): SideBarContainerAttribute;
5.   sideBarWidth(value: number): SideBarContainerAttribute;
6.   minSideBarWidth(value: number): SideBarContainerAttribute;
7.   maxSideBarWidth(value: number): SideBarContainerAttribute;
8. }
10. declare interface ButtonStyle {
11.   left?: number;
12.   top?: number;
13.   width?: number;
14.   height?: number;
15.   icons?: {
16.     shown: string | PixelMap | Resource;
17.     hidden: string | PixelMap | Resource;
18.     switching?: string | PixelMap | Resource;
19.   };
20. }

复制代码

• showSideBar：设置是否表现侧边栏，默认为 true 表示表现侧边栏。
  
• controlButton：设置侧边栏控制按钮的属性， ButtonStyle 参数说明如下：
  
  
  
  • left：设置侧边栏控制按钮间隔容器左界限的间距。
    
  • top：设置侧边栏控制按钮间隔容器上界限的间距。
    
  • width：设置侧边栏控制按钮的宽度。
    
  • height：设置侧边栏控制按钮的高度。
    
  • icons：设置侧边栏控制按钮的图标：
    
    
    
    • shown：设置侧边栏表现时控制按钮的图标。
      
    • hidden：设置侧边栏隐蔽时控制按钮的图标。
      
    • switching：设置侧边栏表现和隐蔽状态切换时控制按钮的图标。
      
    
    
  
  
• sideBarWidth：设置侧边栏的宽度，默认为 200 。
  
• minSideBarWidth：设置侧边栏最小宽度，默认为 200 。
  
• maxSideBarWidth：设置侧边栏最大宽度，默认为 280 。
  

简单样例如下所示：

1. @Entry @Component struct SideBarContainerTest {
3.   build() {
4.     SideBarContainer(SideBarContainerType.Overlay) { // 设置侧边栏样式为悬浮态
5.       Column() {                                     // 第一个子组件为侧边栏视图
6.         Text("侧边栏区域")
7.           .width("100%")
8.           .height("100%")
9.           .fontSize(30)
10.           .textAlign(TextAlign.Center)
11.       }
12.       .width(10)
13.       .height("100%")
14.       .backgroundColor("#aabbcc")
16.       Column() {                                     // 第二个子组件为内容区视图
17.         Text("内容区域")
18.           .width("100%")
19.           .height("100%")
20.           .fontSize(30)
21.           .textAlign(TextAlign.Center)
22.       }
23.       .width("100%")
24.       .height("100%")
25.       .backgroundColor("#bbccaa")
26.     }
27.     .width('100%')
28.     .height('100%')
29.     .sideBarWidth(150)                               // 设置侧边栏宽度为150
30.     .minSideBarWidth(100)                            // 设置侧边栏最小宽度为100
31.     .maxSideBarWidth(200)                            // 设置侧边栏最大宽度为200
32.     .controlButton({                                 // 设置侧边栏控制按钮的样式
33.       width: 30,                                     // 设置侧边栏控制按钮宽度为30
34.       height: 30,                                    // 设置侧边栏控制按钮高度为30
35.       top: 15,                                       // 设置侧边栏控制按钮距离容器顶部为15
36.       icons: {                                       // 设置侧边栏控制按钮图片
37.         shown: $r("app.media.icon_back"),            // 设置侧边栏显示时控制按钮的图标。
38.         hidden: $r("app.media.icon_menu"),           // 设置侧边栏隐藏时控制按钮的图标。
39.         switching: $r("app.media.icon_back")         // 设置侧边栏显示和隐藏状态切换时控制按钮的图标。
40.       }
41.     })
42.   }
43. }

复制代码

样例运行效果如下图所示：

SideBarContainer事件先容

1. declare class SideBarContainerAttribute extends CommonMethod<SideBarContainerAttribute> {
2.   onChange(callback: (value: boolean) => void): SideBarContainerAttribute;
3. }

复制代码

• onChange：当侧边栏的状态在表现和隐蔽之间切换时触发回调， value 为 true 表示菜单栏表现表现，false表示菜单栏隐蔽。
  

码牛课堂也为了积极培养鸿蒙生态人才，让大家都能学习到鸿蒙开发最新的技能，针对一些在职人员、0基础小白、应届生/计算机专业、鸿蒙爱好者等人群，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技能的学习路线。大家可以进行参考学习：https://qr21.cn/FV7h05

   ①全方位，更合理的学习路径：
路线图包罗ArkTS基础语法、鸿蒙应用APP开发、鸿蒙能力集APP开发、次开发多端部署开发、物联网开发等九大模块，六大实战项目贯穿始终，由浅入深，层层递进，深入明白鸿蒙开发原理！
  ②多层次，更多的鸿蒙原生应用：
路线图将包罗完全基于鸿蒙内核开发的应用，比如一次开发多端部署、自由流转、元服务、端云一体化等，多方位的学习内容让学生能够高效掌握鸿蒙开发，少走弯路，真正明白并应用鸿蒙的核心技能和理念。
  ③实战化，更贴合企业需求的技能点：
学习路线图中的每一个技能点都能够紧贴企业需求，经过多次真实实践，每一个知识点、每一个项目，都是码牛课堂鸿蒙研发团队精心打磨和深度解析的成果，注重对学生的细致教学，每一步都确保学生能够真正明白和掌握。
  为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技能，这边特意整理了《鸿蒙开发学习手册》（共计890页），盼望对大家有所帮助：https://qr21.cn/FV7h05
《鸿蒙开发学习手册》：https://qr21.cn/FV7h05

如何快速入门：

• 根本概念
  
• 构建第一个ArkTS应用
  
• ……
  

开发基础知识：https://qr21.cn/FV7h05

• 应用基础知识
  
• 配置文件
  
• 应用数据管理
  
• 应用安全管理
  
• 应用隐私掩护
  
• 三方应用调用管控机制
  
• 资源分类与访问
  
• 学习ArkTS语言
  
• ……
  

基于ArkTS 开发：https://qr21.cn/FV7h05

• Ability开发
  
• UI开发
  
• 公共事件与通知
  
• 窗口管理
  
• 媒体
  
• 安全
  
• 网络与链接
  
• 电话服务
  
• 数据管理
  
• 背景任务(Background Task)管理
  
• 设备管理
  
• 设备使用信息统计
  
• DFX
  
• 国际化开发
  
• 折叠屏系列
  
• ……
  

鸿蒙开发面试真题（含参考答案）：https://qr21.cn/FV7h05

大厂鸿蒙面试题：：https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇（共计319页）：https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发体系底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4