Reflow With Dynamic Components

12m 45sPublished Apr 2, 2025

SummaryVersion Notes (Draft)

The primary teaching objective of this course is to master the mechanics of "Reflow" within Rive's advanced layout engine, specifically utilizing nested multi-state components (Dynamic Components) to break the boundaries of static asset design.

In traditional multi-platform UI animation workflows, if a specific component's physical bounds expand or shrink during runtime (such as an expanding card or toggle switch), it frequently overlaps or clips adjacent elements, requiring developers to write complex, hardcoded repositioning layout logic. Rive solves this natively via its flow-based architecture. By grouping instances into a layout container (e.g., Column Layout) and using nested artboards, any structural sizing change instantly triggers a seamless spatial rearrangement (Reflow) of surrounding content, offering a zero-code handoff pipeline for Web, Mobile, and HMI design.

The Hug Constraints Pitfall: Reflow only functions correctly if the Nested Artboard Instance sizing type is explicitly set to Hug in the parent layout. If accidentally set to Fixed or Fill, the parent wrapper ignores the runtime dimensional updates driven by the child's internal state machine, causing layout breaks or element masking issues.
Deep State Machine Interoperability: Rive's runtime architecture natively bridges nested scopes. Main artboard Listeners can target actions directly at specific inputs owned by a "Nested Artboard Instance," enabling sophisticated global-to-local UI interaction workflows without custom developer glue-code.
Reflow Performance Architecture: Although Rive’s layout engine (a highly optimized C++ custom variant inspired by Yoga) renders exceptionally fast, continuous reflow triggers across hundreds of deeply nested complex nodes will tax CPU bounds. When targeting low-end embedded systems or mobile web, optimize the layout tree hierarchy to isolate morphing states.
Directional Inheritance Adaptability: When a primary Column layout encloses a Row component, and that component restructures internally from horizontal to vertical, the vacant layout space is calculated in real-time by the parent's fr (Fill Ratio) metrics, making complex dashboard grids highly maintainable.

📌 Key Points

Let layouts reflow automatically when component sizes change while preserving structure.

📝 Notes

Markdown

0 chars

Step by Step

00:00:01

Introduction to Layout Reflow:

Instructor Ross introduces the concept of layout reflow, explaining how elements can automatically and intelligently reposition themselves when component shapes transform or artboard boundaries change.
00:00:45

Importing the Mockup & Inspecting Layout Tree:

Import a pre-designed multi-card vertical UI template. Inspect the hierarchy panel to verify that all card elements live within a global Column Layout with Absolute Position disabled.
00:01:30

The Logic Behind Nested Artboards:

Explain why expanding panels should be handled as separate artboards. Turning them into independent components allows their internal state machines to run custom interpolations while feeding active bounding data back to the parent layout.
00:02:40

Designing Horizontal and Vertical Card States:

Enter the nested child artboard and build two radically different layout configurations: a sleek horizontal layout (Landscape) and a larger stacked format (Portrait).
00:04:10

Driving Layout Switches with the State Machine:

Map the structural switch in the child state machine using a dedicated trigger or input variable. Thanks to Rive's built-in interpolation, the asset's width and height parameters morph smoothly during runtime transitions.
00:05:45

Instantiating the Dynamic Component Back to Main:

Return to the Main Artboard. Drag the newly constructed multi-state card artboard from the assets panel directly into the global Column layout container, replacing the static asset placeholders.
00:07:15

Configuring the Component Sizing Mode:

Select the nested artboard instance inside the layout and set its horizontal and vertical sizing properties to Hug. This is crucial for Reflow, as it forces the parent container to read the dynamic pixel metrics computed by the child.
00:08:30

Establishing Parent Padding and Layout Gaps:

Select the primary parent wrapper and apply uniform Padding and Gap values. This ensures that regardless of how large or shifted the dynamic card becomes, structural breathing room is preserved.
00:09:40

Building Interactive State Machine Listeners:

Open the main state machine editor and implement Pointer Click listeners over the card regions. These main-level triggers are mapped to directly manipulate the state inputs nested inside the child instances.
00:10:55

Testing Multi-Component Reflow Coordination:

Duplicate multiple instances of the dynamic component. Triggering an expansion on one card transforms it from horizontal to vertical, smoothly pushing all lower cards down the artboard automatically without overlapping.
00:12:20

Runtime Verification & Instructor Wrap-up:

Ross concludes the lesson. Interactively resize the Main Artboard viewport to demonstrate how the layout reacts flawlessly to cross-platform screen dimension changes while simultaneously handling internal state machine reflow adjustments.