如何在Adaptive Card中实现类似Hero Card的下一页选项功能

Adaptive Card本身没有原生分页组件，要实现Hero Card那种多选项分页展示的效果，需要后端配合交互逻辑来完成，核心是通过拆分选项集、生成带分页按钮的卡片、处理按钮提交事件来动态切换页面。具体实现步骤如下：

1. 拆分选项数据集 #

• 先定义每页显示的选项数量（比如每页5个），根据总选项数计算总页数
• 将所有选项按页码分段，例如12个选项可分为3页：第1页1-5项、第2页6-10项、第3页11-12项

2. 构建带分页按钮的Adaptive Card #

• 用Container组件承载当前页的选项（可根据需求选择ChoiceSet、TextBlock+ActionSet等组件展示选项）
• 在卡片底部或顶部添加ActionSet，包含分页控制按钮：
  • 非第一页时显示「上一页」按钮，非最后一页时显示「下一页」按钮
  • 按钮使用Action.Submit类型，携带分页关键参数（目标页码、总页数、当前页等），示例代码如下：

    {
      "type": "AdaptiveCard",
      "version": "1.5",
      "body": [
        {
          "type": "TextBlock",
          "text": "第1/3页",
          "size": "Small",
          "color": "Secondary"
        },
        {
          "type": "Container",
          "items": [
            { "type": "TextBlock", "text": "选项1: 内容A", "wrap": true },
            { "type": "TextBlock", "text": "选项2: 内容B", "wrap": true },
            { "type": "TextBlock", "text": "选项3: 内容C", "wrap": true },
            { "type": "TextBlock", "text": "选项4: 内容D", "wrap": true },
            { "type": "TextBlock", "text": "选项5: 内容E", "wrap": true }
          ]
        }
      ],
      "actions": [
        {
          "type": "Action.Submit",
          "title": "下一页",
          "data": {
            "action": "navigatePage",
            "targetPage": 2,
            "totalPages": 3
          }
        }
      ]
    }
    

3. 处理分页交互逻辑 #

• 后端监听Adaptive Card的提交事件，解析提交数据中的action和targetPage参数
• 根据目标页码取出对应的选项子集
• 重新生成包含该页选项、分页状态和对应控制按钮的Adaptive Card，返回给客户端

4. 优化细节 #

• 保留用户选中状态：如果选项是可选择的（单选/多选），后端需存储用户的选中记录，生成新卡片时回显选中状态
• 增强分页提示：在卡片顶部明确显示当前页码和总页数，提升用户体验

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