---

highlight: atelier-cave-dark

使用组件切换器实现一个标签导航

效果展示

前置准备

• 背景素材

• 话题图标素材

具体步骤

• 制作背景

• 制作话题导航

• 制作话题导航结果列表

• 设置组件切换器关联内容

• 创建切换组件行为触发器

• 创建点击行为触发器

步骤分解

• 制作背景

• 将背景素材添加到 根容器

• 拖拽 组件切换器 到 背景素材上

• 选中 组件切换器

• 点击 检查面板 的 样式

• 调整 组件切换器 样式

• 制作话题导航

• 拖拽 容器 到 编辑区

• 选中 容器

• 点击 检查面板 中 的 样式

• 配置 容器 的 样式

• 拖拽 标签文本 到 容器 中

• 选中 标签文本

• 点击 检查面板 中 的 样式

• 调整 标签文本 的 样式

• 将话题图标素材添加到 标签文本 中

• 制作话题导航结果列表

• 拖拽 循环容器 到 布局到 容器

• 选中 循环容器

• 点击 检查面板 中的 样式

• 配置 循环容器 的 样式

• 拖拽 图片组件 到 循环列表项

• 选中 图片组件

• 调整 图片组件 的 样式

• 拖拽 标签文本 到 循环列表项

• 选中 标签文本

• 调整 标签文本 的 样式

• 鼠标右键 复制 一个 容器

• 为新复制的容器，更换图片和文本

• 设置组件切换器关联内容

• 选中 组件切换器

• 点击 检查面板 中的 数据绑定与设置

• 点击加号，设置关联内容

• 创建切换组件行为触发器

• 选中 组件切换器

• 点击 检查面板 中的 触发器

• 创建如下 触发器

• 创建点击行为触发器

• 选中 标签文本

• 点击 检查面板 中的 触发器

• 创建触发器