Adaptive Cards中如何按参考图样式展示带图的多订单商品条目

核心实现思路 #

采用嵌套ColumnSet的双列布局结构，每个商品单独占一行布局单元，固定左侧商品图宽度、右侧信息区自适应拉伸，和常见电商订单商品展示逻辑完全匹配。

具体实现步骤 #

• 优先选择1.4及以上版本的Adaptive Card schema，避免低版本出现布局溢出、属性不兼容问题
• 商品列表区域外层包裹Container组件，设置spacing: "medium"、separator: true，和订单头部、结算信息等其他模块做视觉区隔
• 单个商品条目用ColumnSet实现双列结构：
  • 左侧列width设为auto，内部嵌入Image组件，固定size: "small"或自定义宽高为64px，设置aspectRatio: "1:1"避免图片拉伸变形，horizontalAlignment设为left
  • 右侧列width设为stretch，内部堆叠TextBlock承载商品信息：从上到下依次为商品名称（设置weight: "bolder"、size: "medium"突出展示）、商品规格参数、单价、购买数量，行间距统一设为small
• 不同商品条目之间设置separator: true的细分割线，spacing设为small，视觉上清晰区分不同商品

参考实现代码 #

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card-1.4.json",
  "type": "AdaptiveCard",
  "version": "1.4",
  "body": [
    {
      "type": "TextBlock",
      "text": "订单 #20240520001",
      "size": "large",
      "weight": "bolder"
    },
    {
      "type": "Container",
      "spacing": "medium",
      "separator": true,
      "items": [
        // 第一个商品
        {
          "type": "ColumnSet",
          "spacing": "small",
          "separator": false,
          "columns": [
            {
              "type": "Column",
              "width": "auto",
              "items": [
                {
                  "type": "Image",
                  "url": "商品图地址",
                  "size": "small",
                  "aspectRatio": "1:1",
                  "style": "default"
                }
              ]
            },
            {
              "type": "Column",
              "width": "stretch",
              "spacing": "medium",
              "items": [
                {
                  "type": "TextBlock",
                  "text": "纯棉白色T恤",
                  "weight": "bolder",
                  "size": "medium",
                  "wrap": true
                },
                {
                  "type": "TextBlock",
                  "text": "尺码：L | 颜色：米白",
                  "size": "small",
                  "isSubtle": true,
                  "wrap": true
                },
                {
                  "type": "ColumnSet",
                  "columns": [
                    {
                      "type": "Column",
                      "width": "stretch",
                      "items": [
                        {
                          "type": "TextBlock",
                          "text": "¥99.00",
                          "weight": "bolder"
                        }
                      ]
                    },
                    {
                      "type": "Column",
                      "width": "auto",
                      "items": [
                        {
                          "type": "TextBlock",
                          "text": "x1",
                          "isSubtle": true
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        },
        // 第二个商品，复制上述结构替换内容即可
        {
          "type": "ColumnSet",
          "spacing": "small",
          "separator": true,
          "columns": [
            {
              "type": "Column",
              "width": "auto",
              "items": [
                {
                  "type": "Image",
                  "url": "商品图地址",
                  "size": "small",
                  "aspectRatio": "1:1",
                  "style": "default"
                }
              ]
            },
            {
              "type": "Column",
              "width": "stretch",
              "spacing": "medium",
              "items": [
                {
                  "type": "TextBlock",
                  "text": "牛仔直筒裤",
                  "weight": "bolder",
                  "size": "medium",
                  "wrap": true
                },
                {
                  "type": "TextBlock",
                  "text": "尺码：30 | 颜色：深蓝",
                  "size": "small",
                  "isSubtle": true,
                  "wrap": true
                },
                {
                  "type": "ColumnSet",
                  "columns": [
                    {
                      "type": "Column",
                      "width": "stretch",
                      "items": [
                        {
                          "type": "TextBlock",
                          "text": "¥159.00",
                          "weight": "bolder"
                        }
                      ]
                    },
                    {
                      "type": "Column",
                      "width": "auto",
                      "items": [
                        {
                          "type": "TextBlock",
                          "text": "x1",
                          "isSubtle": true
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

注意事项 #

• 若商品数量超过3条，可在外层容器加滚动配置，或默认展示前3条、剩余商品折叠展示，避免卡片过长影响体验
• 所有商品图提前统一裁剪为1:1比例，配合aspectRatio属性可完全避免图片拉伸、布局错位问题

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