Skip to main content

view

Macro view 

Source
view!() { /* proc-macro */ }
Expand description

The view! procedural macro transforms a declarative, JSX-inspired markup syntax into idiomatic Iced widget code at compile time.

This provides a much more readable and maintainable way to define GUI layouts compared to deeply nested builder chains, while maintaining zero runtime overhead.

§Syntax breakdown

view! {
    widget_name(constructor_args) ![attribute: value] {
        child_widget,
    }
}
  • widget_name: The Iced widget to create (e.g., column, row, text). Only widgets that support .push() (like Column and Row) should have children in {} blocks.
  • constructor_args: (Optional) Arguments passed to the widget’s creation function.
  • attributes: (Optional) Modifiers applied via ![...] (e.g., ![spacing: 10]).
  • children: (Optional) Nested widgets inside {...} separated by commas.

§Example

let _: Column<'_, Message, Theme, Renderer> = view! {
    column ![spacing: 20] {
        text("Hello World") {},
        button("Click me") ![on_press: Message::Clicked] {},
    }
};

Expands roughly to:

let _: Column<'_, Message, Theme, Renderer> = iced::widget::column([])
    .spacing(20)
    .push(iced::widget::text("Hello World"))
    .push(iced::widget::button("Click me").on_press(Message::Clicked));