自适应卡片中的按钮对齐答案

【问题标题】：Button alignment in Adaptive cards自适应卡片中的按钮对齐
【发布时间】：2020-06-08 13:56:45
【问题描述】：

我想知道是否有办法控制 Bot Emulator 中自适应卡中按钮的对齐方式。

我在模拟器和 Microsoft Visualizer 中尝试了相同的代码，但它们的呈现方式不同。图片如下：Emulator Visualizer

这是我使用的代码：

{
        "contentType": "application/vnd.microsoft.card.adaptive",
        "content": {
            '$schema': 'http://adaptivecards.io/schemas/adaptive-card.json',
            'version': '1.0',
            'type': 'AdaptiveCard',
            'body': [
            {
                'type': 'TextBlock',
                'text': 'Meeting Title',
                'weight': 'bolder'
            },
            {
                'type': 'TextBlock',
                'text': 'Location',
                'separator': true,
                'isSubtle': true,
                'size': 'small'
            },
            {
                'type': 'TextBlock',
                'text': 'Location',
                'spacing': 'none'
            },
            {
                'type': 'TextBlock',
                'text': 'Organizer',
                'separator': true,
                'isSubtle': true,
                'size': 'small'
            },
            {
                'type': 'TextBlock',
                'text': 'Organizer Name',
                'spacing': 'none'
            },
            {
                'type': 'TextBlock',
                'text': 'Start Time',
                'separator': true,
                'isSubtle': true,
                'size': 'small'
            },
            {
                'type': 'ColumnSet',
                'spacing': 'none',
                'columns': [
                {
                    'type': 'Column',
                    'width': 'auto',
                    'items': [
                    {
                        'type': 'TextBlock',
                        'text': '05:00 PM',
                        'isSubtle': false,
                        'weight': 'bolder'
                    }
                    ]
                },
                {
                    'type': 'Column',
                    'width': 'auto',
                    'items': [
                    {
                        'type': 'TextBlock',
                        'text': 'May 21'
                    }
                    ]
                },
                {
                    'type': 'Column',
                    'width': 'auto',
                    'items': [
                    {
                        'type': 'TextBlock',
                        'text': '2017',
                        'isSubtle': true,
                        'weight': 'bolder'
                    }
                    ]
                }
                ]
            },
            {
                'type': 'TextBlock',
                'text': 'End Time',
                'separator': true,
                'isSubtle': true,
                'size': 'small'
            },
            {
                'type': 'ColumnSet',
                'spacing': 'none',
                'columns': [
                {
                    'type': 'Column',
                    'width': 'auto',
                    'items': [
                    {
                        'type': 'TextBlock',
                        'text': '05:30 PM',
                        'isSubtle': false,
                        'weight': 'bolder'
                    }
                    ]
                },
                {
                    'type': 'Column',
                    'width': 'auto',
                    'items': [
                    {
                        'type': 'TextBlock',
                        'text': 'May 21'
                    }
                    ]
                },
                {
                    'type': 'Column',
                    'width': 'auto',
                    'items': [
                    {
                        'type': 'TextBlock',
                        'text': '2017',
                        'isSubtle': true,
                        'weight': 'bolder'
                    }
                    ]
                }

                ]
            }
            ],
            'actions': [
            {
                'type': 'Action.Submit',
                'title': 'Accept',
                'data':{
                    'accept': true
                }
            },
            {
                'type': 'Action.Submit',
                'title': 'Decline',
                'data':{
                    'accept': false
                }
            }
            ]
      }
    }

如图所示，按钮在模拟器中水平对齐，在可视化工具中彼此相邻。有没有办法修改按钮的高度和宽度，以及它们的对齐方式？

【问题讨论】：

stackoverflow.com/questions/45293477/…

标签： node.js botframework adaptive-cards

【解决方案1】：

我想知道是否有办法控制按钮的对齐方式 Bot Emulator 中的自适应卡片。

简短的回答是“否”。您不能在 Emulator 中修改组件的渲染。

长答案是：Bot Framework Emulator 是开源的，因此您可以尝试修改并在本地运行您的自定义模拟器。但我不确定在模拟器上进行自定义渲染对实际项目是否非常有用，因为它们不会在模拟器上运行。

模拟器源位于此处：https://github.com/Microsoft/BotFramework-Emulator

【讨论】：

【解决方案2】：

有一种名为Hostconfig 的东西带有自适应卡，请尝试使用它。已分享编辑器工具链接。

【讨论】：