HarmonyOS Next应用开发——抽屉布局SideBarContainer

【高心星出品】
抽屉布局SideBarContainer

提供侧边栏可以显示和隐蔽的侧边栏容器，通过子组件界说侧边栏和内容区，第一个子组件表现侧边栏，第二个子组件表现内容区。
并且侧边栏可以出现在左侧也可以出现在右侧，侧边栏可以并列跟内容区一起展示，也可以浮动在内容区展示。

常用属性

1. showSideBar(value: boolean)

复制代码

设置是否显示侧边栏。注意：必须利用$$装饰，否则无效。

1. showControlButton(value: boolean)

复制代码

设置是否显示控制按钮。

1. controlButton(value: ButtonStyle)

复制代码

设置控制按钮样式。

1. sideBarWidth(value: number)

复制代码

设置侧边栏宽度，默认240vp。

1. SideBarContainer( type?: SideBarContainerType )

复制代码

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

构建侧边栏：

1. Column() { //侧边栏内容区默认宽度240vp
2.   ForEach(this.datas, (item: Data, index: number) => {
3.     ListItem() {
4.       Text(item.txt)
5.         .fontSize(24)
6.         .fontWeight(FontWeight.Bold)
7.         .textAlign(TextAlign.Center)
8.         .border({ width: 2, style: BorderStyle.Dotted })
9.         .width('100%')
10.         .padding(20)
11.         .onClick(() => { //点击列表项
12.           this.ckitem = index //更新点击下标 进而重新渲染内容区背景颜色
13.           animateTo({curve:curves.springMotion()},()=>{this.isshowing = false}) //动画关闭侧边栏
14.         })
15.     }
16.   }, (item: Data) => JSON.stringify(item))
17. }.width('100%')
18. .height('100%')
19. .backgroundColor(Color.Gray)
20. .borderRadius(10)

复制代码

构建内容区：

1. Column() { //内容区
2.    Text(this.datas[this.ckitem].txt).fontSize(30).fontWeight(FontWeight.Bold)
3. }.width('100%')
4. .height('100%')
5. .backgroundColor(this.datas[this.ckitem].color)
6. .justifyContent(FlexAlign.Center)
7. .onTouch((event) => { //监听手指右边滑动和点击事件
8.   if (event.type == TouchType.Move) {
9.     this.movex = event.touches[0].x
10.     if ((this.movex - this.downx) > 50) { //产生了右侧滑动 打开抽屉
11.       animateTo({curve:curves.springMotion()},()=>{this.isshowing = true})
12.     }
13.   } else if (event.type == TouchType.Down) {
14.     this.downx = event.touches[0].x
15.     // 点击内容区就会关闭抽屉
16.     animateTo({curve:curves.springMotion()},()=>{this.isshowing = false})
17.   }
18. })

复制代码

注意： 我们通过切换控制变量来控制侧边栏是否显示，为了显示出抽屉效果，我们给变量的变化都参加了动画。并且组件默认不支持手指滑动显示或关闭侧边栏，所以我们给内容区参加了手指右侧滑动的监听来自界说效果。
完整的代码：

1. import { curves } from '@kit.ArkUI';
3. interface Data {
4.   color: Color
5.   txt: string
6. }
8. @Entry
9. @Component
10. struct SlideBarContainerPage {
11.   // 侧边栏数据源
12.   @State datas: Data[] = []
13.   // 点击item
14.   @State ckitem: number = 0
15.   // 侧边栏显示控制器
16.   @State isshowing: boolean = false
17.   // 手指按下x坐标
18.   private downx: number = 0
19.   // 手指移动x坐标
20.   private movex: number = 0
22.   aboutToAppear(): void {
23.     this.datas = [//数据源
24.       {
25.         txt: '白色',
26.         color: Color.White
27.       },
28.       {
29.         txt: '黑色',
30.         color: Color.Black
31.       },
32.       {
33.         txt: '红色',
34.         color: Color.Red
35.       },
36.       {
37.         txt: '绿色',
38.         color: Color.Green
39.       },
40.       {
41.         txt: '蓝色',
42.         color: Color.Blue
43.       },
44.     ]
45.   }
47.   build() {
48.     SideBarContainer(SideBarContainerType.Overlay) {
49.       Column() { //侧边栏内容区默认宽度240vp
50.         ForEach(this.datas, (item: Data, index: number) => {
51.           ListItem() {
52.             Text(item.txt)
53.               .fontSize(24)
54.               .fontWeight(FontWeight.Bold)
55.               .textAlign(TextAlign.Center)
56.               .border({ width: 2, style: BorderStyle.Dotted })
57.               .width('100%')
58.               .padding(20)
59.               .onClick(() => { //点击列表项
60.                 this.ckitem = index //更新点击下标 进而重新渲染内容区背景颜色
61.                 animateTo({curve:curves.springMotion()},()=>{this.isshowing = false}) //动画关闭侧边栏
62.               })
63.           }
64.         }, (item: Data) => JSON.stringify(item))
65.       }.width('100%')
66.       .height('100%')
67.       .backgroundColor(Color.Gray)
68.       .borderRadius(10)
70.       Column() { //内容区
71.          Text(this.datas[this.ckitem].txt).fontSize(30).fontWeight(FontWeight.Bold)
72.       }.width('100%')
73.       .height('100%')
74.       .backgroundColor(this.datas[this.ckitem].color)
75.       .justifyContent(FlexAlign.Center)
76.       .onTouch((event) => { //监听手指右边滑动和点击事件
77.         if (event.type == TouchType.Move) {
78.           this.movex = event.touches[0].x
79.           if ((this.movex - this.downx) > 50) { //产生了右侧滑动 打开抽屉
80.             animateTo({curve:curves.springMotion()},()=>{this.isshowing = true})
81.           }
82.         } else if (event.type == TouchType.Down) {
83.           this.downx = event.touches[0].x
84.           // 点击内容区就会关闭抽屉
85.           animateTo({curve:curves.springMotion()},()=>{this.isshowing = false})
86.         }
87.       })
88.     }
89.     .height('100%')
90.     .width('100%')
91.     .showSideBar($$this.isshowing) //双向绑定 控制抽屉的开和关
92.   }
93. }

复制代码

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