目录

如何实现拖拽卡片调整大小

问题现象

应用内包含不同大小的卡片，卡片之间如何通过拖拽实现大小调整？

背景知识

解决方案

场景一：单张卡片不同外观规格的调整。

  1. 创建卡片。
  2. 修改src/main/resources/base/profile/form_config.json配置文件的supportDimensions字段。对于单张卡片的场景，需要声明该卡片支持多种外观规格。例如："supportDimensions": ["2*4","4*4"]。
  3. 补充src/main/resources/base/profile/form_config.json配置文件的resizable字段。该字段默认缺省，需配置"resizable": true。

完整配置文件为：

{
  "forms": [
    {
      "name": "widget",
      "displayName": "$string:widget_display_name",
      "description": "$string:widget_desc",
      "src": "./ets/widget/pages/WidgetCard.ets",
      "uiSyntax": "arkts",
      "window": {
        "designWidth": 720,
        "autoDesignWidth": true
      },
      "colorMode": "auto",
      "isDynamic": true,
      "isDefault": true,
      "updateEnabled": false,
      "scheduledUpdateTime": "10:30",
      "updateDuration": 1,
      "defaultDimension": "2*4",
      "resizable": true,
      "supportDimensions": [
        "2*4",
        "4*4"
      ]
    }
  ]
}

场景二：多张卡片不同外观规格的调整。

  1. 创建多张卡片。
  2. 修改src/main/resources/base/profile/form_config.json配置文件的supportDimensions字段。对于多张卡片的场景，需要分别声明卡片支持外观规格。例如：A卡片中声明"supportDimensions": ["2*2"]，B卡片中声明"supportDimensions": ["2*4"]。
  3. 补充src/main/resources/base/profile/form_config.json配置文件的resizable字段。该字段默认缺省，需配置"resizable": true。
  4. 补充src/main/resources/base/profile/form_config.json配置文件的groupId字段。该字段默认缺省，需要分别声明卡片共同id。例如：A卡片中声明"groupId": "0"，B卡片中也需要声明"groupId": "0"。

完整配置文件为：

{
  "forms": [
    {
      "name": "widgetA",
      "displayName": "$string:widgetA_display_name",
      "description": "$string:widgetA_desc",
      "src": "./ets/widgeta/pages/WidgetACard.ets",
      "uiSyntax": "arkts",
      "window": {
        "designWidth": 720,
        "autoDesignWidth": true
      },
      "colorMode": "auto",
      "isDynamic": true,
      "isDefault": true,
      "updateEnabled": false,
      "scheduledUpdateTime": "10:30",
      "updateDuration": 1,
      "defaultDimension": "2*2",
      "resizable": true,
      "groupId": "0",
      "supportDimensions": [
        "2*2"
      ]
    },
    {
      "name": "widgetB",
      "displayName": "$string:widgetB_display_name",
      "description": "$string:widgetB_desc",
      "src": "./ets/widgetb/pages/WidgetBCard.ets",
      "uiSyntax": "arkts",
      "window": {
        "designWidth": 720,
        "autoDesignWidth": true
      },
      "colorMode": "auto",
      "isDynamic": true,
      "isDefault": false,
      "updateEnabled": false,
      "scheduledUpdateTime": "10:30",
      "updateDuration": 1,
      "defaultDimension": "2*4",
      "resizable": true,
      "groupId": "0",
      "supportDimensions": [
        "2*4"
      ]
    }
  ]
}

常见FAQ

Q：配置了单张卡片不同外观规格，拖拽卡片调整不生效的原因可能是什么？

A：对于需要拖拽调整大小的卡片，拖拽间两种外观规格需要保持连续。比如：2*4与4*4卡片之间实现拖拽调整，而2*2与4*4卡片之间则不能。

Q：配置多张卡片不同外观规格的调整，拖拽的优先级是什么？

A：

  1. 如果当前卡片supportDimensions字段配置了多个规格，则在同一张卡片之间调整大小。卡片A的resizable配置为true，supportDimension为2*2、2*4，支持卡片A的两个尺寸之间调整大小。
  2. 如果当前卡片supportDimensions字段配置了单个规格，则会将同一个应用中与当前卡片配置相同groupId卡片supportDimensions字段中第一个外观规格纳入到可调整范围中。例如：卡片A的groupId配置为'1'，resizable配置为true，supportDimension为1*2。卡片B的groupId配置为'1'，resizable配置为true，supportDimension为2*2、2*4、4*4。卡片A可以调整到卡片B的2*2，卡片B只支持在B卡片支持的三个尺寸之间调整大小，无法调整为卡片A。