Dev.to

HarmonyOS NEXT Practical: Pop up Bottom Menu

Goal: Pull up the bottom menu to enable it to pop up and close. Knowledge points: The half modal page (bindSheet) defaults to a non full screen pop-up interactive page in modal form, allowing some underlying parent views to be visible, helping users retain their parent view environment when interacting with the half modal. Semimodal pages are suitable for displaying simple tasks or information panels, such as personal information, text introductions, sharing panels, creating schedules, adding content, etc. If you need to display a semi modal page that may affect the parent view, semi modal supports configuring it as a non modal interaction form. Semimodal has different morphological capabilities on devices of different widths, and developers have different morphological demands on devices of different widths. Please refer to the (preemptType) attribute. You can use bindSheet to construct semi modal transition effects, see Modal Transitions for details. For complex or lengthy user processes, it is recommended to consider alternative transition methods to replace semi modal. Such as full modal transitions and Navigation transitions. Use constraints When embedding a semi modal UI Extension, it is not supported to pull up semi modal/pop ups within the UI Extension again. If there is no scenario for secondary confirmation or custom closure behavior, it is not recommended to use the shoulder Dismiss/onWilDismiss interface. life cycle The semi modal page provides a lifecycle function to notify users of the lifecycle status of the pop-up window. The triggering sequence of the lifecycle is as follows: onWillAppear -> onAppear -> onWillDisappear -> onDisappear。 Use nested scrolling interaction: The default nested mode for the above interaction in the semi modal is: {Forward：PARENT_FIRST，Backward：SELF_FIRST} Operation priority when sliding in the content area of the semi modal panel: The content is at the top (handled in this state when the content cannot be scrolled) When sliding up, prioritize expanding the panel gears upwards. If there are no gears available for expansion, scroll through the content When sliding down, prioritize shrinking the panel gear downwards. If there is no gear available for shrinking, close the panel The content is in the middle position (can be scrolled up and down) When scrolling up/down, prioritize scrolling the content until the page reaches the bottom/top The content is at the bottom position (when the content is scrollable) When sliding up, it presents a rebound effect in the content area without switching gears When sliding down, scroll through the content until reaching the top Actual combat:BottomPopUpDemoPage @Entry @Component struct BottomPopUpDemoPage { @State isShow: boolean = false @State sheetHeight: number = 300; build() { Column({ space: 20 }) { Text('底部菜单Demo') Button("拉起底部菜单") .onClick(() => { this.isShow = true }) .fontSize(20) .margin(10) .bindSheet($$this.isShow, this.buildSheet(), { height: this.sheetHeight, backgroundColor: '#EEEEEE', onWillAppear: () => { console.log("BindSheet onWillAppear.") }, onAppear: () => { console.log("BindSheet onAppear.") }, onWillDisappear: () => { console.log("BindSheet onWillDisappear.") }, onDisappear: () => { console.log("BindSheet onDisappear.") } }) } .width('100%') .height('100%') } @Builder buildSheet() { Column({ space: 10 }) { Text('底部菜单栏') Button('菜单 1') Button('菜单 2') Button('菜单 3') Button("收起菜单") .fontSize(20) .backgroundColor(Color.Gray) .onClick(() => { this.isShow = false; }) } .width('100%') .height('100%') .padding({ top: 10 }) } }

Mar 28, 2025 - 09:17

HarmonyOS NEXT Practical: Pop up Bottom Menu

Goal: Pull up the bottom menu to enable it to pop up and close.

Knowledge points:

The half modal page (bindSheet) defaults to a non full screen pop-up interactive page in modal form, allowing some underlying parent views to be visible, helping users retain their parent view environment when interacting with the half modal.
Semimodal pages are suitable for displaying simple tasks or information panels, such as personal information, text introductions, sharing panels, creating schedules, adding content, etc. If you need to display a semi modal page that may affect the parent view, semi modal supports configuring it as a non modal interaction form.
Semimodal has different morphological capabilities on devices of different widths, and developers have different morphological demands on devices of different widths. Please refer to the (preemptType) attribute. You can use bindSheet to construct semi modal transition effects, see Modal Transitions for details. For complex or lengthy user processes, it is recommended to consider alternative transition methods to replace semi modal. Such as full modal transitions and Navigation transitions.

Use constraints

When embedding a semi modal UI Extension, it is not supported to pull up semi modal/pop ups within the UI Extension again.
If there is no scenario for secondary confirmation or custom closure behavior, it is not recommended to use the shoulder Dismiss/onWilDismiss interface.

life cycle
The semi modal page provides a lifecycle function to notify users of the lifecycle status of the pop-up window. The triggering sequence of the lifecycle is as follows: onWillAppear -> onAppear -> onWillDisappear -> onDisappear。

Use nested scrolling interaction: The default nested mode for the above interaction in the semi modal is: {Forward：PARENT_FIRST，Backward：SELF_FIRST}

Operation priority when sliding in the content area of the semi modal panel:

The content is at the top (handled in this state when the content cannot be scrolled) When sliding up, prioritize expanding the panel gears upwards. If there are no gears available for expansion, scroll through the content When sliding down, prioritize shrinking the panel gear downwards. If there is no gear available for shrinking, close the panel
The content is in the middle position (can be scrolled up and down) When scrolling up/down, prioritize scrolling the content until the page reaches the bottom/top
The content is at the bottom position (when the content is scrollable) When sliding up, it presents a rebound effect in the content area without switching gears When sliding down, scroll through the content until reaching the top

Actual combat:BottomPopUpDemoPage

@Entry
@Component
struct BottomPopUpDemoPage {
  @State isShow: boolean = false
  @State sheetHeight: number = 300;

  build() {
    Column({ space: 20 }) {
      Text('底部菜单Demo')

      Button("拉起底部菜单")
        .onClick(() => {
          this.isShow = true
        })
        .fontSize(20)
        .margin(10)
        .bindSheet($$this.isShow, this.buildSheet(), {
          height: this.sheetHeight,
          backgroundColor: '#EEEEEE',
          onWillAppear: () => {
            console.log("BindSheet onWillAppear.")
          },
          onAppear: () => {
            console.log("BindSheet onAppear.")
          },
          onWillDisappear: () => {
            console.log("BindSheet onWillDisappear.")
          },
          onDisappear: () => {
            console.log("BindSheet onDisappear.")
          }
        })
    }
    .width('100%')
    .height('100%')
  }

  @Builder
  buildSheet() {
    Column({ space: 10 }) {
      Text('底部菜单栏')
      Button('菜单 1')
      Button('菜单 2')
      Button('菜单 3')
      Button("收起菜单")
        .fontSize(20)
        .backgroundColor(Color.Gray)
        .onClick(() => {
          this.isShow = false;
        })
    }
    .width('100%')
    .height('100%')
    .padding({ top: 10 })
  }
}