如何将Adaptive Card的Action操作图标设置为右对齐？

我想实现Action.OpenUrl的图标与文本右对齐的效果，预期预览效果如下：

当前使用的卡片布局代码：

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "size": "Medium",
            "weight": "Bolder",
            "text": "Publish Adaptive Card Schema"
        },
        {
            "type": "TextBlock",
            "text": "Description",
            "wrap": true
        }
    ],
    "actions": [
        {
            "type": "Action.OpenUrl",
            "title": "View",
            "url": "https://adaptivecards.io",
            "iconUrl": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAEoSURBVDhPpZNNioNAEIWfOgjB6DLXMKusgu4jrsQcILgxp4pIwHiAuPPnGi68gRtFyK4nrTVJZsaYCfNBQ7/q7lfw6BLYFfyD3iCOYyRJAkEQqPya+XwO13UHg/P5jKIo6OhvnE4nbLfbwYBqb+H7PhRFgUj6bS6XC0RRxAdpTOWgaRpkWYZlWTBNk6oDNwMeymKxIHVHVVWEYYiyLPv9U4PNZtOvn/CAj8cjVqsVxuKazOBwOMC2bURRhPV6jbZt6eTOU4MgCOB5HrIsg67rqOt6NJ9RA955t9shTVMYhtHXnn2yXwaPnb8eT/HNYKzzK24G/PFUZx5g13WkHqBZYJIkses8cDkKv5PnOSnGHMdh+/2e9bNQVRWapsFyuSTb1/BfO5vN8AmAXKcYkYfiaAAAAABJRU5ErkJggg=="
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5"
}

示例数据：

{
    "title": "Publish Adaptive Card Schema",
    "description": "Description",
    "viewUrl": "https://adaptivecards.io"
}

根据Microsoft Teams商店审核指南，该右对齐效果是可行的，官方示例如下：

实现方案 #

卡片自带的actions区域默认左对齐，无法直接设置对齐方式，需通过自定义布局实现：

使用ColumnSet+ActionSet组合，将按钮放在右侧列中：

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "size": "Medium",
            "weight": "Bolder",
            "text": "${title}"
        },
        {
            "type": "TextBlock",
            "text": "${description}",
            "wrap": true
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch"
                },
                {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                        {
                            "type": "ActionSet",
                            "actions": [
                                {
                                    "type": "Action.OpenUrl",
                                    "title": "View",
                                    "url": "${viewUrl}",
                                    "iconUrl": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAEoSURBVDhPpZNNioNAEIWfOgjB6DLXMKusgu4jrsQcILgxp4pIwHiAuPPnGi68gRtFyK4nrTVJZsaYCfNBQ7/q7lfw6BLYFfyD3iCOYyRJAkEQqPya+XwO13UHg/P5jKIo6OhvnE4nbLfbwYBqb+H7PhRFgUj6bS6XC0RRxAdpTOWgaRpkWYZlWTBNk6oDNwMeymKxIHVHVVWEYYiyLPv9U4PNZtOvn/CAj8cjVqsVxuKazOBwOMC2bURRhPV6jbZt6eTOU4MgCOB5HrIsg67rqOt6NJ9RA955t9shTVMYhtHXnn2yXwaPnb8eT/HNYKzzK24G/PFUZx5g13WkHqBZYJIkses8cDkKv5PnOSnGHMdh+/2e9bNQVRWapsFyuSTb1/BfO5vN8AmAXKcYkYfiaAAAAABJRU5ErkJggg=="
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5"
}

原理说明

• 第一列宽度设为stretch，占满卡片剩余水平空间，将按钮列挤到右侧
• 第二列宽度设为auto，仅占用按钮所需的空间
• 通过ActionSet包裹按钮，确保在列中正常渲染，实现图标与文本整体右对齐

内容的提问来源于stack exchange，提问作者Mark Nadig