下拉菜单是一个至关重要的选择器元素，因为它们可以将列表压缩到一个能够轻松展开和收起的菜单中。当通过点击激活菜单时，“下拉”会显示值列表，直到用户选中其选项，然后菜单会返回仅显示该单个项目。

零售网站通常使用下拉菜单来组织诸如日历日期或尺码选择之类的列表，从而为用户提供简洁的界面和易用性。

ProtoPie 可帮助你使用 组件 更快地创建下拉菜单工作流，从而减少重复性任务。ProtoPie 还使用 Send 和 Receive 功能在输入之间无缝共享信息。玩得开心！

概览

• 第 1 步：将项目转换为组件

• 第 2 步：创建项目悬停状态

• 第 3 步：使用 Send 和 Receive 在文本字段中显示所选值

• 第 4 步：通过设置条件交互实现菜单展开与收起

• 第 5 步：选择后让菜单消失

最后，你将能够做出像这样👇

[起始 Pie 文件] [完成的 Pie 文件]

第 1 步：将项目转换为组件

1. 首先，删除列表中的第二和第三项，因为你将要创建并使用 组件。 组件 是可复用的已保存图层和交互。它们能让你避免重复工作并加速原型制作。

2. 保留列表中的 Item 1 后，选中并将其转换为组件。该图层的图标会从灰色容器图标变为水蓝色组件图标。

3. 复制并粘贴这些组件以创建三个项目，然后向下拖动它们来建立你的列表。

第 2 步：创建项目悬停状态

1. 点击闪电图标（位于左侧场景面板旁）以打开组件面板。然后，双击 Item 1 组件进入编辑模式。

2. 在图层面板中，使 base 图层可见，并将其 不透明度 设置为 0。

3. 为 Item 1 组件添加 Mouse Over 和 Mouse Out 触发器。

4. 为每个触发器各添加一个 Opacity 响应，并都关联到 base 图层。对于 Mouse Over 触发器，将 Opacity 响应设为 100；对于 Mouse Out 触发器，将 Opacity 响应设为 0。

5. 将组件中的 text 图层设为可编辑（仅当你从其他设计工具导入素材时需要此步骤）。

6. 回到主场景（Dropdown menu），在这里你可以自定义每个组件的文本。

7. 检查预览，确认鼠标悬停时不透明度会发生变化。由于对主组件所做的任何更改都会自动同步到它的每个实例，因此所有项目都应响应悬停效果。

第 3 步：使用 Send 和 Receive 在文本字段中显示所选值

1. 返回主组件，并在组件本身上添加一个 Tap 触发器。

2. 在该触发器内添加一个 Send 响应。

💡 提示：在 ProtoPie 中， 组件 彼此以及与场景是隔离的。为克服这一限制，我们需要使用 Send 和 Receive 功能。在这一步中，你将创建一个 Send 响应，以便在组件实例之间共享信息。在本例中，我们将使用 Send 和 Receive 来指定选择了哪个项目，并让主场景触发器基于此传递响应。

3. 在 Channel 下，选择 Send to Current Scene，因为你是在同一个场景中发送和接收；不过也可以打开通道菜单查看信息可发送到的位置选项。

4. 给消息命名，例如 selected。然后勾选 Send Value Together ，因为我们希望知道选中了哪个组件。

5. 这里要使用的公式是 'text'.text 这意味着你将发送文本图层的值，并将消息发送到组件的 text 图层。

6. 返回主场景并为所有场景添加一个 变量 。务必在属性面板中将该变量改为 文本 格式，因为你将使用这种格式。你将使用此变量来存储从组件发送的值。

7. 添加一个 Receive 触发器，选择要在消息中发送的文本值，并将该文本值 赋值 给你刚创建的变量。

8. 在 Variables 面板下，你可以点击 bug 图标 让变量显示在预览窗口中。这个调试工具可帮助你检查是否正常工作。当你点击任意项目时，所选值应显示在该变量中。

9. 转到 Input 图层并将文本图层设为 可编辑 。然后，在 Receive 触发器中添加一个 Text 响应，并将文本图层作为输入字段。

10. 使用 公式 ，将值改为 变量本身 。你还可以添加颜色响应来自定义文本。在本示例中，我们选择了深灰色（#2C3038）。

第 4 步：通过设置条件交互实现菜单展开与收起

让我们为下拉菜单本身添加更多交互。

1. 首先，将下拉菜单的不透明度设置为 0。这是初始状态。

2. 为输入容器添加一个 Tap 触发器。再添加一个关联到 下拉菜单 的 Condition 。在本演示中，我们使用的是 Fill Opacity，但你也可以尝试其他条件。

3. 当下拉菜单的条件为 opacity = 0 时，添加一个 Opacity 响应并将其设置为 100 。换句话说，当你点击输入框时，下拉菜单将会出现。

4. 你还可以为小箭头添加一个 Rotate 响应，以增加额外的微交互。做法是在 Tap 触发器中添加一个 Rotate 响应并选择该箭头。

5. 你需要将箭头的 原点 改到它的中心。将箭头旋转到你想要的角度，本例为 180 度。

6. 要反向执行此序列，复制该条件，将新条件的不透明度属性改为 = 100，并把 Opacity 和 Rotate 响应改为 0。

💡 提示：你也可以使用 Reset 将不透明度改回初始状态。

在这种情况下，你不能用 reset 来重置旋转，因为 reset 响应不允许你选择旋转方向。

第 5 步：选择后让菜单消失

1. 别忘了在选中某个项目时也让菜单消失。为此，复制你刚刚创建的交互，并将它们移动到 Receive 触发器中。

2. 你还可以再添加一个交互，使点击组件外部时菜单消失。做法是在 BG 图层上添加一个 Tap 触发器，并将你刚才创建的交互复制到这个 Tap 触发器中。

恭喜！

你已经学会了如何使用组件创建下拉菜单。你加入了精美的交互，让你的原型更出彩！

我们很想看到你的创意实验！创建你的原型，并在 X 或 Instagram 上使用话题标签 #MadeWithProtoPie 分享。

[下载 ProtoPie] {加入社区}