开天辟地 HarmonyOS(鸿蒙) - 卡片: AddFormMenuItem(在应用内添加卡片)

源码 https://github.com/webabcd/HarmonyDemo
作者 webabcd

开天辟地 HarmonyOS(鸿蒙) - 卡片: AddFormMenuItem(在应用内添加卡片)

示例如下:

pages\widget\AddFormMenuItemDemo.ets

/*
 * AddFormMenuItem - 在应用内添加卡片
 *   AddFormMenuItem 作为 Menu 的子组件,可以实现在应用内添加卡片
 *
 * 注:关于卡片的基础请参见 StaticWidgetDemo.ets 和 DynamicWidgetDemo.ets
 */

import { AddFormMenuItem } from '@kit.ArkUI';
import { formBindingData } from '@kit.FormKit';
import { Helper } from '../../utils/Helper';
import { TitleBar } from '../TitleBar';

@Entry
@Component
struct AddFormMenuItemDemo {

  @State message: string = '';
  private componentId: string = 'componentId_123';

  /*
   * AddFormMenuItem - 作为 Menu 的子组件,可以实现在应用内添加卡片(关于 Menu 请参见 /component/flyout/MenuDemo.ets 中的相关说明)
   *   want - 卡片的 Want 信息
   *   componentId - 触发了添加卡片行为的组件的 id,以便系统根据该组件的位置做一些添加卡片的动画效果
   *   options - 选项(一个 AddFormOptions 对象)
   *     formBindingData - 需要传递给卡片的数据
   *     callback - 添加卡片完成后的回调
   *       error - 异常信息,如果 error.code 为 0 则代表添加卡片成功
   *       formId - 添加的卡片的 id
   *     style - 菜单样式
   *       options - 一个 MenuItemOptions 对象(请参见 /component/flyout/MenuDemo.ets 中的相关说明)
   */
  @Builder myMenu() {
    Menu() {
      AddFormMenuItem(
        {
          bundleName: 'com.webabcd.harmonydemo', // 需要添加的卡片的所属的 bundle 的名称
          abilityName: 'com.webabcd.harmonydemo.EntryFormAbility', // 需要添加的卡片的所属的 extension ability 的名称
          parameters: {
            'ohos.extra.param.key.module_name': 'entry', // 需要添加的卡片的所属的 module 的名称
            'ohos.extra.param.key.form_name': 'static widget', // 需要添加的卡片的名称(本例是在 src/main/resources/profile/form_config.json 中配置的)
            'ohos.extra.param.key.form_dimension': 2, // 需要添加的卡片的规格(本例是在 src/main/resources/profile/form_config.json 中配置的)
            // 注:卡片的规格(1代表1*2, 2代表2*2, 3代表2*4, 4代表4*4, 7代表6*4)
          },
        },
        this.componentId,
        {
          formBindingData: formBindingData.createFormBindingData({
            'content': Helper.getTimestampString() // 卡片中可以通过 @LocalStorageProp('content') 引用此值
          }),
          callback: (error, formId) => {
            this.message = `添加卡片完成 error:${JSON.stringify(error)}, formId:${formId}`
          },
          style: {
             options: {
               startIcon: $r("app.media.ic_settings"),
               content: "添加卡片 1",
             }
          }
        }
      )

      AddFormMenuItem(
        {
          bundleName: 'com.webabcd.harmonydemo',
          abilityName: 'com.webabcd.harmonydemo.EntryFormAbility',
          parameters: {
            'ohos.extra.param.key.form_dimension': 4,
            'ohos.extra.param.key.form_name': 'static widget',
            'ohos.extra.param.key.module_name': 'entry'
          },
        },
        this.componentId,
        {
          formBindingData: formBindingData.createFormBindingData({
            'content': Helper.getTimestampString()
          }),
          callback: (error, formId) => {
            this.message = `添加卡片完成 error:${JSON.stringify(error)}, formId:${formId}`
          },
          style: {
            options: {
              startIcon: $r("app.media.ic_settings"),
              content: "添加卡片 2",
            }
          }
        }
      )
    }
  }

  build() {
    Column({space:10}) {
      TitleBar()

      Text(this.message)

      Text('长按我').backgroundColor(Color.Orange).fontColor(Color.White).textAlign(TextAlign.Center).width(200).height(100)
        .id(this.componentId)
        .bindContextMenu(this.myMenu, ResponseType.LongPress, {
          placement: Placement.BottomLeft
        })
    }
  }
}

\entry\src\main\resources\base\profile\form_config.json

{
  "forms": [
    {
      "name": "static widget",
      "displayName": "$string:staticWidget_display_name",
      "description": "$string:staticWidget_desc",
      "src": "./ets/widget/pages/StaticWidgetCard.ets",
      "uiSyntax": "arkts",
      "window": {
        "designWidth": 720,
        "autoDesignWidth": true
      },
      "colorMode": "auto",
      "isDynamic": false,
      "isDefault": true,
      "updateEnabled": true,
      "scheduledUpdateTime": "09:30",
      "updateDuration": 1,
      "supportDimensions": [
        "1*2",
        "2*2",
        "2*4",
        "4*4",
        "6*4"
      ],
      "defaultDimension": "2*2"
    },
    {
      "name": "dynamic widget",
      "displayName": "$string:dynamicWidget_display_name",
      "description": "$string:dynamicWidget_desc",
      "src": "./ets/widget/pages/DynamicWidgetCard.ets",
      "uiSyntax": "arkts",
      "window": {
        "designWidth": 720,
        "autoDesignWidth": true
      },
      "colorMode": "auto",
      "isDynamic": true,
      "isDefault": false,
      "updateEnabled": true,
      "scheduledUpdateTime": "09:30",
      "updateDuration": 1,
      "supportDimensions": [
        "4*4"
      ],
      "defaultDimension": "4*4"
    },
    {
      "name": "FormLink",
      "displayName": "$string:formLink_display_name",
      "description": "$string:formLink_desc",
      "src": "./ets/widget/pages/FormLinkCard.ets",
      "uiSyntax": "arkts",
      "window": {
        "designWidth": 720,
        "autoDesignWidth": true
      },
      "colorMode": "auto",
      "isDynamic": false,
      "isDefault": false,
      "updateEnabled": true,
      "scheduledUpdateTime": "09:30",
      "updateDuration": 1,
      "supportDimensions": [
        "4*4"
      ],
      "defaultDimension": "4*4"
    }
  ]
}

源码 https://github.com/webabcd/HarmonyDemo
作者 webabcd

posted @ 2025-04-15 09:51  webabcd  阅读(173)  评论(0)    收藏  举报