Flow 组件用于快速在多个页面之间切换，将静态屏幕转换为交互流程。
Flow 组件的特别之处在于它知道你当前查看的屏幕是哪个。跟踪操作历史记录，可以随时来回导航。默认情况下有和原生机相识的转换。切换时当前屏幕自动弹出视图。
当添加覆盖如模态对话框时，背景也是半透明的黑色叠加层。
来先给 Flow 组件添加一个图层，很像添加图层到Page 组件，第一个图层没有动画。
# 创建Flow组件, 显示图层 layerA
flow = new FlowComponent
flow.showNext(layerA)
切换屏幕 Switching Screens
用 showNext 标签添加下一个屏。
# 创建Flow组件, 显示图层
flow = new FlowComponent
flow.showNext(layerA)
# 点击换屏
layerA.onClick ->
flow.showNext(layerB)
show-next
Framer 保持追踪正在看哪屏，用 showPrevious 标签可以切回上一屏。
# 切换到下一屏
layerA.onClick ->
flow.showNext(layerB)
# 切回到上一屏
layerB.onClick ->
flow.showPrevious()
show-previous
叠加 Overlays
使用 showOverlay 函数之一，可以覆盖任何图层，当前屏幕获得半透明的深色背景。当覆盖较小的图层（如侧边栏或动作页）时，最明显。
您可以指定以下方向之一：
- showOverlayCenter
- showOverlayTop
- showOverlayRight
- showOverlayBottom
- showOverlayLeft
# 创建一个新 Flow 组件
flow = new FlowComponent
# model和button图层在设计模式中添加
#点击button时，modal覆盖显示在中间
button.onClick ->
flow.showOverlayCenter(modal)
nav-modal
滚动 Scrolling
超过FlowComponent的高度或宽度的任何子层自动变为可滚动。如果子级高于父级可以垂直滚动，宽于父级可以水平滚动。可以使用 flow.scroll 定位这个可滚动图层。所有滚动都可以使用属性和事件。
位于画板顶部和底部的图层将被识别为页眉和页脚，跟tab bar或者导航栏一样。记着画板的高度要超过设备高度才能正常使用。
要将一个固定的页脚或标题添加到 Flow 组件中，可以使用页眉 header 和页脚 footer 属性。
将它们定位到设备屏幕的顶部或底部，转换到下一个屏幕后任然显示。
# 将导航栏固定在顶部
flow.header = flowBar
# 将tab bar固定在底部
flow.footer = tabBar
滚动案例 Scrolling Example
查看下面的例子，设计模式中的画板如何自动变成一个可滚动且有页眉和页脚的页面。
网友评论