本帖最后由 Simon.Sun 于 2023-10-11 17:26 编辑
开局一张图：
有时候我们需要实现上面这样标签选择的功能：
- 以小卡片的形式展示选择的标签，卡片里可能会有标签对应的类型图标；
- 点击标签，修改背景色，表示标签选中，再次点击可以取消选中；
- 可以获取到选择的标签列表，以供其他地方使用。
聪明的格友们可能想到了既然是一个一个的小卡片，是不是能够借助图文列表实现呢？没错，就是图文列表...
实现思路：
1. 使用图文列表绑定标签字典数据源，这样我们可供选择的标签项就有了；
2. 要实现图文列表点击后，能够改变颜色以标识选中，这里可以借助图文列表的单元格样式；
这里我们只给图文列表的选择行设置了背景色，其他都继承自一般状态。这样呢，当我们点击图文列表的每个条目时，就会选择该条目，背景色就改变了。这样就实现了我们想要的选中效果。
3. 那么点击选中的条目，取消选中改怎么实现呢？根据上一步的思路，是不是只要在点击图文列表条目时，能够移除当前行的选择状态是不是就可以了。具体做法如下：
3.1. 给图文列表的模板页添加背景图片，并设置透明度为 100%
3.2. 将行选择状态绑定到图文列表的模板页里，这个行选择状态是图文列表内置的属性，为 0 表示图文列表条目对应的行未选中，为 1 选中；
3.3. 给这个背景图片设置点击命令，用设置变量命令修改行选择状态的值，当为 0 的时候修改成 1（选中），为 1 的时候修改成 0（取消选中）：
4. 如果我们想获取图文列表目前已经选择的所有条目，再使用一个表格选择项容器就好啦，绑定图文列表对应的表格就好啦。
这样就能实现我们最终想要的效果：
最后附上 Demo（9.0.6.0），欢迎大佬们下载体验：
10-11-使用图文列表模拟标签选择.fgcc
(166.83 KB, 下载次数: 366)
|
陕公网安备：61019002000258 |
隐私政策 |
网站地图