流 Flow丨Framer 文档 Code

Code

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

查看下面的例子，设计模式中的画板如何自动变成一个可滚动且有页眉和页脚的页面。

Open Example