HarmonyOS鸿蒙Next中如何判断SideBarContainer的侧边栏区域是否已完全关闭?

HarmonyOS鸿蒙Next中如何判断SideBarContainer的侧边栏区域是否已完全关闭?

我的场景是： 点击 主显示区（内容区） 中的控件，判断 侧边栏区域 是否已关闭。 如果，侧边栏区域 已关闭 ， 则响应控件点击事件， 否则 关闭侧边栏区域， 忽略控件点击事件的后续处理。

请问，如何实现？

5 回复

您好，是否想达到侧边栏浮在内容区上面的效果，可查看SideBarContainerType设置为Overlay达到您的预期呢？

更多关于HarmonyOS鸿蒙Next中如何判断SideBarContainer的侧边栏区域是否已完全关闭?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


你好。

onChange

// xxx.ets
@Entry
@Component
struct Index {
  normalIcon: Resource = $r("app.media.startIcon")
  selectedIcon: Resource = $r("app.media.foreground")
  @State arr: number[] = [1, 2, 3]
  @State current: number = 1;

  // 侧边栏是否显示
  @State isShowSideBar: boolean = false;

  build() {
    SideBarContainer(SideBarContainerType.Embed) {
      Column() {
        ForEach(this.arr, (item: number) => {
          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
          })
        }, (item: string) => 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 })
    }
    .controlButton({
      icons: {
        hidden: $r('app.media.background'),
        shown: $r('app.media.background'),
        switching: $r('app.media.background')
      }
    })
    .sideBarWidth(150)
    .minSideBarWidth(50)
    .maxSideBarWidth(300)
    .minContentWidth(0)
    .onChange((value: boolean) => {
      console.info('status:' + value);
      this.isShowSideBar = value;
    })
    .divider({ strokeWidth: '1vp', color: Color.Gray, startMargin: '4vp', endMargin: '4vp' })
  }
}

详情参见：

通过记录isShowSideBar的状态，来满足你的需求。

有要学HarmonyOS AI的同学吗，联系我：https://www.itying.com/goods-1206.html

可以通过一个变量记录当前侧边栏是否展开。通过onchange 自动更改这个值。主内容点击区域判断这个值。

具体怎么获取左侧是否展开, 可参考: https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-sidebarcontainer#onchange

在HarmonyOS鸿蒙Next中，可以通过监听SideBarContainer的onChange事件来判断侧边栏区域是否已完全关闭。当侧边栏的状态发生变化时，onChange事件会触发，你可以通过事件回调的参数获取当前侧边栏的状态。如果状态为SideBarContainer.SideBarStatus.Hidden，则表示侧边栏已完全关闭。示例代码如下：

sideBarContainer.onChange((status: SideBarContainer.SideBarStatus) => {
  if (status === SideBarContainer.SideBarStatus.Hidden) {
    console.log("SideBar is fully closed");
  }
});
回到顶部