HarmonyOS 鸿蒙Next中半模态页面内进行跳转，如何让目标页面也以半模态形式显示

HarmonyOS 鸿蒙Next中半模态页面内进行跳转，如何让目标页面也以半模态形式显示

8 回复

学到了

更多关于HarmonyOS 鸿蒙Next中半模态页面内进行跳转，如何让目标页面也以半模态形式显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


拉起半模态页面使用Navigation+新的NavPathStack
，后续跳转页面使用NavDestination，相当于是一个新的页面栈，此页面栈的跳转都会在半模态内进行

可以看一下这个例子：

模态转场是新的界面覆盖在旧的界面上，旧的界面上不消失的一种转场方式。本节将介绍使用bindSheet绑定半模态页面实现模态转场。

步骤1：

打开entry/src/main/ets/pages/ModalTransition.ets文件，创建Builder实现半模态页面，命名为mySheet，并添加Image元素。

步骤2：

给根容器Column设置bindSheet属性，使用状态变量isShowSheet控制半模态页面的显隐，并绑定使用Builder构建的半模态页面。给Image组件添加点击事件，点击时修改isShowSheet的值为true。

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：BV1S4411E7LY/?p=17

项目名称

基本信息

  • 项目状态: 进行中
  • 项目周期: 3个月
  • 团队人数: 10人

项目描述

这是一个关于开发新软件的项目。我们需要确保软件的功能满足用户需求，并且性能稳定。

技术文档

成员介绍

  • 张三 - 项目经理
  • 李四 - 开发负责人
  • 王五 - 测试负责人

这有个参考，正常思路是这样，我以为有特定的组件或者api可以实现上述的效果。在半模态builder的布局里进行if操作。

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-modal-transition#使用if实现模态转场

在HarmonyOS Next中，要让目标页面以半模态形式显示，可以在startAbility时设置窗口模式。使用WindowMode.WINDOW_MODE_FLOATING参数启动目标Ability。示例代码：

let want = {
  deviceId: "",
  bundleName: "com.example.target",
  abilityName: "TargetAbility",
  windowMode: WindowMode.WINDOW_MODE_FLOATING
};
context.startAbility(want).then(() => {
  console.log('startAbility success');
}).catch((err) => {
  console.error('startAbility failed: ' + JSON.stringify(err));
});

目标Ability需在module.json5中配置supportWindowMode: ["floating"]。

在HarmonyOS Next中，要实现半模态页面跳转后目标页面也保持半模态显示，可以通过以下方式实现：

  1. 使用present方法进行页面跳转：
router.pushUrl({
  url: 'pages/TargetPage',
  presentationStyle: PresentationStyle.FORM_SHEET // 保持半模态样式
})
  1. 确保目标页面配置了半模态样式： 在目标页面的aboutToAppear或onPageShow生命周期中设置：
windowClass: 'formSheetWindow',
windowStyle: {
  height: '50%',
  position: 'bottom'
}
  1. 如果使用自定义弹窗样式，可以在build函数中设置：
@CustomDialog
struct TargetPage {
  build() {
    Column() {
      // 页面内容
    }
    .height('50%')
    .width('100%')
  }
}

注意：确保跳转前后页面样式一致，避免高度突变影响用户体验。

回到顶部