如何在AppGyver中实现可切换的标签选择按钮？

核心思路 #

用页面变量存储选中的标签集合，通过公式判断标签是否被选中，动态绑定按钮的背景色和文字颜色，配合内置流程组件实现切换逻辑，无需额外JavaScript组件。

具体实现步骤 #

1. 创建页面变量存储选中状态

   • 进入页面变量设置，新建一个数组类型的变量，命名为selectedTags，用来保存用户选中的标签标识（比如标签名称、ID）。

2. 搭建标签按钮UI

   • 用「容器」或「按钮」组件制作单个标签：设置圆角、默认背景色（比如浅灰）、默认文字颜色（比如深灰），调整内边距和字体大小让它符合标签样式。
   • 固定标签直接复制组件即可；动态标签则用「重复器」组件绑定标签数据源，自动批量生成标签按钮。

3. 添加点击切换逻辑

   • 给每个标签按钮添加「点击」事件，选择Toggle list item流程组件：
     • 「Item to toggle」填写当前标签的标识（固定标签直接写字符串，比如"健身"；动态标签用current.item.tagName或current.item.id）。
     • 「Target list」选择页面变量selectedTags。
   • 这个组件会自动完成：点击时若标签不在选中数组则添加，已存在则移除。

4. 动态绑定选中样式

   • 选中标签按钮的「背景色」属性，打开公式编辑器，输入：

     IF(CONTAINS(pageVars.selectedTags, "当前标签标识"), theme.colors.primary, theme.colors.surface)
     

     （固定标签填对应字符串，动态标签填current.item.tagName这类绑定值）
   • 选中「文字颜色」属性，同样用公式：

     IF(CONTAINS(pageVars.selectedTags, "当前标签标识"), theme.colors.onPrimary, theme.colors.onSurface)
     

   • 这里theme.colors.primary对应你设置的主题蓝色，onPrimary是蓝色背景适配的白色文字，刚好匹配你要的选中效果。

额外提示 #

• 若要自定义颜色，可把theme.colors.xxx替换为十六进制颜色值，比如"#165DFF"（蓝色）、"#FFFFFF"（白色）。
• 动态标签场景下，重复器绑定数据源后，每个重复项的按钮直接复用上述逻辑即可。

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