HarmonyOS ArkUI容器类组件-侧边栏容器（SideBarContainer）
SideBarContainer 表示侧边栏容器，它可以添加两个子组件，第一个子组件表示侧边栏，第二个子组件表示内容区，本节笔者简单先容一下 SideBarContainer 的简单使用。SideBarContainer定义先容
interface SideBarContainerInterface {
(type?: SideBarContainerType): SideBarContainerAttribute;
}
[*]type：设置侧边栏的表现范例， SideBarContainerType 定义了一下 2 中范例：
[*]Embed：侧边栏嵌入到组件内，侧边栏和内容区并列表现。
[*]Overlay：侧边栏浮在内容区上面。
简单样例如下所示：
@Entry @Component struct SideBarContainerTest {
build() {
SideBarContainer(SideBarContainerType.Overlay) {
Column() {
Text("侧边栏区域")
.width("100%")
.height("100%")
.fontSize(30)
.textAlign(TextAlign.Center)
}
.width(10)
.height("100%")
.backgroundColor("#aabbcc")
Column() {
Text("侧边栏区域")
.width("100%")
.height("100%")
.fontSize(30)
.textAlign(TextAlign.Center)
}
.width("100%")
.height("100%")
.backgroundColor("#bbccaa")
}
.width('100%')
.height('100%')
}
}
样例运行效果如下图所示：
https://i-blog.csdnimg.cn/blog_migrate/eaba4afd8c82fc2fe27d031567ba89cd.gif
SideBarContainer属性先容
declare class SideBarContainerAttribute extends CommonMethod<SideBarContainerAttribute> {
showSideBar(value: boolean): SideBarContainerAttribute;
controlButton(value: ButtonStyle): SideBarContainerAttribute;
showControlButton(value: boolean): SideBarContainerAttribute;
sideBarWidth(value: number): SideBarContainerAttribute;
minSideBarWidth(value: number): SideBarContainerAttribute;
maxSideBarWidth(value: number): SideBarContainerAttribute;
}
declare interface ButtonStyle {
left?: number;
top?: number;
width?: number;
height?: number;
icons?: {
shown: string | PixelMap | Resource;
hidden: string | PixelMap | Resource;
switching?: string | PixelMap | Resource;
};
}
[*]showSideBar：设置是否表现侧边栏，默认为 true 表示表现侧边栏。
[*]controlButton：设置侧边栏控制按钮的属性， ButtonStyle 参数说明如下：
[*]left：设置侧边栏控制按钮间隔容器左界限的间距。
[*]top：设置侧边栏控制按钮间隔容器上界限的间距。
[*]width：设置侧边栏控制按钮的宽度。
[*]height：设置侧边栏控制按钮的高度。
[*]icons：设置侧边栏控制按钮的图标：
[*]shown：设置侧边栏表现时控制按钮的图标。
[*]hidden：设置侧边栏隐蔽时控制按钮的图标。
[*]switching：设置侧边栏表现和隐蔽状态切换时控制按钮的图标。
[*]sideBarWidth：设置侧边栏的宽度，默认为 200 。
[*]minSideBarWidth：设置侧边栏最小宽度，默认为 200 。
[*]maxSideBarWidth：设置侧边栏最大宽度，默认为 280 。
简单样例如下所示：
@Entry @Component struct SideBarContainerTest {
build() {
SideBarContainer(SideBarContainerType.Overlay) { // 设置侧边栏样式为悬浮态
Column() { // 第一个子组件为侧边栏视图
Text("侧边栏区域")
.width("100%")
.height("100%")
.fontSize(30)
.textAlign(TextAlign.Center)
}
.width(10)
.height("100%")
.backgroundColor("#aabbcc")
Column() { // 第二个子组件为内容区视图
Text("内容区域")
.width("100%")
.height("100%")
.fontSize(30)
.textAlign(TextAlign.Center)
}
.width("100%")
.height("100%")
.backgroundColor("#bbccaa")
}
.width('100%')
.height('100%')
.sideBarWidth(150) // 设置侧边栏宽度为150
.minSideBarWidth(100) // 设置侧边栏最小宽度为100
.maxSideBarWidth(200) // 设置侧边栏最大宽度为200
.controlButton({ // 设置侧边栏控制按钮的样式
width: 30, // 设置侧边栏控制按钮宽度为30
height: 30, // 设置侧边栏控制按钮高度为30
top: 15, // 设置侧边栏控制按钮距离容器顶部为15
icons: { // 设置侧边栏控制按钮图片
shown: $r("app.media.icon_back"), // 设置侧边栏显示时控制按钮的图标。
hidden: $r("app.media.icon_menu"), // 设置侧边栏隐藏时控制按钮的图标。
switching: $r("app.media.icon_back") // 设置侧边栏显示和隐藏状态切换时控制按钮的图标。
}
})
}
}
样例运行效果如下图所示：
https://i-blog.csdnimg.cn/blog_migrate/236e99ef94102501ed54a27eded755c1.gif
SideBarContainer事件先容
declare class SideBarContainerAttribute extends CommonMethod<SideBarContainerAttribute> {
onChange(callback: (value: boolean) => void): SideBarContainerAttribute;
}
[*]onChange：当侧边栏的状态在表现和隐蔽之间切换时触发回调， value 为 true 表示菜单栏表现表现，false表示菜单栏隐蔽。
码牛课堂也为了积极培养鸿蒙生态人才，让大家都能学习到鸿蒙开发最新的技能，针对一些在职人员、0基础小白、应届生/计算机专业、鸿蒙爱好者等人群，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技能的学习路线。大家可以进行参考学习：https://qr21.cn/FV7h05
https://i-blog.csdnimg.cn/blog_migrate/98e48a2414ea2741498f0298e0700156.png
①全方位，更合理的学习路径：
路线图包罗ArkTS基础语法、鸿蒙应用APP开发、鸿蒙能力集APP开发、次开发多端部署开发、物联网开发等九大模块，六大实战项目贯穿始终，由浅入深，层层递进，深入明白鸿蒙开发原理！
②多层次，更多的鸿蒙原生应用：
路线图将包罗完全基于鸿蒙内核开发的应用，比如一次开发多端部署、自由流转、元服务、端云一体化等，多方位的学习内容让学生能够高效掌握鸿蒙开发，少走弯路，真正明白并应用鸿蒙的核心技能和理念。
③实战化，更贴合企业需求的技能点：
学习路线图中的每一个技能点都能够紧贴企业需求，经过多次真实实践，每一个知识点、每一个项目，都是码牛课堂鸿蒙研发团队精心打磨和深度解析的成果，注重对学生的细致教学，每一步都确保学生能够真正明白和掌握。
为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技能，这边特意整理了《鸿蒙开发学习手册》（共计890页），盼望对大家有所帮助：https://qr21.cn/FV7h05
《鸿蒙开发学习手册》：https://qr21.cn/FV7h05
如何快速入门：
[*]根本概念
[*]构建第一个ArkTS应用
[*]……
https://i-blog.csdnimg.cn/blog_migrate/de08ceab9dd1da21a30aaf0591256503.png
开发基础知识：https://qr21.cn/FV7h05
[*]应用基础知识
[*]配置文件
[*]应用数据管理
[*]应用安全管理
[*]应用隐私掩护
[*]三方应用调用管控机制
[*]资源分类与访问
[*]学习ArkTS语言
[*]……
https://i-blog.csdnimg.cn/blog_migrate/6059bfd389c64e5039f2ceca03c151fd.png
基于ArkTS 开发：https://qr21.cn/FV7h05
[*]Ability开发
[*]UI开发
[*]公共事件与通知
[*]窗口管理
[*]媒体
[*]安全
[*]网络与链接
[*]电话服务
[*]数据管理
[*]背景任务(Background Task)管理
[*]设备管理
[*]设备使用信息统计
[*]DFX
[*]国际化开发
[*]折叠屏系列
[*]……
https://i-blog.csdnimg.cn/blog_migrate/32f20126f81a72974c938ca60c94b5ae.png
鸿蒙开发面试真题（含参考答案）：https://qr21.cn/FV7h05
https://i-blog.csdnimg.cn/blog_migrate/83090f310a72ea259493b9264ac04054.png
大厂鸿蒙面试题：：https://qr18.cn/F781PH
https://i-blog.csdnimg.cn/blog_migrate/9c923937e31869ba45e787f3df77ae31.png
鸿蒙开发面试大盘集篇（共计319页）：https://qr18.cn/F781PH
1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发体系底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向
https://i-blog.csdnimg.cn/blog_migrate/f5e68d6fdcceb6ae9ae0f7a466349b8d.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]