Constructors
The Constructor component enables you to dynamically create and remove instances of UI components. This component includes the following preset actions:
- constructor: Inserts a new instance of the connected component into the app.
- destroyAllInstances: Destroys all active instances of the connected component.
- onConstructed: Event that triggers when an instance is constructed.
Note: To create dynamic UIs in Uiflow, the Collection component is recommended over the Constructor component. The Constructor component should be reserved for special use cases that require in-depth control.
This quick walkthrough outlines how to use the Constructor component to create a Text component instance each time a button is clicked:
- 1.In the Design view, drag-and-drop a Constructor component into the preview panel.
- 2.Drag-and-drop a Text component into the Constructor. By placing the Text component in the Constructor, it becomes the Constructor's child.
- 3.(Optional) Select the Text component and open the quick selection State menu, to change the text label.
- 4.Drag-and-drop a Button component beneath the Constructor.
- 5.(Optional) Double-click the Button's text, to change the text label.
- 6.Click Logic to enter the Logic view, and open the Libraries panel.
- 7.From the Design References Section, drag-and-drop the following references into the logic flow:
- Button
- Constructor
- 8.Connect the Button's onClick node to the Constructor's constructor node. This calls the Constructor to construct an instance of its children when the button is clicked.
- 9.Test your application in the Preview panel. Each time you click the button, a new text component instance should appear.
Last modified 2mo ago