HarmonyOS 鸿蒙Next SideBarContainer使用

参考一下如下demo,可以自定义动画

@Entry

@Component

struct SideBarContainerDemo {

  @State arr: number[] = [1, 2, 3]

  @State current: number = 1

  @State showSideBar: boolean = false

  @State showFlag: Visibility = Visibility.Hidden;

  // 延迟关闭侧边栏，让自定义的出场动画显示

  cancel() {

    this.showFlag = Visibility.Hidden

    setTimeout(() => {

      this.showSideBar = !this.showSideBar

    }, 1000)

  }

  build() {

    SideBarContainer(SideBarContainerType.Overlay) {

      Column() {

        ForEach(this.arr, (item: number) => {

        Column({ space: 5 }) {

          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)

      }

      .visibility(this.showFlag)

      .transition(TransitionEffect.OPACITY.animation({ duration: 1000 })

        .combine(TransitionEffect.translate({ x: 100 })))

      .width('100%')

      .justifyContent(FlexAlign.SpaceEvenly)

      .backgroundColor(Color.Pink)

      Column() {

        Button('打开侧边栏').onClick(() => {

          this.showFlag = Visibility.Visible

          this.showSideBar = true

        }

        )

        Button('关闭侧边栏').onClick(() => {

          this.cancel()

        })

      }

    }

    .divider(null)

    .sideBarPosition(SideBarPosition.End)

    .showSideBar(this.showSideBar)

    .showControlButton(false)

    .sideBarWidth(150)

    .minSideBarWidth(50)

    .maxSideBarWidth(300)

    .minContentWidth(0)

    .onChange((value: boolean) => {

      console.info('status:' + value)

    })

  }

}