# 5.5:侧边栏容器(SideBarContainer)

SideBarContainer 表示侧边栏容器,它可以添加两个子组件,第一个子组件表示侧边栏,第二个子组件表示内容区,本节笔者简单介绍一下 SideBarContainer 的简单使用。

# 5.5.1:SideBarContainer定义介绍

interface SideBarContainerInterface {
  (type?: SideBarContainerType): SideBarContainerAttribute;
}
1
2
3
  • 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%')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

样例运行结果如下图所示:

5_5_1_1

# 5.5.2: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;
  };
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  • 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")         // 设置侧边栏显示和隐藏状态切换时控制按钮的图标。
      }
    })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

样例运行结果如下图所示:

5_5_1_1

# 5.5.3:SideBarContainer事件介绍

declare class SideBarContainerAttribute extends CommonMethod<SideBarContainerAttribute> {
  onChange(callback: (value: boolean) => void): SideBarContainerAttribute;
}
1
2
3
  • onChange:当侧边栏的状态在显示和隐藏之间切换时触发回调, valuetrue 表示菜单栏显示显示,false表示菜单栏隐藏。
(adsbygoogle = window.adsbygoogle || []).push({});
请作者喝杯咖啡

津公网安备 12011402001367号

津ICP备2020008934号-2