有没有办法使用列集为 Teams 正确对齐自适应卡片中的图像和文本？

Question

对于我们创建的团队机器人，我们使用自适应卡片来显示联系人的搜索结果和信息。出现的问题是样式不正确。当我们尝试将图像与某些文本对齐时，它并没有正确对齐。当我尝试使用 "Microsoft Teams - Light" 设置的在线设计器时，它看起来很完美，但在具有相同 json 的 Teams 中，对齐方式并不相同。欢迎任何解决此问题的有用技巧。

为了显示联系信息，例如 phone 号码，我目前使用的列集的第一列是图像，第二列是 phone 号码。

在团队中看起来像：

在线示例显示：

phone号码的图像在 Teams 中要大得多，文本未正确对齐，而在线演示表明它应该可以工作。下面用的json.

JSON 使用：

{
  "type": "ColumnSet",
  "columns": [
    {
      "type": "Column",
      "width": "auto",
      "items": [
        {
          "type": "Image",
          "url": "https://****/Assets/Icons/WorkPhone.png"
        }
      ]
    },
    {
      "type": "Column",
      "width": "stretch",
      "items": [
        {
          "type": "TextBlock",
          "text": "+31612345678"
        }
      ],
      "verticalContentAlignment": "center"
    }
  ],
  "selectAction": {
    "type": "Action.Submit",
    "data": {
      "PhoneNumber": "+31612345678",
      "Action": "CallSearchResult"
    },
    "title": "callsearchresult"
  }
}

似乎 Microsoft Teams 渲染不同或样式错误。任何帮助或解释将不胜感激。提前致谢。

Answer 1

遗憾的是，Microsoft Teams 目前仅支持 Adaptive Cards 1.0，verticalContentAlignment 是在 1.1 中引入的。 Adaptive Cards 设计器不包括指定版本或仅包括所选平台中可用的元素和属性的功能。您对此无能为力，但这里有一些想法。

选项 1

如果您想将自己的声音添加到要求更多 up-to-date 自适应卡支持的客户列表中，请随时在 GitHub page or the feedback forum 上 post。

选项 2

您的图片顶部 space 为空，看起来问题更严重了：

如果裁剪图像，它可能看起来会好一些。

选项 3

您可以通过在其上方包含一个 TextBlock（白色 space）来将文本向下推一点：

{
  "type": "TextBlock",
  "text": " "
},
{
  "type": "TextBlock",
  "text": "+31612345678"
}

这有点像赌博，因为它不一定在所有客户端（桌面与移动设备等）中看起来都是正确的

选项 4

如果您现在真的想获得正确的外观，您可以考虑将 phone 数字烘焙到图像中，这样您就不需要文本块甚至列集。我想它不能被 select 编辑为文本并被复制是可以的，因为看起来您已经在使用 select 操作，该操作会自动将号码发送给机器人。事实上，如果您正在这样做，那么最好不要让文本 select 可用，因为用户尝试 select 文本并意外单击按钮可能会很烦人。

有没有办法使用列集为 Teams 正确对齐自适应卡片中的图像和文本？

Is there a way to properly align an image and text in adaptive card for Teams using columnset?

json

microsoft-teams

adaptive-cards

选项 1

选项 2

选项 3

选项 4