有没有一种方法可以使用列集为团队的自适应卡片正确对齐图像和文本？

Question

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

为了显示联系人信息（例如电话号码），我目前使用的是第一列，第一列为图片，第二列为电话号码的列集。

团队中的情况如下：

在线示例显示：

在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

如果要将语音添加到需要更多最新Adaptive Card支持的客户列表中，请随时在GitHub page或feedback forum上发布。

选项2

您的图片顶部上方留有空白，这似乎加剧了该问题：

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

选项3

您可以在文本上方加上一个TextBlock（带空格），将文本向下推一点：

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

这是一场赌博，因为它不一定在所有客户端（台式机还是移动设备等）中看起来都正确

选项4

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