Android与iOS端Adaptive Cards渲染行为不一致问题排查

问题背景 #

在Android和iOS设备上展示Adaptive Cards时出现跨端渲染差异：

• 初始状态下Android端文本截断，添加wrap: true属性后，卡片出现对齐异常（Android端对齐异常示意图）
• 改用ColumnSet将条目按行展示后，Android端恢复正常，但iOS端出现文本截断（iOS端文本截断示意图）

可能原因 #

1. 属性兼容性差异：不同平台的Adaptive Cards渲染引擎对wrap属性、Column的width解析逻辑不一致。iOS端对设置了width: "stretch"的Column内的TextBlock，结合wrap属性时容易出现计算错误，导致文本截断。
2. 版本兼容性：使用的Adaptive Card版本为1.0，属于早期版本，跨端渲染的一致性支持不足，新版本（如1.5+）修复了大量此类兼容性问题。
3. 布局规则不统一：部分Column未明确设置宽度，混合无宽度与stretch宽度的Column，导致渲染引擎在不同平台的布局计算逻辑冲突。

修复方案 #

1. 统一Column宽度规则 #

给每个ColumnSet的左右列明确设置宽度，左侧列用width: "auto"（自适应内容宽度），右侧列用width: "stretch"（占据剩余空间），确保两端渲染时布局计算逻辑一致。

2. 升级Adaptive Card版本 #

将卡片版本从1.0升级到1.5或更高版本，新版本对跨端渲染的兼容性做了大幅优化。

3. 明确TextBlock的换行与行数控制 #

给所有需要换行的TextBlock同时设置wrap: true和maxLines（如maxLines: 2），避免不同平台对换行的默认处理差异。

优化后的卡片模板示例 #

{
    "contentType": "application/vnd.microsoft.card.adaptive",
    "content": {
        "type": "AdaptiveCard",
        "version": "1.5",
        "body": [
            {
                "type": "ColumnSet",
                "columns": [
                    {
                        "type": "Column",
                        "width": "auto",
                        "items": [
                            {
                                "type": "TextBlock",
                                "size": "medium",
                                "weight": "bolder",
                                "text": "August 2022 bill",
                                "wrap": true,
                                "maxLines": 2
                            }
                        ]
                    },
                    {
                        "type": "Column",
                        "width": "stretch",
                        "items": [
                            {
                                "type": "TextBlock",
                                "size": "medium",
                                "weight": "bolder",
                                "text": "£83.46",
                                "horizontalAlignment": "right",
                                "wrap": true
                            }
                        ]
                    }
                ]
            },
            {
                "type": "TextBlock",
                "size": "small",
                "text": "From 28/07/2022 to 29/08/2022",
                "spacing": "medium",
                "separator": true,
                "wrap": true
            },
            {
                "type": "TextBlock",
                "size": "small",
                "text": "0123456789",
                "spacing": "small"
            },
            {
                "type": "ColumnSet",
                "columns": [
                    {
                        "type": "Column",
                        "width": "auto",
                        "items": [
                            {
                                "type": "TextBlock",
                                "size": "small",
                                "text": "Tariff charges",
                                "wrap": true,
                                "maxLines": 2
                            }
                        ]
                    },
                    {
                        "type": "Column",
                        "width": "stretch",
                        "items": [
                            {
                                "type": "TextBlock",
                                "size": "small",
                                "text": "£20.00",
                                "horizontalAlignment": "right",
                                "wrap": true
                            }
                        ]
                    }
                ]
            },
            {
                "type": "ColumnSet",
                "columns": [
                    {
                        "type": "Column",
                        "width": "auto",
                        "items": [
                            {
                                "type": "TextBlock",
                                "size": "small",
                                "text": "Minutes",
                                "wrap": true
                            }
                        ]
                    },
                    {
                        "type": "Column",
                        "width": "stretch",
                        "items": [
                            {
                                "type": "TextBlock",
                                "size": "small",
                                "text": "£0.55",
                                "horizontalAlignment": "right",
                                "wrap": true
                            }
                        ]
                    }
                ]
            },
            {
                "type": "ColumnSet",
                "columns": [
                    {
                        "type": "Column",
                        "width": "auto",
                        "items": [
                            {
                                "type": "TextBlock",
                                "size": "small",
                                "text": "Messages",
                                "wrap": true
                            }
                        ]
                    },
                    {
                        "type": "Column",
                        "width": "stretch",
                        "items": [
                            {
                                "type": "TextBlock",
                                "size": "small",
                                "text": "£0.30",
                                "horizontalAlignment": "right",
                                "wrap": true
                            }
                        ]
                    }
                ]
            },
            {
                "type": "ColumnSet",
                "columns": [
                    {
                        "type": "Column",
                        "width": "auto",
                        "items": [
                            {
                                "type": "TextBlock",
                                "size": "small",
                                "text": "Charges when abroad",
                                "wrap": true,
                                "maxLines": 2
                            }
                        ]
                    },
                    {
                        "type": "Column",
                        "width": "stretch",
                        "items": [
                            {
                                "type": "TextBlock",
                                "size": "small",
                                "text": "£2.30",
                                "horizontalAlignment": "right",
                                "wrap": true
                            }
                        ]
                    }
                ]
            },
            {
                "type": "ColumnSet",
                "columns": [
                    {
                        "type": "Column",
                        "width": "auto",
                        "items": [
                            {
                                "type": "TextBlock",
                                "size": "small",
                                "text": "Premium & Information services",
                                "wrap": true,
                                "maxLines": 2
                            }
                        ]
                    },
                    {
                        "type": "Column",
                        "width": "stretch",
                        "items": [
                            {
                                "type": "TextBlock",
                                "size": "small",
                                "text": "£1.65",
                                "horizontalAlignment": "right",
                                "wrap": true
                            }
                        ]
                    }
                ]
            },
            {
                "type": "ColumnSet",
                "columns": [
                    {
                        "type": "Column",
                        "width": "auto",
                        "items": [
                            {
                                "type": "TextBlock",
                                "size": "small",
                                "text": "Balance brought forward",
                                "wrap": true,
                                "maxLines": 2
                            }
                        ]
                    },
                    {
                        "type": "Column",
                        "width": "stretch",
                        "items": [
                            {
                                "type": "TextBlock",
                                "size": "small",
                                "text": "£58.66",
                                "horizontalAlignment": "right",
                                "wrap": true
                            }
                        ]
                    }
                ]
            }
        ]
    }
}

额外建议 #

• 使用Adaptive Cards官方设计工具预览跨端效果，提前发现兼容性问题。
• 避免使用过于复杂的嵌套布局，尽量保持结构扁平化，减少渲染引擎的计算差异。

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