Module floem::view

source ·
Expand description

Views

Views are self-contained components that can be composed together to create complex UIs. Views are the main building blocks of Floem.

Views are structs that implement the View trait. Many of these structs will also contain a child field that is a generic type V where V also implements View. In this way views can be composed together easily to create complex views without the need for creating new structs and manually implementing View. This is the most common way to build UIs in Floem. Creating a struct and manually implementing View is typically only needed for special cases. The rest of this module documentation is for help when manually implementing View on your own types.

State management

For all reactive state that your type contains either in the form of signals or derived signals you need to process the changes within an effect. Often times the pattern is to get the data in an effect and pass it in to id.update_state() and then handle that data in the update method of the View trait.

Use state to update your view

To affect the layout and rendering of your component, you will need to send a state update to your component with Id::update_state and then call UpdateCx::request_layout to request a layout which will cause a repaint.

Local and locally-shared state

Some pre-built Views can be passed state in their constructor. You can choose to share this state among components.

To share state between components child and sibling components, you can simply pass down a signal to your children. Here’s are two contrived examples:

No custom component, simply creating state and sharing among the composed views.
ⓘ
pub fn label_and_input() -> impl View {
    let text = create_rw_signal("Hello world".to_string());
    stack(|| (text_input(text), label(|| text.get())))
        .style(|| Style::new().padding(10.0))
}
Encapsulating state in a custom component and sharing it with its children.

Custom Viewss may have encapsulated local state that is stored on the implementing struct.

ⓘ

 struct Parent<V> {
     id: Id,
     text: ReadSignal<String>,
     child: V,
 }

 // Creates a new parent view with the given child.
 fn parent<V>(new_child: impl FnOnce(ReadSignal<String>) -> V) -> Parent<impl View>
 where
     V: View + 'static,
 {
     let text = create_rw_signal("World!".to_string());
     // share the signal between the two children
     let (id, child) = ViewContext::new_id_with_child(stack(|| (text_input(text)), new_child(text.read_only())));
     Parent { id, text, child }
 }

 impl<V> View for Parent<V>
 where
     V: View,
 {
 // implementation omitted for brevity
 }

 struct Child {
     id: Id,
     label: Label,
 }

 // Creates a new child view with the given state (a read only signal)
 fn child(text: ReadSignal<String>) -> Child {
     let (id, label) = ViewContext::new_id_with_child(|| label(move || format!("Hello, {}", text.get())));
     Child { id, label }
 }

 impl View for Child {
   // implementation omitted for brevity
 }

 // Usage
 fn main() {
     floem::launch(parent(child));
 }

Structs

  • ViewData
    View data stores internal state associated with a view. Each view is expected to own and give access to this data.

Traits

Functions