Teams频道预览模式下Adaptive Card无法正常显示问题咨询

问题根因 #

1. 版本兼容性差异：Teams频道的预览模式默认仅支持Adaptive Card v1.2及更低版本，你代码中指定的version: "1.3"超出了预览渲染器的支持范围；而聊天场景使用的是更新版本的渲染引擎，因此可以正常解析1.3版本的卡片。
2. 布局属性冲突：你为多层嵌套的Column、ColumnSet都添加了height: "stretch"属性，频道预览模式的布局引擎计算高度时会触发溢出判定，直接将卡片识别为无可见内容。
3. 预览阶段变量加载限制：频道预览模式下不会提前初始化卡片内的动态变量，你代码中动态拼接的"Entity Type:" +type+ " not supported"在预览阶段可能因type变量未赋值导致渲染中断，发送后变量完成渲染才会正常显示。

解决步骤 #

• 将Adaptive Card的version字段从1.3修改为1.2，匹配预览模式的渲染器版本要求
• 移除非必要的height: "stretch"属性，同时简化过度嵌套的ColumnSet结构，你当前仅需展示单行文本，无需嵌套两层ColumnSet，直接使用单层TextBlock即可最大化兼容性
• 给动态文本添加判空逻辑，避免变量未赋值导致的渲染异常

兼容示例代码 #

import { Attachment, CardFactory } from "botbuilder";

export class CustomerResultCard {
    public static getCard(type: string): Attachment {        
        const card =  CardFactory.adaptiveCard(
            {
                "type": "AdaptiveCard",
                "body": [
                    {
                        "type": "TextBlock",
                        "size": "Large",
                        "weight": "Bolder",
                        "text": `Entity Type: ${type || "Unknown"} not supported`
                    }
                ],
                "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
                "version": "1.2"
            }
        );
        return card;
    }
}

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