如何在Teams Bot Framework中实现Adaptive Card ColumnSet表格行对齐

问题根因 #

你当前使用的是列优先的ColumnSet布局结构：将每一列的所有单元格按行堆叠在同一个Column的items列表中。当某一列的单元格文本过长触发自动折行时，该单元格的行高会大于其他列同位置单元格的高度，最终导致行错位、分隔线错落。

修复方案 #

改用行优先的结构实现表格：每一行对应一个独立的ColumnSet，每个ColumnSet内的Column对应当前行的对应单元格，同时统一配置单元格样式保证行高一致。

修正后的JSON示例 #

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.2",
    "body": [
        // 表头行
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "30",
                    "items": [
                        {
                            "type": "TextBlock",
                            "weight": "bolder",
                            "text": "LMAOOOOOOOOOOOOOOO",
                            "wrap": true,
                            "minHeight": "40px"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "40",
                    "items": [
                        {
                            "type": "TextBlock",
                            "weight": "bolder",
                            "text": "YEEEEEEEEEEEEEEEEEEEE",
                            "wrap": true,
                            "minHeight": "40px"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "20",
                    "items": [
                        {
                            "type": "TextBlock",
                            "weight": "bolder",
                            "text": "Price",
                            "wrap": true,
                            "minHeight": "40px"
                        }
                    ]
                }
            ]
        },
        // 第一行数据
        {
            "type": "ColumnSet",
            "separator": true,
            "columns": [
                {
                    "type": "Column",
                    "width": "30",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Apple",
                            "wrap": true,
                            "minHeight": "32px"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "40",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Fruit",
                            "wrap": true,
                            "minHeight": "32px"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "20",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "2",
                            "wrap": true,
                            "minHeight": "32px"
                        }
                    ]
                }
            ]
        },
        // 第二行数据
        {
            "type": "ColumnSet",
            "separator": true,
            "columns": [
                {
                    "type": "Column",
                    "width": "30",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Kiwi",
                            "wrap": true,
                            "minHeight": "32px"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "40",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Fruit",
                            "wrap": true,
                            "minHeight": "32px"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "20",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "1",
                            "wrap": true,
                            "minHeight": "32px"
                        }
                    ]
                }
            ]
        }
    ]
}

关键配置说明 #

• 给所有TextBlock添加"wrap": true，保证长文本自动折行时不会撑破列宽
• 为同一行的所有单元格TextBlock设置统一的minHeight，避免内容高度不同导致行错位
• 给每个Column设置固定比例/固定宽度的width属性，保证列宽不会随内容自适应偏移
• 行分隔线直接加在对应行的ColumnSet上，分隔线会贯穿整行，不会出现错落问题

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