步骤
从桌面启动 VisionQuick
示例 3 结束时 FlowDesigner 已经关掉。这次从桌面启动的是主程序 VisionQuick：默认启动工程就是示例 1 设为默认、示例 3 保存过的那份，状态栏能看到工程路径，不用再手动打开。
进入设计模式
点菜单「设计 → 进入编辑模式」，或直接按 F2。状态栏切到「设计模式」，左侧「组件库」、右侧「属性面板」出现，顶部还会多出一条设计工具栏。退出编辑模式按 Esc。
拖组件、摆布局
从「扩展类」拖一个「单图」到画布放主区域，从「基础类」拖一个「输入框」放在它旁边，拖动边缘调大小。要分区就用「容器类」组件切块，容器可嵌套，里面的组件跟着容器一起移动。
单图绑流程输出参数
选中单图，在「属性面板」找到带连接入口的属性（行尾那个 24×24 的模式按钮，提示「点击选择连接的参数」）。打开「参数连接」对话框，「工作流节点」选色彩转换，「输出参数」勾「图像」（keyId 是 images）。这一步让组件显示真实结果，而不是占位图。
输入框绑流程输入参数
再选中输入框，同样打开「参数连接」对话框，这次切到「输入参数」：把输入框的 value 绑到色彩转换的「通道提取」（keyId 是 channel）。绑定方向不同，落盘时一个是 isOutput=true、一个是 isOutput=false。
退出设计，运行看结果
按 Esc 退出编辑模式，会弹出保存确认，点「保存」。然后点工具栏「运行一次」：单图区域出现带灰度处理结果的画面，输入框显示当前参数值。
改输入值，反向调节流程
运行态下在输入框里改数值，对应的流程输入参数随之变化，单图结果跟着刷新 —— 这就是输入参数绑定的意义：界面不只是显示，还能调。改完记得保存工程。
两种绑定别弄反
| 组件属性 | 绑到流程的 | 落盘方向 | 运行时表现 |
|---|---|---|---|
| 单图.图像来源 | 色彩转换 → 输出参数「图像」(images) | isOutput = true | 组件显示流程算出来的画面，由流程驱动界面 |
| 输入框.值 | 色彩转换 → 输入参数「通道提取」(channel) | isOutput = false | 界面上的值反过来写进流程参数，由界面驱动流程 |
这一步用到的组件
| 组件 | 分类 | 示例尺寸 | 关键属性 |
|---|---|---|---|
| 单图 | 扩展类 | 300 × 200 | 图像来源（绑定输出参数）、显示模式 |
| 输入框 | 基础类 | 150 × 32 | 值（绑定输入参数）、只读开关、输入校验 |
| 容器（按需） | 容器类 | 随画布 | 切分图像区 / 操作区，容器内组件随容器移动 |
验证清单
- 视图中组件库、属性面板都在，状态栏显示「设计模式」，说明确实处于编辑模式。
- 运行一次后单图有真实画面，不是占位图 —— 占位图说明绑定的是空属性或绑错了方向。
- 改输入框的值，单图结果跟着变，说明输入参数绑定生效。
- Esc 退出时保存，再重开工程，两个组件的绑定仍在，不会退回未绑定状态。
常见排查
| 现象 | 先查这几处 |
|---|---|
| 单图一直是占位图 | 绑定有没有落在「输出参数」上；工程里那条流程是否真的跑出过结果 |
| 改了输入框没反应 | 是不是绑在「输出参数」而不是「输入参数」；当前是否在运行态 |
| 参数连接对话框里找不到节点 | 流程还没保存或没在默认工程里；先回 FlowDesigner 保存一次 |
| 退出设计后组件全没了 | Esc 时选了「不保存」；重做一遍并在退出时点「保存」 |
注意
- 先摆布局再接数据，比边摆边接省事——布局改动会打乱绑定关系的视觉对应。
- 同类组件可以复制粘贴，属性会一起带过去，改起来快很多。
- 「视图 → 网格吸附」「显示网格」开着时对齐更省事，组件位置会自动吸到网格上。
- 流程里删掉或重建节点后，回来核对这些组件的绑定是否还指向该节点。
接下来
继续看示例 05：《认识界面：FlowDesigner》。
