HarmonyOS 鸿蒙Next半模态弹框(bindSheet)在折叠屏展开状态和平板上效果缺失

发布于 1周前 作者 sinazl 来自 鸿蒙OS

HarmonyOS 鸿蒙Next半模态弹框(bindSheet)在折叠屏展开状态和平板上效果缺失

半模态弹框(bindSheet)在折叠屏展开状态和平板上没有了半模态的效果,不知道正常不?如果是正常的,我们需要修改一个我们的设计,或者在折叠屏展开状态和平板上不展示。

3 回复

想让半模态在折叠屏和平板上正常展开,应将半模态类型设置为底部弹窗( preferType : SheetType.BOTTOM )。 参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-sheet-transition-V5#sheettype11枚举说明 

demo如下

// xxx.ets
[@Entry](/user/Entry)
[@Component](/user/Component)
struct SheetTransitionExample {
  [@State](/user/State) isShow:boolean = false
  [@Builder](/user/Builder) myBuilder() {
    Column() {
      Button("content1")
        .margin(10)
        .fontSize(20)
  Button(<span class="hljs-string"><span class="hljs-string">"content2"</span></span>)
    .margin(<span class="hljs-number"><span class="hljs-number">10</span></span>)
    .fontSize(<span class="hljs-number"><span class="hljs-number">20</span></span>)
}
.width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)

}

build() { Column() { Button(“transition modal 1”) .onClick(() => { this.isShow = true }) .fontSize(20) .margin(10) .bindSheet($$this.isShow, this.myBuilder(),{ detents:[SheetSize.MEDIUM,SheetSize.LARGE,200], backgroundColor:Color.Gray, blurStyle:BlurStyle.Thick, showClose:true, title:{title:“title”, subtitle:“subtitle”}, // 将弹窗类型设置为底部弹窗 preferType: SheetType.BOTTOM, shouldDismiss:((sheetDismiss: SheetDismiss)=> { console.log(“bind sheet shouldDismiss”) sheetDismiss.dismiss() }) }) } .backgroundColor(Color.Green) .justifyContent(FlexAlign.Start) .width(‘100%’) .height(‘100%’) } }

让我们说中文?

针对您提到的HarmonyOS 鸿蒙Next半模态弹框(bindSheet)在折叠屏展开状态和平板上效果缺失的问题,这可能是由于系统对半模态弹框的适配问题或折叠屏、平板设备的特殊性导致的。

首先,请确保您的开发环境为最新的HarmonyOS NEXT Developer Beta版本,并检查您的API版本是否支持bindSheet属性的所有功能。由于不同设备的屏幕尺寸和比例差异较大,系统可能需要额外的适配才能确保半模态弹框在不同设备上的显示效果一致。

其次,您可以尝试调整bindSheet属性的参数,如height、backgroundColor、blurStyle等,以查看是否能改善在折叠屏和平板上的显示效果。同时,检查是否有针对折叠屏和平板设备的特定适配规则或指南,以确保您的应用能够充分利用这些设备的特性。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html。他们将能够提供更具体的帮助和指导,以解决您遇到的问题。

回到顶部