HarmonyOS NEXT project practice:bindSheet - SunriseXing/harmonyos GitHub Wiki
[##HarmonyOS Next project practice##HarmonyOS SDK application service##education##]
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 secondary confirmation or custom closure behavior in the scenario, it is not recommended to use the shoulderDiscmiss/onWillDismiss interface.
By using the bindSheet property to bind a semi modal page to a component, the semi modal size can be determined by setting a custom or default built-in height during component insertion. Interface:
bindSheet(isShow: Optional<boolean>, builder: CustomBuilder, options?: SheetOptions): T
Bind a semi modal page to the component and click to display the modal page. IsShow: Whether to display a semi modal page. True: Display a semi modal page. False: Hide the semi modal page. Starting from API version 10, this parameter supports bidirectional variable binding. Starting from API version 18, this parameter is supported!! Bidirectional binding of variables. Builder: Configure semi modal page content. Options: Configure optional properties for the semi modal page.
explain:
- In non bidirectional binding situations, closing a semi modal page by dragging will not change the value of the isShow parameter. To synchronize the isShow parameter values with the state of the semi modal interface, it is recommended to use $$bidirectional binding of isShow parameters. Starting from API version 18, this parameter is supported!! Bidirectional binding of variables.
- In the case of semi modal single gear up drag or multi gear up slide shifting, the content updates the display area after the drag or shift ends.
- Semimodal is a pop-up window that is strictly bound to the host node.
- The departure animation of the semi modal page does not support interruption, and cannot respond to other gesture actions during animation execution.
import { promptAction } from '@kit.ArkUI';
@Entry
@Component
struct BindSheetPage {
@State isShowSheet: boolean = false;
build() {
Column({ space: 6 }) {
Text('BindSheetPage')
.fontSize(24)
.fontWeight(FontWeight.Bold)
Button('showBindSheet')
.onClick(() => {
this.isShowSheet = !this.isShowSheet;
})
}
.height('100%')
.width('100%')
.bindSheet($$this.isShowSheet, this.SheetBuilder(), {
detents: [SheetSize.MEDIUM, SheetSize.LARGE, 600],
preferType: SheetType.BOTTOM,
title: { title: '上拉弹窗' },
})
}
@Builder
SheetBuilder() {
Column({ space: 6 }) {
Button('hello')
.onClick(() => {
promptAction.showToast({
message: 'hello',
duration: 2000
})
})
Button('close')
.onClick(() => {
this.isShowSheet = false
})
}
.width('100%').height('100%')
}
}