如何在Microsoft Bot Framework（Node.js）中开发自定义单选框与复选框组件？

嘿，我之前开发Bot Framework机器人时也碰到过一模一样的需求，官方基础示例里确实没专门讲这块，但其实咱们可以借助Adaptive Cards的ChoiceSet控件轻松搞定单选和复选功能，下面给你具体的代码示例和操作步骤：

一、实现单选按钮（Single Select） #

单选按钮可以通过Adaptive Cards的ChoiceSet控件，将type设为SingleSelect来实现，用户只能选择其中一个选项。

代码示例： #

const { CardFactory } = require('botbuilder');

// 构造带单选按钮的Adaptive Card
const singleSelectCard = {
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.4",
    "body": [
        {
            "type": "TextBlock",
            "text": "请选择你的偏好饮品：",
            "size": "Medium",
            "weight": "Bolder"
        },
        {
            "type": "ChoiceSet",
            "id": "drinkPreference",
            "style": "expanded", // 设置为单选按钮样式
            "choices": [
                {
                    "title": "咖啡",
                    "value": "coffee"
                },
                {
                    "title": "奶茶",
                    "value": "milkTea"
                },
                {
                    "title": "气泡水",
                    "value": "soda"
                }
            ]
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "提交选择"
        }
    ]
};

// 在对话流程中发送单选卡片
async sendSingleSelectCard(turnContext) {
    await turnContext.sendActivity({
        attachments: [CardFactory.adaptiveCard(singleSelectCard)]
    });
}

二、实现复选框（Multi Select） #

复选框对应ChoiceSet的MultiSelect类型，支持用户同时选择多个选项。

代码示例： #

// 构造带复选框的Adaptive Card
const multiSelectCard = {
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.4",
    "body": [
        {
            "type": "TextBlock",
            "text": "请选择你喜欢的零食（可多选）：",
            "size": "Medium",
            "weight": "Bolder"
        },
        {
            "type": "ChoiceSet",
            "id": "snackChoices",
            "style": "expanded", // 设置为复选框样式
            "isMultiSelect": true,
            "choices": [
                {
                    "title": "薯片",
                    "value": "chip"
                },
                {
                    "title": "巧克力",
                    "value": "chocolate"
                },
                {
                    "title": "坚果",
                    "value": "nut"
                },
                {
                    "title": "饼干",
                    "value": "biscuit"
                }
            ]
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "提交选择"
        }
    ]
};

// 在对话流程中发送复选卡片
async sendMultiSelectCard(turnContext) {
    await turnContext.sendActivity({
        attachments: [CardFactory.adaptiveCard(multiSelectCard)]
    });
}

三、处理用户的选择结果 #

当用户点击提交按钮后，机器人会收到包含选择数据的活动，你需要在消息处理逻辑中解析这些数据：

async onTurn(turnContext) {
    if (turnContext.activity.type === 'message') {
        // 检查是否是Adaptive Card提交的表单数据
        if (turnContext.activity.value) {
            // 处理单选结果
            if (turnContext.activity.value.drinkPreference) {
                const selectedDrink = turnContext.activity.value.drinkPreference;
                const drinkName = selectedDrink === 'coffee' ? '咖啡' : 
                                  selectedDrink === 'milkTea' ? '奶茶' : '气泡水';
                await turnContext.sendActivity(`你选择的饮品是：${drinkName}`);
            }
            // 处理复选结果
            if (turnContext.activity.value.snackChoices) {
                const selectedSnacks = turnContext.activity.value.snackChoices;
                const snackNames = selectedSnacks.map(val => {
                    switch(val) {
                        case 'chip': return '薯片';
                        case 'chocolate': return '巧克力';
                        case 'nut': return '坚果';
                        case 'biscuit': return '饼干';
                        default: return val;
                    }
                });
                await turnContext.sendActivity(`你喜欢的零食有：${snackNames.join('、')}`);
            }
        } else {
            // 普通消息的处理逻辑
            await turnContext.sendActivity('请通过卡片上的选项进行选择哦～');
        }
    }
}

补充小提示 #

• 如果你想调整控件的展示样式，可以修改ChoiceSet的style属性：设为compact会变成下拉框样式，expanded就是按钮/复选框样式。
• Adaptive Cards的灵活性很强，你还可以搭配输入框、图片等元素，打造更丰富的交互场景。

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