目标

熟悉输入框、下拉框、按钮等常见组件，以及如何用连线实现一个典型的交互效果，如下所示：

过程中，涉及到将数据通过用户数据（每个组件都有）属性逐级传递这种操作。

步骤

新建

略。参见1新建。命名为视频列表选择播放。

拖放组件

拖入视频、输入框、下拉框、按钮组件，并进行属性设置。步骤如下：

• 步骤1：拖入视频（面板中组件-视频）。
• 步骤2：拖入输入框（面板中组件-表单）。外观属性组设置：

• 设置标签文本为“当前视频URL”。
• 勾选标签内嵌和垂直排布，参见[标签文本相关]。

• 步骤3：拖入下拉框（面板中组件-表单）。属性设置：

• 设置外观-标签文本为“视频列表选择”。
• 勾选标签内嵌和垂直排布，参见[标签文本相关]。
• 设置功能-数据内容，格式参见数据内容（datas）。如下所示：

• 

• 步骤4：拖入普通按钮（面板中组件-表单）。设置外观-文字属性为“播放”。

操作过程如下：

连线操作

本示例中各组件的逻辑关系如下：

• 下拉框的选择ID顺次传递给输入框的值内容、按钮的用户数据、视频的路径。
• 按钮的点击事件，触发视频的自动播放。

这些逻辑关系，都分别对应连线操作，具体步骤如下：

• 步骤1：选择ID（下拉框）→值内容（输入框）
• 步骤2：值内容（输入框）→用户数据（按钮）

注意：用户数据（每个组件都有），详情可参见用户数据

• 步骤3：用户数据（按钮）→路径（视频）

• 步骤4：点击事件（按钮）→自动播放（视频）。

注意：连线样式可以调整，参考线条样式设置。其他相关注意事项，可参考示例2的连线操作。

小结

• 数据可以通过连线可逐级传递。（示例中用到用户数据属性）
• 组件可以多条连线，操作不同属性。参见连线执行顺序（示例中按钮传递链接，随后触发播放）
• 下拉框数据的显示和值可以独立。