Lists

10m 27sPublished Sep 12, 2025

SummaryVersion Notes (Draft)

The core instructional goal of this video is to master the concept of Lists and their application under the View Model architecture in Rive. Addressing common UI design pain points such as dynamic component reuse, independent interaction handling, and automated layouts, the lesson demonstrates how to leverage data binding and instance management to build a dynamic app/game menu UI without writing any code. The final UI adapts to text length, features independent hover state machines, and is fully driven by data flows, significantly optimizing design-to-development collaboration for cross-platform runtimes.

The Underlying Logic of Instantiation: In Rive, any artboard intended to be a dynamic child element inside a List must have at least one associated View Model. Even if the artboard contains static visual contents that don't change dynamically (like the Title in this video), it still needs an empty View Model assigned to trigger the system to allocate a valid instance ID for runtime rendering.
Three-Layer Layout Nesting Best Practice (Shift + L): The adaptive button setup uses a structured nesting hierarchy: Text Run -> Text Layout -> Row (Button) -> Row (Parent). The sophistication here lies in decoupling "Size Adaptive Sizing (Hug)", "Alignment Control (Center)", and "Outer Boundary Bounds (Fill)". Attempting to set Fill directly on the Button row forces the button background graphics to stretch over the entire layout area, breaking the intended visual proportions.
Data Flow Architecture: The core data-driven UI path is: Modify View Model Instance Property -> Drives Bound Text Run / State Machine Conditions -> Reflected in Artboard List Component Rendering. By editing the String value of specific instances directly inside the Data Panel, you can batch-define menu items such as "Play", "Options", and "Exit" without duplicating physical artboards in the project, significantly saving memory footprint at runtime.

📌 Key Points

Use list data to generate and drive repeated content with more flexible bindings.

📝 Notes

Markdown

0 chars

Step by Step

00:00:04

Introduce Lists Concept and Plan Menu:

The instructor introduces how Lists utilize View Model instances within Rive's layout system and creates a base Artboard named menu.
00:00:33

Create Title Artboard and Text:

Create a separate title artboard, remove its background, use the text tool (T) to generate base text, and center it.
00:01:00

Set Up Button Artboard Base:

Create an independent artboard named button, remove its background, and input the initial placeholder text.
00:01:14

Nest Multi-Layer Layout Frames:

Select the text and press Shift + L three times consecutively to wrap it into a Text Layout, a row named button, and a row named parent.
00:01:45

Configure Responsive Alignment and Hugging:

Turn off Absolute Positioning, set the parent row to Fill the artboard width/height, and set the button row to Hug contents while adding padding and a dark blue background color so that the background dynamically adjusts to the text runtime length.
00:02:46

Design Hover Interaction Timelines:

Open the State Machine and create two timelines; Timeline 1 keys the default blue background color, and Timeline 2 keys the hover state with a black background color, then drag Timeline 2 onto the state machine stage and connect them.
00:03:33

Create Button View Model and Boolean Property:

In the Data Panel, attach a new view model named button view model to bind to the button artboard, and add a Boolean property named bool.
00:04:02

Configure State Machine Transitions:

Add condition constraints to the transition lines (transition to the black background timeline when the boolean is true, and transition back when false).
00:04:41

Set Up Pointer Listeners:

Create two listeners targeting the button element itself, setting the boolean to true on Pointer Enter and to false on Pointer Exit.
00:05:38

Bind String Property for Dynamic Text:

Add a String property inside the button view model. Right-click the Text Run in the hierarchy and Data Bind it to the string property to support dynamic text reuse.
00:06:41

Generate Multiple Component Instances:

Note that every element used in a list must be an instance. Assign an empty title view model to the title artboard to generate its single instance, and add 3 additional instances in the instance settings of the button view model (naming and overriding their string values to "1", "2", and "3").
00:08:19

Create Main Menu List Property:

Select the main menu artboard and create a menu view model, adding a List Property to it. Create 4 List Items inside this list, mapping them respectively to the Title instance and the 3 distinct Button instances.
00:09:42

Instantiate Artboard List and Run Interaction Test:

Add an Artboard List component to the menu artboard hierarchy, change its layout type to Column, center it, and select the newly created list property as the source. Press play to conduct the final walkthrough verification, showing the title and three independently interactive, hover-responsive buttons rendering perfectly based on data.