布局容器

功能

在面板中容纳其它组件，实现自动布局和整体编组。

行布局

• 容纳其它组件，并横向从左到右自动布局。
• 超出宽度后自动换行。
• 在使用模式下支持随卡片尺寸自动布局，如上右图。
• 前序组件状态由非隐藏变为隐藏后，后续组件将自动向左递补；反之，前序组件状态由隐藏变为非隐藏后，将向右“推开”现有组件。

列布局

• 容纳其它组件，并纵向自上而下自动布局多个组件。
• 前序组件状态由非隐藏变为隐藏后，后续组件将自动向上递补；反之，前序组件状态由隐藏变为非隐藏后，将向下“推开”现有组件。

折叠容器

• 容纳其它组件，并支持展开（如上左图）和收缩（如上右图），收缩后内部组件不可见。
• 既可以由用户鼠标点击触发切换展开和收缩，也可以由其它组件触发的交互事件切换。
• 其余特点同列布局。

幻灯片

• 可定义多个内容片子，并支持由其它控件触发交互事件切换到指定的内容片子。
• 其余特点同列布局。

提示

可以利用布局容器实现触发统一切换多个组件状态的交互事件，以大幅降低交互事件的设置工作量，此时交互事件的触发对象为该容器（容纳了上述所有组件）。

使用方法

通用设置

进入面板的编辑模式，从左侧的组件栏，拖出相应容器放入中间的面板画布，点击选中后在右侧配置。

• 放入组件

  • 可以从组件栏拖拽组件直接放入布局容器内。
  • 也可以点击现有容器外、面板内的其他组件，选择移动拖拽放入容器。

  

  • 点击布局容器内组件，在操作条中选择↑可以选中前序组件。

  

• 多层嵌套

  • 支持容器的多层嵌套。
    如下一个行布局中放了2个列布局，每个列布局中又容纳了其它组件，左图为编辑模式，右图为使用模式。

• 其它通用设置同常规组件。

折叠容器切换展开收起

• 折叠容器的展开和收起可作为交互事件触发的状态切换交互效果。

幻灯片设置

案例

函数图像章节中有两个例子，分别关于三角函数和指数函数动态调节参数显示图像。 这里我们使用幻灯片容器整合这两个例子，实现通过单选按钮来切换幻灯片显示这两个图像的状态，从而以此为例理解容器用法。 首先我们拖入一个幻灯片容器到面板画布，将三角函数的参数设置滑块和图像都放入幻灯的第一个片子中，如下图所示。

• 编辑幻灯片内容
  • 在右边属性栏的幻灯片卡片单元，点击+按钮可以新建一个内容片子，点击-即删除。
  • 属性栏中点击选择某个幻灯片卡片，或面板画布左上角的切换钮，面板画布切换为对应卡片内容，属性栏中该卡片会显示Current字样。
  • 你可以在面板画布上进行常规内容构造，如下图。

• 依次完成所有内容片子的构建即可。

案例继续1

我们将指数函数的底数设置滑块和图像放入幻灯片2#片子内容，如下图。

• 触发幻灯片的内容切换

案例继续2

我们在幻灯片上方增加一个单选按钮，用于选择切换幻灯片的显示内容，设置它的2个交互事件。

• 当单选按钮选择三角函数时，幻灯片显示内容1。
• 当单选按钮选择指数函数时，幻灯片显示内容2。

• 基本设置参考通用交互事件设置。
• 对于幻灯片而言，可以选择交互事件效果是切换幻灯片，如上图，在下方的状态值菜单中选择是哪个内容片子。

案例总结

在下述实验的Layout仪表盘中，你可以选择函数后看到幻灯片切换为对应函数图像，并可以使用滑块控制参数看到图像的动态变化。

直接调节滑块即可，你无需运行实验，本案例与依赖模型无关。