文章目录
- 前言
- 侧边栏组件使用
- 快速搞定侧边栏
- 总结
一、前言
有好多文章要分享，但是来不及，就把最近觉得比较重要的组件分享下。最近因为在完善玩android的一个app，我的这个app叫玩鸿蒙，过段时间就开源了，敬请期待。
今天就分享，我在WanHarmony中用到的这个组件。先不多说，看下效果，老读者都知道我在维护一个组件使用的项目，所以我今天的这个组件使用，也会放到那个项目中，能快速的上手。
话不多说，看效果。
展开效果：
51.png
收缩效果：
52.png
上边的效果是在WanHarmony项目中已经实现的效果，如果你也想实现，那么你要把握这个关键组件。只要会使用这个组件，就能写出上面的效果。至于上面的效果，等我把WanHarmony开源就可以查看。
二、侧边栏使用
组件是SideBarContainer
Column(){
SideBarContainer(SideBarContainerType.Embed) { //侧边栏和内容并列显示，Overlay是侧边栏浮在内容上面
//侧边栏的布局 （也就是左半边布局）
Column(){
ForEach(this.arr, (item, index)=>{
Column({space:5}){
Image(this.current === index ? this.selectedIcon : this.normalIcon)
.width(64)
.height(64)
Text('index0' + item)
.fontSize(25)
.fontColor(this.current === index ? '#0A59F7' : '#999')
}
.onClick(()=>{
this.current = index
})
}, item => item)
}.width('100%')
.margin({
top: 90
})
.backgroundColor(Color.Red)
.justifyContent(FlexAlign.SpaceEvenly)
//右边 内容的布局 （右边半边的布局）
List(){
ForEach(this.arr,(item, index)=>{
ListItem(){
Text(item + '文本')
.height(50)
}
}, (item)=>item)
}
.margin({
top: 90
})
.height('100%')
}.controlButton({//控制侧边栏显示隐藏的按钮
icons:{
hidden: $r('app.media.ic_broadside_close'),
shown:$r('app.media.ic_broadside_default'),
switching: $r('app.media.ic_broadside_close')
},
width:32,
height:32
})
.sideBarWidth(150)
.minSideBarWidth(50)
.maxSideBarWidth('100%')
.onChange((value)=>{ //侧边栏是否显示的值
console.log('当前的值：' + value)
})
.backgroundColor(Color.Green)
}
.margin({
top: -40
})
三、快速搞定侧边栏
从上面注释基本就能知道这个组件的使用了，自己再撸一把就掌握了。
这里罗列下SideBarContainer的要点：
1、里面放两个布局，一个作为左半部分用，一个作为右半边部分用。
2、controlButton 这个是侧边栏切换的按钮，可以设置按钮图片和大小
3、sideBarWidth 这个是设定侧边栏（左边部分）的宽度，也就是左半边的大小。
4、如果想让左边部分滚动，那么里面就放List组件就可以了。
53.png
最后呢，将我整理的这个组件放到这个项目中，后面有新增，也会一并上传。开发中，某些api忘记了，可以重新拿出来看看。
最后献上我的个人v，专属终身顾问，解答关于鸿蒙相关的东西，包括项目中的问题，还有最新的技术点，快速开发，抢在前头。 hmssz1
技术迭代很快，不要在一个问题上拔不出来，找到专业的人，快速的解决，作为程序员时间是最宝贵的，不要自己蒙头苦干，等你搞懂了，这个技术已经过时了。
以上代码地址：https://github.com/shenshizhong/ViewUseDemo
找到这个类 SlideBarContainerTestPage.ets
总结
1、SideBarContainer 的使用
2、给定好左边部分 和右边部分的布局
3、设置好左半边大小 和右半天大小
如果对你有一点点帮助，那是值得高兴的事情。：)
我的csdn：http://blog.csdn.net/shenshizhong
我的简书：http://www.jianshu.com/u/345daf0211ad
网友评论