When a screen is bigger than the FlowComponent, it will automatically be made scrollable.
In this example, the second screen,
screenB, is twice the screen height.
screenB = new Layer width: Screen.width height: Screen.height * 2 # = twice the height backgroundColor: "#fff"
Just before the transition to
screenB you can see a ScrollComponent named
scroll (with its
content layer) appear in Layer Panel. It’s created on the fly.
(By the way, we’ll talk about that mysterious
overlay layer in Overlays.)
Automatic scrolling also works horizontally. When the screen is wider than the FlowComponent, it will also be made scrollable.
screenB = new Layer width: Screen.width * 2 # = twice the width height: Screen.height backgroundColor: "#fff"
And, of course, a screen that’s higher and wider than the FlowComponent will be scrollable in all directions.
A pixel is enough
Even when the screen is just a tiny bit too big, it will be made scrollable.
Let’s see what happens if we make the first screen half a point higher:
# Adding a pixel to the layer’s height screenA.height += 0.5
But when a layer is only a pixel too high, it probably happened by accident.
So, fortunately, you can disable scrolling with
scroll, another argument (like
animate) that you can add. Set
no to switch it off.
flow.showNext screenA, scroll: no
Changing scroll properties
The FlowComponent creates a normal, everyday ScrollComponent that you can customize. You can find it in
“But which one?” you might ask, because you can have several scrollable screens moving in and out.
Well, the currently visible one. That’s why it’s best to configure
scroll right after using
Here’s an example in which I add some content inset, and enable mouse wheel scrolling.
screenA.onTap -> flow.showNext screenB flow.scroll.contentInset = top: 60 bottom: 60 flow.scroll.mouseWheelEnabled = yes
This last example begs the question: “How do I get rid of that black abyss behind the scrollable content?”
That’s the background color of the FlowComponent, and you can set it when creating the component. To white, for instance:
flow = new FlowComponent backgroundColor: "white"
(There’s more about setting FlowComponent properties in Tips and tricks.)
Listening to a screen’s scroll events
Same thing when using scroll events: it’s best to add them right after the
showNext(). Because at that point
scroll will refer to the ScrollComponent that was just created.
See this example. Directly after the
showNext() to the
liked artboard we add an
onScroll event to
# Switch to Liked screen button_liked.onTap -> flow.showNext liked, animate: no # Move the tab bar up or down # depending on the scroll direction flow.scroll.onScroll -> if event.velocity.y < 0 tabbar.animate y: Screen.height else tabbar.animate y: flow.footer.initial_y
In this event handler, we lower the
tabbar when scrolling up, and bring it back up when scrolling down (by checking if the vertical
layer.velocity is positive or negative).
Result: The tab bar lowers when you scroll the Liked screen, but not when you scroll the Messages screen.
(By the way, we use
animate: no when transitioning between the screens. Because that’s how a tab bar works—it instantly switches to the new screen.)
Listening to ALL scroll events
You can also add scroll events directly to the FlowComponent. In this case, they will react to all scroll gestures, independently of which screen is visible.
In this next example, the
onScroll event is added to
flow itself, at the end of the project.
# Move the tab bar up or down # depending on the scroll direction flow.onScroll -> if event.velocity.y < 0 tabbar.animate y: Screen.height else tabbar.animate y: flow.footer.initial_y
Now the tab bar will always move down when you scroll, on every scrollable screen.