List Index

10m 55sPublished Oct 31, 2025

SummaryVersion Notes (Draft)

This course tackles an advanced design-to-handoff challenge: enabling nested components to sense their own position within dynamic lists. By introducing the List Index view model property, Rive assigns a native, read-only integer ID to each nested component instance. The core business benefit is that designers can completely bypass complex manual scripting, using the List Index directly as a state machine condition to achieve tailored effects like "single-item color coding" or "global mutual exclusion (radio-button selection mechanics)" for large-scale production lists.

Zero-Based Index System: Any component embedded within an Artboard List features a read-only List Index starting at 0 for the first item, followed sequentially by 1, 2, 3, etc. This value is handled implicitly by the parent list container and cannot be edited manually.
Mathematical Logic for Mutual Exclusion: Radio selection relies on comparing local component properties against global state parameters using State Machine conditions:
- Transition into active state: $$index num = List Index$$
- Transition out of active state: $$index num \neq List Index$$

By manipulating a single global index num variable via listeners, changing its value forces all other unselected instances to detect an inequality (≠) and return to idle.

Initialization Boundary Protection: In complex state setups, state machine tracker variables should never default blindly to 0 if 0 represents a valid interactive index. Setting it to an out-of-bounds boundary constant (like -1 here) safeguards the file against unintended triggers on load.
Preview Bound Values: When working with data-bound lists, elements inside the list container appear blank on the canvas by default until the state machine is initialized. Turning on the "Preview Bound Values" toggle solves this by rendering layout instances statically during assembly.

📌 Key Points

Use list index values to access and control specific items in repeated content.

📝 Notes

Markdown

0 chars

Step by Step

00:04

Recap and List Setup Review:

The instructor showcases a simple button component with built-in hover sound effects. They review how to set up 4 data instances under its view model and establish a top-level list view model.
01:34

Creating the Artboard List Container:

Create a new artboard and add an artboard list component in the layout section. Configure it as a centered column, select it in the hierarchy, and bind it to the 4-item list property established earlier.
02:12

Enabling Preview Bound Values:

Points out that components inside a dynamic list are normally hidden until the state machine goes active. Instructs users to enable the preview bound values toggle at the top toolbar to see the items while editing.
02:46

Declaring the List Index Property:

Explains that the list index identifies the relative position of an instance (the first item starts at index 0). Navigate to the original component's view model, click +, and choose index under list attributes. It remains uneditable as it is set by the system.
03:54

Binding List Index dynamically to Text Runs:

Create a new Text Run in the component's hierarchy. Set up a convert to string converter to change the numeric List Index to a string and map it to the run. The 4 cards on the main canvas will immediately render indices 0, 1, 2, 3.
05:09

Using List Index as a Basic State Machine Condition:

Demonstrates a simple application by creating a timeline named red with red background keyframes. Drag it into the state machine and add a transition condition: go to red only if List Index == 0. Testing in Play Mode shows only the first card shifts to red.
06:21

Designing a Mutually Exclusive Selection System:

Delete the red timeline test and introduce a click timeline (green highlight). The goal is to make any clicked item turn green, while simultaneously returning any previously clicked green item back to its clear idle state.
07:20

Configuring a Global Index Tracker Property:

Switch back to the top-level list view model of the main artboard. Create a basic number property named index num. This variable will be used globally to store the list index of the most recently clicked component instance.
07:44

Setting Up Component Click Listeners:

Open the state machine of the base component and add a Listener targeted at the component itself. Set the listener actions so that a Pointer Down event updates the global index num to equal the component's own List Index.
08:28

Wiring Dual-Directional Transition Conditions:

In the component state machine, configure the transition condition from Hover to Click as: index num == List Index. Concurrently, specify the transition away from Click back to Idle as: index num ≠ List Index.
09:55

Debugging the Initial Highlight Glitch:

Pressing play reveals that the first item automatically defaults to its green clicked state. The instructor explains that this happens because the global index num defaults to 0, matching the first item's list index out of the box.
10:19

Adjusting Default Values to Complete the Logic:

Change the initial value of index num in the top data model from 0 to -1. Since list indices are non-negative, this technically voids false matching during initialization. The video ends with the instructor executing click tests across rows to confirm perfect radio-button logic.