Render Block
Within a render block you declare the structure of your UI elements and optionally run inline logic.
There are four basic entity types that are usable inside a render:
- template
- typography
- function
- decorators
A template is the bread and butter of Evolve, it is by far the most used entity type.
To render a template, all you need to do is refer to it by name
render {
SomeTemplate();
AnotherTemplate();
}
Just like you can add custom behavior while declaring a template, you can also add custom behavior when rendering.
Here are the things you can customize
- parameters
- attributes
- styles
- instance styles
- lifecycle handlers
- input handlers
- onChange handlers
- decorators
Parameter
Passing a parameter to an entity is simple: just provide an expression and optionally a key.
render {
NumberInput<int>(value = 10);
}
Parameters are passed following the same methodology as C# named arguments.
Sometimes you want to pass a value into an entity and then later read that same value back out.
One easy way to do this is with a sync modifier.
render {
state int someValue = 10;
NumberInput<int>(sync:value = someValue);
// after the NumberInput completes its update, `someValue` will be set to the same value as the NumberInput's `value` parameter
run Debug.Log(someValue);
}
Const
Because Evolve re-executes your templates every frame, there are cases where you need to allocate memory
or perform some other expensive operation, but only want to do it once. In these cases you can apply a
const modifier to your parameter, attribute, or instance style expression.
Note that when you pass in a lambda expression as a parameter, Evolve automatically adds a const for you.
Const cannot be used when sync is present.
render {
SomeElementA(const value = SomeExpensiveOperation());
// const is implicitly added for you because of the lambda declaration
SomeElementB(action = () => SomeExpensiveOperation());
// adding const yourself is not an error but is not nessessary
SomeElementB(const action = () => SomeExpensiveOperation());
}