HarmonyOS 鸿蒙Next 使用半模态转场指定SheetMode为EMBEDDED时如何使用

HarmonyOS 鸿蒙Next 使用半模态转场指定SheetMode为EMBEDDED时如何使用

使用半模态转场bindSheet，指定SheetMode为EMBEDDED时，弹层无法弹出，想请教具体用法，下方是相关代码，如果将SheetMode改为OVERLAY就可以弹出。

build() {
    RelativeContainer() {
      Column() {}
      .width('100%')
      .height('100%')
      .alignRules({
        top: { anchor: '__container__', align: VerticalAlign.Top },
        bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
        left: { anchor: '__container__', align: HorizontalAlign.Start },
        right: { anchor: '__container__', align: HorizontalAlign.End }
      });
    }
    .bindSheet(true, this.buildBottomSheet(), {
      showClose: false,
      dragBar: false,
      preferType: SheetType.BOTTOM,
      // enableOutsideInteractive: true,
      mode: SheetMode.EMBEDDED,
      detents: [122, 32, 32],
    })
    .padding({ bottom: this.bottomRectHeight })
    .width('100%')
    .height('100%')
  }

  @Builder
  buildBottomSheet() {
    Column()
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Green)
  }

更多关于HarmonyOS 鸿蒙Next 使用半模态转场指定SheetMode为EMBEDDED时如何使用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

参考demo：

@Entry
@Component
struct SheetModeDemo {
@State message: string = 'Hello World';
@State sheetMode: boolean = false
@Builder
buildBottomSheet() {
Column()
.width('100%')
.height('100%')
.backgroundColor(Color.Green)
}

build() {
RelativeContainer() {
Column() {
Button('修改模态框的值')
.onClick(() => {
console.log('模态框的属性值修改了')
this.sheetMode = true
})
}
.width('100%')
.height('100%')
.alignRules({
top: { anchor: '__container__', align: VerticalAlign.Top },
bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
left: { anchor: '__container__', align: HorizontalAlign.Start },
right: { anchor: '__container__', align: HorizontalAlign.End }
});
}
.bindSheet(this.sheetMode, this.buildBottomSheet(), {
showClose: false,
dragBar: false,
preferType: SheetType.BOTTOM,
// enableOutsideInteractive:true,
mode:SheetMode.EMBEDDED,
// mode:SheetMode.OVERLAY,
detents: [122, 32, 32],
onDisappear: () => {
this.sheetMode = false
}
)
.width('100%')
.height('100%')
}

更多关于HarmonyOS 鸿蒙Next 使用半模态转场指定SheetMode为EMBEDDED时如何使用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next系统中，当你使用半模态转场并指定SheetMode为EMBEDDED时，你需要按照以下步骤进行操作：

  1. 定义转场动画：首先，确保你已经定义了适用于半模态转场的动画效果。这些动画效果通常定义在XML文件中，用于描述进入和退出时的动画行为。

  2. 设置SheetMode：在启动半模态页面时，通过Intent或页面启动参数设置SheetMode为EMBEDDED。这通常涉及到在Intent中设置特定的Flag或在页面启动配置中指定该模式。

  3. 实现页面逻辑：在目标页面中，处理与半模态相关的逻辑，如页面布局、事件监听等。由于EMBEDDED模式意味着页面将嵌入在当前页面中，因此你可能需要调整布局以适应这种显示方式。

  4. 处理返回逻辑：半模态页面通常需要处理返回逻辑，以确保用户能够正确地返回到主页面。这可能需要重写页面的返回事件处理函数。

  5. 测试与调试：在实际设备或模拟器上测试你的半模态转场效果，确保动画流畅、页面逻辑正确。

请注意，以上步骤是基于HarmonyOS的一般开发流程，具体实现可能因项目需求和版本差异而有所不同。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部