SideBarContainer如何设置controlButton属性

HarmonyOS

伊普洛先生

2024-03-17 15:23:42

浏览

回答 1

按赞同

按时间

橱柜里的蛙

SideBarContainer组件提供了侧边栏可以显示和隐藏的侧边栏容器，它的controlButton属性可以设置侧边栏控制按钮的属性。参考代码如下：

@Entry 
@Component 
struct SideBarContainerExample { 
  normalIcon: Resource = $r("app.media.icon") 
  selectedIcon: Resource = $r("app.media.icon") 
  @State arr: number[] = [1, 2, 3] 
  @State current: number = 1 
 
  build() { 
    SideBarContainer(SideBarContainerType.Embed) { 
      Column() { 
        ForEach(this.arr, (item: number, index) => { 
          Column({ space: 5 }) { 
            Image(this.current === item ? this.selectedIcon : this.normalIcon).width(64).height(64) 
            Text("Index0" + item) 
              .fontSize(25) 
              .fontColor(this.current === item ? '#0A59F7' : '#999') 
              .fontFamily('source-sans-pro,cursive,sans-serif') 
          } 
          .onClick(() => { 
            this.current = item 
          }) 
        }) 
      }.width('100%') 
      .justifyContent(FlexAlign.SpaceEvenly) 
      .backgroundColor('#19000000') 
 
      Column() { 
        Text('SideBarContainer content text1').fontSize(25) 
        Text('SideBarContainer content text2').fontSize(25) 
      } 
      .margin({ top: 50, left: 20, right: 30 }) 
    } 
    .sideBarWidth(150) 
    .minSideBarWidth(50) 
    .controlButton({ 
      left: 32, 
      top: 32, 
      width: 32, 
      height: 32, 
      icons: { shown: $r("app.media.icon"), 
        hidden: $r("app.media.icon"), 
        switching: $r("app.media.icon") } 
    }) 
    .maxSideBarWidth(300) 
    .onChange((value: boolean) => { 
      console.info('status:' + value) 
    }) 
  } 
}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.
45.
46.
47.
48.
49.
50.