Adaptive Cards中Bot Emulator内按钮对齐与样式控制问询

你遇到的Bot Emulator和Adaptive Cards Visualizer按钮布局不一致的问题，其实是因为两者的渲染引擎版本或适配逻辑不同导致的。不过别担心，我们可以通过Adaptive Cards的原生布局组件来精准控制按钮的对齐方式、宽高，还能让两个环境的显示效果统一起来。

方案1：用ActionSet快速控制按钮组布局 #

ActionSet是Adaptive Cards专门用来管理动作按钮的组件，它支持设置整体对齐方式，还能给单个按钮指定宽度。把你的按钮放到ActionSet里，就能轻松实现需求：

修改后的完整代码如下：

{
  "contentType": "application/vnd.microsoft.card.adaptive",
  "content": {
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0",
    "type": "AdaptiveCard",
    "body": [
      { "type": "TextBlock", "text": "Meeting Title", "weight": "bolder" },
      { "type": "TextBlock", "text": "Location", "separator": true, "isSubtle": true, "size": "small" },
      { "type": "TextBlock", "text": "Location", "spacing": "none" },
      { "type": "TextBlock", "text": "Organizer", "separator": true, "isSubtle": true, "size": "small" },
      { "type": "TextBlock", "text": "Organizer Name", "spacing": "none" },
      { "type": "TextBlock", "text": "Start Time", "separator": true, "isSubtle": true, "size": "small" },
      {
        "type": "ColumnSet",
        "spacing": "none",
        "columns": [
          {
            "type": "Column",
            "width": "auto",
            "items": [ { "type": "TextBlock", "text": "05:00 PM", "isSubtle": false, "weight": "bolder" } ]
          },
          {
            "type": "Column",
            "width": "auto",
            "items": [ { "type": "TextBlock", "text": "May 21" } ]
          },
          {
            "type": "Column",
            "width": "auto",
            "items": [ { "type": "TextBlock", "text": "2017", "isSubtle": true, "weight": "bolder" } ]
          }
        ]
      },
      { "type": "TextBlock", "text": "End Time", "separator": true, "isSubtle": true, "size": "small" },
      {
        "type": "ColumnSet",
        "spacing": "none",
        "columns": [
          {
            "type": "Column",
            "width": "auto",
            "items": [ { "type": "TextBlock", "text": "05:30 PM", "isSubtle": false, "weight": "bolder" } ]
          },
          {
            "type": "Column",
            "width": "auto",
            "items": [ { "type": "TextBlock", "text": "May 21" } ]
          },
          {
            "type": "Column",
            "width": "auto",
            "items": [ { "type": "TextBlock", "text": "2017", "isSubtle": true, "weight": "bolder" } ]
          }
        ]
      }
    ],
    "actions": [
      {
        "type": "ActionSet",
        "horizontalAlignment": "Right", // 可选：Left/Center/Right，控制按钮组整体对齐
        "actions": [
          {
            "type": "Action.Submit",
            "title": "Accept",
            "data": { "accept": true },
            "width": "stretch", // 让按钮拉伸填充可用空间，也可以设为"auto"保持自适应宽度
            "spacing": "medium" // 调整按钮之间的间距
          },
          {
            "type": "Action.Submit",
            "title": "Decline",
            "data": { "accept": false },
            "width": "stretch"
          }
        ]
      }
    ]
  }
}

方案2：用ColumnSet实现更精细的自定义布局 #

如果需要对每个按钮的宽度做更精准的控制，比如让“Accept”按钮占比更大，你可以把按钮放到ColumnSet的列中，通过设置列的宽度来实现：

// 把这段代码添加到AdaptiveCard的body数组末尾，替代原来的actions字段
{
  "type": "ColumnSet",
  "horizontalAlignment": "Right",
  "columns": [
    {
      "type": "Column",
      "width": "2", // 按比例分配宽度，比如这个列占2份
      "items": [
        {
          "type": "Action.Submit",
          "title": "Accept",
          "data": { "accept": true }
        }
      ]
    },
    {
      "type": "Column",
      "width": "1", // 这个列占1份，按钮宽度会更小
      "spacing": "medium",
      "items": [
        {
          "type": "Action.Submit",
          "title": "Decline",
          "data": { "accept": false }
        }
      ]
    }
  ]
}

为什么两个环境渲染不一样？ #

简单来说：

• Bot Emulator使用的是适配Bot Framework的Adaptive Cards渲染库，可能版本偏旧或者针对聊天场景做了默认布局调整，导致按钮默认横向堆叠
• Adaptive Cards Visualizer是基于官方最新标准的渲染工具，遵循更严格的Adaptive Cards布局规则，所以按钮默认并排显示

用上面两种方案的布局组件，就能在两个环境中获得一致的显示效果，同时完全满足你对按钮对齐和宽高的自定义需求。

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