How to Exit Slide-Out Mode When Clicking on a Blank Area

Read the original article：How to Exit Slide-Out Mode When Clicking on a Blank Area

Context

When the type of the SideBarContainer component is set to Overlay, how can we implement exiting the slide-out state by clicking on the blank area?

Background Check

• SidebarContainer: Create a sidebar container that can toggle visibility, where the first child component is the sidebar and the second is the content area.
• Component Transition(transition):The transition within components is primarily configured through the transition property, which displays transitional animations when components are inserted or removed. This is mainly used for enhancing user experience when subcomponents are inserted or removed within container components.

Solution / Approach

Set up two buttons to open and close the sidebar respectively. Use transition and timers to customize the sidebar's entrance and exit animations. Control the visibility of the sidebar through the showSideBar property of the SideBarContainer component. To achieve this, add the click event for closing the sidebar to a blank area. A complete example is as follows:

@Entry
@Component
struct SideBarContainerDemo {
  @State arr: number[] = [1, 2, 3]
  @State current: number = 1
  @State showSideBar: boolean = false
  @State showFlag: Visibility = Visibility.Hidden;

  // Delay closing the sidebar to allow custom entrance animations to display.
  cancel() {
    this.showFlag = Visibility.Hidden
    setTimeout(() => {
      this.showSideBar = !this.showSideBar
    }, 1000)
  }

  build() {
    // Set the type of SideBarContainer to Overlay. 
    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)
      // Customize entrance animations through transition 
      .transition(TransitionEffect.OPACITY
        .animation({ duration: 1000 })
        .combine(TransitionEffect.translate({ x: 100 })))
      .width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)
      .backgroundColor('#ffa2cdff')

      Column() {
        Button('Open the sidebar').onClick(() => {
          this.showFlag = Visibility.Visible
          this.showSideBar = true
        })
          .margin({ top: 16, bottom: 16 })
        Button('Close the sidebar').onClick(() => {
          this.cancel()
        })
      }.height('100%')
      // Click on a blank area to exit the slide-out state.
      .onClick(() => {
        this.cancel()
      })
    }
    .divider(null)
    .sideBarPosition(SideBarPosition.End)
    // Whether to display the sidebar
    .showSideBar(this.showSideBar)
    .showControlButton(false)
    .sideBarWidth(150)
    .minSideBarWidth(50)
    .maxSideBarWidth(300)
    .minContentWidth(0)
    .onChange((value: boolean) => {
      console.info('status:' + value)
    })
  }
}

Limitations or Considerations

• This example supports API Version 19 Release and above.
• This example supports HarmonyOS 5.1.1 Release SDK and above.
• This example requires DevEco Studio 5.1.1 Release and above for compilation and execution.

Written by Mehmet Emir Ucar