HarmonyOS鸿蒙Next中如何实现长按桌面卡片点击编辑后直接拉起APP内的卡片编辑页面

HarmonyOS鸿蒙Next中如何实现长按桌面卡片点击编辑后直接拉起APP内的卡片编辑页面

现在在做一款桌面卡片的APP，我现在想在长按桌面卡片，在弹出的菜单中点击编辑后拉起APP，进入APP内的卡片编辑页面，但现在实现上总是跳不过拉起系统自带的半模态卡片编辑弹窗，有什么办法能实现我希望的效果吗

6 回复

可参考 https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/-ui-widget-event-formeditextensionability-overview#%E5%85%A8%E5%B1%8F%E5%8D%A1%E7%89%87%E7%BC%96%E8%BE%91 ，

长按卡片弹出菜单。桌面通过formConfigAbility字段判断卡片是否支持卡片编辑能力来决定是否显示编辑按钮。

点击“编辑”菜单项进入全屏编辑页。桌面通过formConfigAbility字段的信息拉起卡片编辑页。

点击“切换到：上海”按钮编辑卡片内容。提供方通过updateForm接口去更新编辑卡片的信息。但官网默认是编辑了一个FormEditIndex.ets，一个卡片编辑页面，在新增EntryEditAbility里配置跳转路径，只需在新增的EntryEditAbility里配置跳转路径为自己app里的编辑页面就可以成功跳转了

更多关于HarmonyOS鸿蒙Next中如何实现长按桌面卡片点击编辑后直接拉起APP内的卡片编辑页面的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


蹲

蹲

这里要区分两种卡片编辑方式。

如果你配置的是 FormEditExtensionAbility，桌面长按卡片点“编辑”后，会进入系统提供的半模态卡片编辑容器，这个半模态本身就是该能力的交互形态，不能简单理解为再从里面“跳过”到普通 APP 页面。

如果你的目标是点击“编辑”后直接进入应用内的完整编辑页，建议按官方“全屏卡片编辑”的方式做：1. 新增一个用于编辑的 UIAbility，例如 FormEditAbility；2. 在 form_config.json 的 formConfigAbility 配置为 ability://FormEditAbility；3. 桌面拉起该 Ability 时，会通过 Want parameters 带入被编辑的 formId；4. 在编辑页保存用户配置后，用 formProvider.updateForm(formId, data) 更新对应卡片。

如果仍使用半模态方案，复杂编辑可以在 FormEditExtensionAbility 内通过 startSecondPage 进入二级编辑页，但它仍属于卡片编辑流程。要做你说的“拉起 APP 内卡片编辑页面”，更贴近的方案是全屏卡片编辑 + UIAbility。

在form.json中设置"editable": true，并配置"editAbility": "com.example.app.EditCardAbility"。当用户长按卡片点击编辑时，系统自动拉起EditCardAbility，在该Ability的onStart()中接收参数并显示编辑页面即可。

在HarmonyOS鸿蒙Next中，桌面卡片长按菜单的“编辑”功能默认会拉起系统半模态编辑弹窗，无法直接替换为应用内自定义页面。要实现自定义编辑流程，推荐方案：

  • 禁用系统编辑弹窗：在卡片的配置文件form_config.json中，将editModeEnabled设为false，关闭系统菜单中的编辑选项。
  • 在卡片UI上添加自定义编辑入口：在卡片的js布局中放置一个编辑按钮或区域，点击时通过router.push跳转到应用内指定的编辑页面。

这样既避免了系统编辑弹窗，又实现了完全自定义的编辑体验。

配置示例：

// form_config.json
"forms": [{
  "isDefault": true,
  "editModeEnabled": false,
  ...
}]

卡片交互代码（卡片js）：

// index.js
import router from '@ohos.router';

export default {
  data: {},
  onEditClick() {
    router.push({
      uri: 'pages/EditPage' // 应用内编辑页面路径
    });
  }
}

在卡片的hml中绑定事件例如<div onclick="onEditClick">编辑卡片</div>。用户点击该区域即会跳转到应用内自定义页面，完成卡片参数更新后，可使用formProvider.updateForm刷新卡片内容。

回到顶部