Function Scaffold 

pub fn Scaffold(_: ScaffoldProps) -> Element

The screen’s frame: a top bar, a bottom bar, a floating action and the page.

Shaped after Material’s Scaffold, because that is the vocabulary people already write, and for the same reason: a screen’s frame is the same few parts every time, and assembling it by hand in every application is how every application ends up with a different one.

What it buys here is more than the layout. The application says which slot it filled and nothing about what the slot becomes. A top bar is the window’s caption on a desktop that hands its caption to the application and an ordinary bar where it does not; a bottom bar is a bar on a phone, a rail on a tablet and a permanent drawer on a desktop; a floating action floats, or sits in the toolbar, or folds into a menu. Those are decisions about the running platform and the measured window, and both of those are known in the Renderer and not here.

The page is the children, and it is laid out clear of whatever the other slots took. Nothing about that arithmetic reaches the application, which is the point: a screen that computed its own inset would be wrong the moment the Renderer chose differently.

rsx! {
    Scaffold {
        top_bar: rsx! { TopAppBar { title: "Standard" } },
        bottom_bar: rsx! { Navigation { /* destinations */ } },
        Column { /* the page */ }
    }
}

Props

For details, see the props struct definition.

• background : Option<Paint>

  The window’s own colour, where this screen holds its own palette.

  Read off the root, so a frame that is the root is where it has to be said. A screen that says nothing gets the theme’s page colour.

• material : Option<MaterialRole>

  What the window itself is made of, where the screen wants it to be a material.

  Read off the root like the colour above, and asking for it is what stands the window up with something behind it to show. MaterialRole::Chrome is the window’s own: on a platform that can put the system’s material behind a window, the desktop shows through wherever the design system draws chrome; everywhere else the design system answers the role the way it answers it on any other node.

• top_bar : Option<Element>

  The bar across the top, where this screen wants one.

• bottom_bar : Option<Element>

  The destinations, or the actions that belong at the bottom of a phone screen.

• floating_action : Option<Element>

  The one action a screen is mostly about, where it has one.

• children : Element

  The page.