OpenHarmony开发者论坛

标题: SideBarContainer如何设置controlButton属性？ [打印本页]
作者: zhanglin    时间: 2023-8-31 10:24
标题: SideBarContainer如何设置controlButton属性？
[md]【问题描述】

SideBarContainer，想设置按钮的位置，controlButton属性不会设置，官网也没有使用示例，能给个例子吗？

![image.png](data/attachment/forum/202308/31/102406yn2cwknizl5z8uwi.png "image.png")



【运行环境】

硬件：rk3568；  ROM:  3.2 Beta5 ；  API 9；
[/md]
作者: gelsang    时间: 2023-9-1 09:11
参考以下示例
  1. @Entry
  2. @Component
  3. struct SideBarContainerExample {
  4.   normalIcon : Resource = $r("app.media.icon")
  5.   selectedIcon: Resource = $r("app.media.icon")
  6.   @State arr: number[] = [1, 2, 3]
  7.   @State current: number = 1

  9.   build() {
  10.     SideBarContainer(SideBarContainerType.Embed)
  11.     {
  12.       Column() {
  13.         ForEach(this.arr, (item, index) => {
  14.           Column({ space: 5 }) {
  15.             Image(this.current === item ? this.selectedIcon : this.normalIcon).width(64).height(64)
  16.             Text("Index0" + item)
  17.               .fontSize(25)
  18.               .fontColor(this.current === item ? '#0A59F7' : '#999')
  19.               .fontFamily('source-sans-pro,cursive,sans-serif')
  20.           }
  21.           .onClick(() => {
  22.             this.current = item
  23.           })
  24.         }, item => item)
  25.       }.width('100%')
  26.       .justifyContent(FlexAlign.SpaceEvenly)
  27.       .backgroundColor('#19000000')


  30.       Column() {
  31.         Text('SideBarContainer content text1').fontSize(25)
  32.         Text('SideBarContainer content text2').fontSize(25)
  33.       }
  34.       .margin({ top: 50, left: 20, right: 30 })
  35.     }
  36.     .sideBarWidth(150)
  37.     .minSideBarWidth(50)
  38.     .controlButton({left:32,
  39.       top:32,
  40.       width:32,
  41.       height:32,
  42.       icons:{shown: $r("app.media.icon"),
  43.         hidden: $r("app.media.icon"),
  44.         switching: $r("app.media.icon")}})
  45.     .maxSideBarWidth(300)
  46.     .onChange((value: boolean) => {
  47.       console.info('status:' + value)
  48.     })
  49.   }
  50. }
复制代码






欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/) Powered by Discuz! X3.5