如何在Adaptive Card内实现可折叠区域？Action.ShowCard位置问题求解

阿华AIGC实验室

2026-5-19

解决Adaptive Card可折叠区域按钮不在底部的方案

我之前也碰到过这个头疼的问题！Adaptive Card原生的Action.ShowCard确实默认把操作按钮统一放在卡片底部，但有几个实用的方案能让折叠/展开按钮和目标内容更贴近，完全自定义布局：

方案1：使用内联ShowCard动作（快速实现）

Adaptive Card的Action.ShowCard支持设置style: "inline"，这个属性能让按钮直接渲染在触发内容的附近，而不是被挤到卡片底部。你可以用ColumnSet把标题文本和展开按钮放在同一行，点击后展开的卡片会出现在这个区域下方，非常直观。

示例代码：

{
  "type": "AdaptiveCard",
  "version": "1.4",
  "body": [
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "width": "auto",
          "items": [
            {
              "type": "TextBlock",
              "text": "点击展开订单详情",
              "weight": "Bolder"
            }
          ]
        },
        {
          "type": "Column",
          "width": "auto",
          "items": [
            {
              "type": "Action.ShowCard",
              "title": "+",
              "style": "inline",
              "card": {
                "type": "AdaptiveCard",
                "body": [
                  {
                    "type": "Container",
                    "items": [
                      {
                        "type": "TextBlock",
                        "text": "订单编号：20240512001"
                      },
                      {
                        "type": "TextBlock",
                        "text": "下单时间：2024-05-12 14:30"
                      }
                    ]
                  }
                ]
              }
            }
          ]
        }
      ]
    }
  ]
}

方案2：利用可见性绑定（高度自定义）

如果你的Adaptive Card版本支持数据绑定（v1.5及以上），这个方案是最优解——通过控制容器的可见性，完全自定义按钮的位置（想放哪里就放哪里）。核心思路是用一个布尔变量标记内容是否可见，再用Action.ToggleVisibility配合Action.SetProperty来切换状态。

示例代码：

{
  "type": "AdaptiveCard",
  "version": "1.5",
  "$data": {
    "isDetailsVisible": false
  },
  "body": [
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "width": "stretch",
          "items": [
            {
              "type": "TextBlock",
              "text": "用户信息",
              "size": "Large",
              "weight": "Bolder"
            }
          ]
        },
        {
          "type": "Column",
          "width": "auto",
          "items": [
            {
              "type": "Action.ToggleVisibility",
              "title": "${isDetailsVisible ? '收起' : '展开'}",
              "targetElements": [
                {
                  "elementId": "userDetailsContainer",
                  "isVisible": "${!isDetailsVisible}"
                }
              ],
              "actions": [
                {
                  "type": "Action.SetProperty",
                  "target": "isDetailsVisible",
                  "value": "${!isDetailsVisible}"
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "type": "Container",
      "id": "userDetailsContainer",
      "isVisible": "${isDetailsVisible}",
      "items": [
        {
          "type": "TextBlock",
          "text": "姓名：张三"
        },
        {
          "type": "TextBlock",
          "text": "邮箱：zhangsan@example.com"
        }
      ]
    }
  ]
}

这个方案的优势在于：按钮可以放在卡片的任何位置（比如标题右侧、内容上方等），展开/收起的逻辑完全由你掌控，而且不会出现Action.ShowCard那种“嵌套卡片”的视觉效果，更像是原生的折叠面板。