SideBarContainer如何设置controlButton属性

 SideBarContainer如何设置controlButton属性

HarmonyOS
2024-03-17 15:23:42
浏览
收藏 0
回答 1
待解决
回答 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) 
    }) 
  } 
}

参考链接

SideBarContainer

分享
微博
QQ
微信
回复
2024-03-18 21:00:30
相关问题
SideBarContainer如何设置透明度?
2229浏览 • 1回复 待解决
如何动态设置组件属性的值
793浏览 • 1回复 待解决
Web组件domStorageAccess属性设置
2224浏览 • 1回复 待解决
通过API获取系统设置属性
314浏览 • 1回复 待解决
通过WindowProperties设置属性不生效
2061浏览 • 1回复 待解决
HarmonyOS 组件设置属性无效果
244浏览 • 1回复 待解决
通用属性width是否支持设置变量
2067浏览 • 1回复 待解决
组件设置visibility属性的回调
455浏览 • 2回复 待解决
Refresh组件不支持设置nestedScroll属性
1822浏览 • 1回复 待解决
List组件的initialIndex属性设置不生效
2143浏览 • 1回复 待解决
list-item 根据boolean属性 动态设置class
4752浏览 • 1回复 待解决