团队中的自适应卡片，无法让按钮居中对齐

Question

我正在创建一个有两个按钮的自适应卡片。这两个按钮需要居中对齐，中间留有一点间距。当我通过 App Studio Card 编辑器设计卡片时，我得到了我想要的结果。但是，当我单击“将此卡片发送给我”时，卡片显示与预览显示的不同。参见图片 #1 和 #2。我尝试了以下操作：

使用包含两列的列集，其中包含文本块和所需的操作。这确实部分实现了它，除了列只是带有文本而不是按钮的列，并且为了外观和感觉我想要实际的按钮。
创建了一个包含两个动作的 Actionset 并尝试添加一个名为“horizontalAlignment”的属性，它似乎是自适应卡片设计器指定的一个元素。参见图片 #3 然而，当我使用自适应卡片设计器为动作集生成的完全相同 json 时，horizontalAlignment 在卡片编辑器中显示为不存在的动作集属性。见图 #4。

关于如何实现我的目标有什么建议吗？

Desired result

Actual result

Adaptive Card designer Actionset

Card editor "horizontalAlignment" property

`

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.3",
  "body": [
    {
      "type": "Container",
      "items": [
        {
          "type": "ColumnSet",
          "columns": [
            {
              "type": "Column",
              "width": "auto",
              "items": [
                {
                  "size": "Medium",
                  "style": "default",
                  "type": "Image",
                  "url": "https://www.emerce.nl/content/uploads/2020/04/1200px-Microsoft_Office_Teams_2018%E2%80%93present.svg_.png"
                }
              ]
            },
            {
              "type": "Column",
              "width": "stretch",
              "items": [
                {
                  "type": "TextBlock",
                  "text": "Microsoft Teams",
                  "weight": "bolder",
                  "wrap": true,
                  "size": "extraLarge",
                  "height": "automatic"
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "type": "Container",
      "items": [
        {
          "type": "TextBlock",
          "text": "Informatie Teams",
          "weight": "Bolder",
          "wrap": true
        },
        {
          "type": "TextBlock",
          "text": "Microsoft Teams is een applicatie uit de Microsoft 365 suite, waarin je met jouw team kan communiceren en samenwerken. In onderstaande video krijg je een korte introductie van de mogelijkheden in Microsoft Teams. Microsoft Teams is ook beschikbaar op je mobiel of tablet. Wil je meer weten over een specifiek onderwerp? Vraag het mij! Ik zoek dan een video op, die dieper ingaat op het betreffende onderwerp.",
          "wrap": true
        }
      ]
    }
  ],
  "actions": [
    {
      "type": "Action.OpenUrl",
      "title": "Meer Info",
      "url": "https://support.microsoft.com/nl-nl/office/welkom-bij-microsoft-teams-b98d533f-118e-4bae-bf44-3df2470c2b12"
    },
    {
    "type": "Action.Submit",
    "title": "Feedback",
      "data": {
        "msteams": {
            "type": "messageBack",
            "displayText": "I clicked this button",
            "text": "text to bots",
            "value": "{\"bfKey\": \"bfVal\", \"conflictKey\": \"from value\"}"
          } 
        }
    }
  ]
}

`

Answer 1

目前在团队自适应卡片中无法对齐按钮。我们建议您提出 Teams UserVoice here 如果这需要被视为未来的请求。

Answer 2

您实际上可以使用 ColumnSet 和 ActionSet:

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Some text",
                            "wrap": true,
                            "weight": "Bolder"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Some text",
                            "wrap": true,
                            "weight": "Bolder"
                        }
                    ]
                }
            ]
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "ActionSet",
                            "actions": [
                                {
                                    "type": "Action.Submit",
                                    "title": "Yes"
                                }
                            ]
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "ActionSet",
                            "actions": [
                                {
                                    "type": "Action.Submit",
                                    "title": "NO"
                                }
                            ]
                        }
                    ],
                    "backgroundImage": {
                        "horizontalAlignment": "Right"
                    }
                }
            ]
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "ActionSet",
                            "actions": [
                                {
                                    "type": "Action.Submit",
                                    "title": "Confirm"
                                }
                            ]
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "ActionSet",
                            "actions": [
                                {
                                    "type": "Action.Submit",
                                    "title": "Cancel"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2"
}

结果：

团队中的自适应卡片，无法让按钮居中对齐

Adaptive cards in teams, can't get buttons to align in the center

json

microsoft-teams

adaptive-cards