扣子自适应卡片如何配置实现多按钮交互

先说一个关键点：在扣子（Coze）中要让一张卡片同时支持“收藏”“分享”“跳转详情”三种不同动作，并且按钮排列能随内容长度自动调整、不换行、不错位——如果不想费劲调样式，直接用单列布局嵌套按钮组+条件绑定是最干净的方案。否则在飞书客户端里，按钮很容易挤成一排超出卡片宽度，用户根本点不到最右侧的那个。

创建带自适应按钮组的卡片模板

登录扣子控制台，点击左上角「资源库」，顶部导航栏切换到「卡片」，然后点击右上角「+ 创建卡片」。

创建完成后，立即把左上角默认名称“新卡片”改为“新闻三态交互卡片”——这一步别偷懒，名称带业务含义，后续在工作流里选卡片时能一眼看出用途。

从左侧「组件」面板拖入一个「单列布局」组件。这是整张卡片唯一的根容器，所有其他组件必须嵌套在它内部，否则保存直接失败，没有例外。

搭建响应式按钮组结构

这里有两种实现方式，推荐第一种。

方法一：使用「按钮组」组件（推荐）
在「单列布局」内直接拖入「按钮组」组件，右侧属性栏将「按钮数量」设为3，分别设置三个按钮的文字为“收藏”“分享”“查看详情”。这个方法最省事，组件自带自适应排列逻辑。

方法二：手动组合（需控制宽度）
拖入三个独立「按钮」组件，依次选中每个按钮，右侧「样式」中将「宽度」统一设为“fit-content”。然后把三个按钮一起拖进一个「水平布局」组件中，设置该水平布局的「对齐方式」为“居中”，「间距」设为8px。

⚠️ 注意：如果用方法二，必须给水平布局加「最大宽度」限制，比如320px。否则在飞书小屏手机上，按钮会横向溢出，用户必须滑动屏幕才能点到第三个按钮，体验很差。

绑定动态按钮行为与变量

第一步：点击顶部「变量」→「新建变量」→ 创建变量名 btn_action_type，类型选String，默认值填 "detail"。

第二步：点击第一个按钮（收藏），右侧「链接地址」栏点击「fx」，选择「表达式」，输入：
{{btn_action_type == "fa vorite" ? "https://api.coze.com/fa v" : ""}}

第三步：点击第二个按钮（分享），同样打开「链接地址」表达式，输入：
{{btn_action_type == "share" ? "https://api.coze.com/share" : ""}}

第四步：点击第三个按钮（查看详情），表达式填：
{{btn_action_type == "detail" ? news_url : ""}}
这里 news_url 是工作流已返回的变量，必须确保它的变量类型为String，如果是Text类型，链接会直接为空，查都查不到。

配置按钮状态联动逻辑

进入工作流编辑页，在「发送消息」节点前添加一个「函数节点」。

粘贴以下代码：

def set_button_state(news_item):
    return {
        "btn_action_type": "detail",
        "news_url": news_item.get("url", "")
    }

将插件或大模型输出的 news_item 对象连接至此函数节点输入，函数输出连接至「发送消息」节点的变量映射区，然后把返回的 btn_action_type 和 news_url 分别绑定到卡片对应变量。

操作本身很简单，就是拖一个函数节点进去，接上线就行。但要注意一点：如果跳过函数节点，试图在卡片里用纯表达式判断用户点击意图，扣子并不支持在运行时监听按钮点击事件——按钮链接只能预设，无法根据用户实时操作动态改写。这个坑，很多人踩过。

你是一名 AI 行业编辑，请围绕下面这条热点输出一份资讯解读：
热点：扣子自适应卡片如何配置实现多按钮交互要求：
1. 先用一句话解释这条热点在讲什么
2. 再总结它为什么重要
3. 说明会影响哪些 AI 产品或内容方向
4. 最后给出 3 个适合资讯站使用的标题