Struct Shape 

pub struct Shape { /* private fields */ }

A shape, before it is given something to draw with.

Circle() is a Shape, not yet a View: SwiftUI gives it a default fill when one is used as a view, and .fill() says what to use instead. Keeping that distinction here is what lets circle().fill(.red) build the type the same line of Swift builds, rather than a Circle with a foreground style over it.

Implementations

impl Shape

pub fn fill(self, c: Color) -> View

.fill(_) — draw the shape in one colour.

Examples found in repository

examples/common/spec.rs (line 540)

fn node_view(node: &Node) -> Result<View, String> {
    let spacing = node.f64_attr("spacing").unwrap_or(8.0);
    let base = match node.name.as_str() {
        "vstack" => {
            let kids = children(node)?;
            match node.attr("align") {
                Some(a) => vstack_aligned_spacing(&kids, h_align(a, node.line)?, Some(spacing)),
                None => vstack_spacing(&kids, spacing),
            }
        }
        "hstack" => {
            let kids = children(node)?;
            match node.attr("align") {
                Some(a) => hstack_aligned_spacing(&kids, v_align(a, node.line)?, Some(spacing)),
                None => hstack_spacing(&kids, spacing),
            }
        }
        "zstack" => zstack_aligned(&children(node)?, align(node.attr("align").unwrap_or("center"), node.line)?),
        "text" => {
            let s = node.value.as_deref().unwrap_or("");
            let mut v = text(s);
            if let Some(style) = node.attr("style") {
                v = v.text_style(text_style(style, node.line)?);
            }
            if let Some(size) = node.f64_attr("size") {
                v = v.font_size(size);
            }
            if node.flag("bold") {
                v = v.bold();
            }
            if node.flag("italic") {
                v = v.italic();
            }
            if let Some(c) = node.attr("color") {
                v = match tint(c, node.line)? {
                    Tint::System(sc) => v.fg_system(sc),
                    Tint::Literal(lc) => v.fg(lc),
                };
            }
            v
        }
        "spacer" => spacer(),
        "divider" => divider(),
        // The action is a no-op on purpose: a spec read from a file has nowhere
        // to put behaviour, and pretending otherwise would be worse than a
        // button that visibly does nothing. `hot_reload.rs` is where a spec
        // gains behaviour, by being reloaded.
        "button" => button(node.value.as_deref().unwrap_or("Button"), || {}),
        "color" => color(parse_color(node.value.as_deref().unwrap_or("#808080"), node.line)?),
        "image" => system_image(node.value.as_deref().unwrap_or("star")).into_view(),
        "rect" => match node.attr("color") {
            Some(c) => match tint(c, node.line)? {
                Tint::System(sc) => rectangle_shape().fill_system(sc),
                Tint::Literal(lc) => rectangle_shape().fill(lc),
            },
            None => rectangle_shape().into_view(),
        },
        "circle" => match node.attr("color") {
            Some(c) => match tint(c, node.line)? {
                Tint::System(sc) => circle_shape().fill_system(sc),
                Tint::Literal(lc) => circle_shape().fill(lc),
            },
            None => circle_shape().into_view(),
        },
        "capsule" => match node.attr("color") {
            Some(c) => match tint(c, node.line)? {
                Tint::System(sc) => capsule_shape().fill_system(sc),
                Tint::Literal(lc) => capsule_shape().fill(lc),
            },
            None => capsule_shape().into_view(),
        },
        "progress" => progress(
            node.value.as_deref().and_then(|v| v.parse().ok()).unwrap_or(0.5),
            node.f64_attr("total").unwrap_or(1.0),
        ),
        "gauge" => gauge(
            node.value.as_deref().and_then(|v| v.parse().ok()).unwrap_or(0.5),
            node.f64_attr("min").unwrap_or(0.0),
            node.f64_attr("max").unwrap_or(1.0),
            text(node.attr("label").unwrap_or("")),
        ),
        "group_box" => group_box(stack_children(node)?),
        "list" => list(stack_children(node)?),
        "scroll" => stack_children(node)?.scroll(),
        "form" => form(stack_children(node)?),
        // Every bound control needs an explicit `@name`.
        //
        // Inventing one — from the line, or from position in the tree — looks
        // friendlier and is a trap: adding a line above a `toggle` would
        // change its derived name, and the control would silently reset on the
        // next reload. A name the file states is a name that survives the file
        // being edited, which is the entire point of the slots.
        "toggle" => toggle_bound(
            node.value.as_deref().unwrap_or("Toggle"),
            &flag_slot(&require_slot(node)?, node.flag("on")),
        ),
        "slider" => {
            let lo = node.f64_attr("min").unwrap_or(0.0);
            let hi = node.f64_attr("max").unwrap_or(1.0);
            slider_bound(
                &number_slot(&require_slot(node)?, node.f64_attr("value").unwrap_or(lo)),
                lo,
                hi,
            )
        }
        "stepper" => stepper_bound(
            node.value.as_deref().unwrap_or("Stepper"),
            &number_slot(&require_slot(node)?, node.f64_attr("value").unwrap_or(0.0)),
            node.f64_attr("min").unwrap_or(0.0),
            node.f64_attr("max").unwrap_or(100.0),
            node.f64_attr("step").unwrap_or(1.0),
        ),
        "field" => textfield_bound(
            node.value.as_deref().unwrap_or(""),
            &string_slot(&require_slot(node)?, node.attr("text").unwrap_or("")),
        ),
        "label" => label(
            node.value.as_deref().unwrap_or(""),
            node.attr("icon").unwrap_or("star"),
        ),
        other => {
            return Err(format!(
                "line {}: no view called `{other}`; try one of {}",
                node.line,
                NAMES.join(", ")
            ))
        }
    };
    decorate(base, node)
}

pub fn fill_system(self, c: SystemColor) -> View

.fill(_) with one of SwiftUI’s own colours.

.blue is not a fixed triple: it is (0, 0.569, 1) on the Mac and #007AFF on iOS, and it changes again in dark appearance. Naming the colour asks SwiftUI for whichever one is right, where spelling out components picks one platform’s answer and freezes it.

Examples found in repository

examples/inbox.rs (line 84)

fn row(i: usize) -> View {
    let m = &MESSAGES[i];
    hstack_spacing(
        &[
            // An unread dot, or the space where one would be.
            view_if!(
                m.unread,
                circle_shape().fill_system(SystemColor::Blue).frame(8.0, 8.0),
                empty().frame(8.0, 8.0)
            ),
            vstack_aligned(
                &[
                    text(m.from).bold(),
                    text(m.subject).font_size(12.0).fg_system(SystemColor::Gray),
                ],
                HorizontalAlignment::Leading,
            ),
            spacer(),
        ],
        8.0,
    )
    .padding_edges(EdgeSet::Vertical, Some(4.0))
    .a11y_label(&format!("{}, {}", m.from, m.subject))
    .a11y_hint(if m.unread { "Unread" } else { "Read" })
}

examples/swift_org_tutorial.rs (line 137)

fn body() -> View {
    let colour = COLORS[COLOR.load(Ordering::Relaxed) % COLORS.len()];

    vstack![
        // Text("Why not try…").font(.largeTitle.bold())
        text("Why not try…").text_style(TextStyle::LargeTitle).bold(),
        vstack![
            // Circle().fill(colors.randomElement() ?? .blue).padding().overlay(…)
            circle_shape().fill_system(colour).padding(16.0).overlay(
                // Image(systemName: "figure.\(selected.lowercased())")
                //     .font(.system(size: 144)).foregroundColor(.white)
                image!("figure.{}", selected().to_lowercase())
                    .font_size(144.0)
                    .fg(Color::WHITE),
            ),
            // Text("\(selected)!").font(.title)
            text!("{}!", selected()).text_style(TextStyle::Title),
        ]
        .transition(Transition::Slide)
        .id(ID.load(Ordering::Relaxed)),
        spacer(),
        // Button("Try again") { … }.buttonStyle(.borderedProminent)
        button("Try again", try_again).button_style(ButtonStyle::BorderedProminent),
    ]
}

examples/hot_reload.rs (lines 139-143)

fn status(error: Option<&str>, generation: u64, micros: u64) -> View {
    let slots = spec::slot_summary();
    let slot_line = if slots.is_empty() {
        String::new()
    } else {
        slots
            .iter()
            .map(|(k, v)| format!("{k}={v}"))
            .collect::<Vec<_>>()
            .join("  ")
    };

    // The error row is *always* present, empty when there is nothing wrong.
    // An error that appears and disappears would otherwise reflow the screen
    // above it on every save — which looks exactly like the reloader having
    // replaced the view, and makes "did the screen survive this?" impossible
    // to answer by looking.
    let rows = vec![
        divider(),
        hstack_spacing(
            &[
                circle_shape()
                    .fill_system(if error.is_some() {
                        SystemColor::Orange
                    } else {
                        SystemColor::Clear
                    })
                    .frame(8.0, 8.0),
                text(error.unwrap_or(""))
                    .font_size(11.0)
                    .fg_system(SystemColor::Orange),
                spacer(),
            ],
            6.0,
        )
        .padding(6.0)
        .frame(348.0, 24.0),
        hstack_spacing(
            &[
                circle_shape()
                    .fill_system(if error.is_some() {
                        SystemColor::Orange
                    } else {
                        SystemColor::Green
                    })
                    .frame(8.0, 8.0),
                text(&format!("gen {generation}"))
                    .font_size(11.0)
                    .fg_system(SystemColor::Secondary),
                // Microseconds below a millisecond: a reload of a short spec
                // really is that fast, and "0.0 ms" reads as "not measured".
                text(&if micros < 1000 {
                    format!("{micros} \u{b5}s")
                } else {
                    format!("{:.1} ms", micros as f64 / 1000.0)
                })
                .font_size(11.0)
                .fg_system(SystemColor::Secondary),
                spacer(),
                text(&slot_line).font_size(11.0).fg_system(SystemColor::Secondary),
            ],
            8.0,
        )
        .padding(6.0)
        .frame(348.0, 24.0),
    ];
    vstack_spacing(&rows, 0.0)
}

examples/common/spec.rs (line 539)

fn node_view(node: &Node) -> Result<View, String> {
    let spacing = node.f64_attr("spacing").unwrap_or(8.0);
    let base = match node.name.as_str() {
        "vstack" => {
            let kids = children(node)?;
            match node.attr("align") {
                Some(a) => vstack_aligned_spacing(&kids, h_align(a, node.line)?, Some(spacing)),
                None => vstack_spacing(&kids, spacing),
            }
        }
        "hstack" => {
            let kids = children(node)?;
            match node.attr("align") {
                Some(a) => hstack_aligned_spacing(&kids, v_align(a, node.line)?, Some(spacing)),
                None => hstack_spacing(&kids, spacing),
            }
        }
        "zstack" => zstack_aligned(&children(node)?, align(node.attr("align").unwrap_or("center"), node.line)?),
        "text" => {
            let s = node.value.as_deref().unwrap_or("");
            let mut v = text(s);
            if let Some(style) = node.attr("style") {
                v = v.text_style(text_style(style, node.line)?);
            }
            if let Some(size) = node.f64_attr("size") {
                v = v.font_size(size);
            }
            if node.flag("bold") {
                v = v.bold();
            }
            if node.flag("italic") {
                v = v.italic();
            }
            if let Some(c) = node.attr("color") {
                v = match tint(c, node.line)? {
                    Tint::System(sc) => v.fg_system(sc),
                    Tint::Literal(lc) => v.fg(lc),
                };
            }
            v
        }
        "spacer" => spacer(),
        "divider" => divider(),
        // The action is a no-op on purpose: a spec read from a file has nowhere
        // to put behaviour, and pretending otherwise would be worse than a
        // button that visibly does nothing. `hot_reload.rs` is where a spec
        // gains behaviour, by being reloaded.
        "button" => button(node.value.as_deref().unwrap_or("Button"), || {}),
        "color" => color(parse_color(node.value.as_deref().unwrap_or("#808080"), node.line)?),
        "image" => system_image(node.value.as_deref().unwrap_or("star")).into_view(),
        "rect" => match node.attr("color") {
            Some(c) => match tint(c, node.line)? {
                Tint::System(sc) => rectangle_shape().fill_system(sc),
                Tint::Literal(lc) => rectangle_shape().fill(lc),
            },
            None => rectangle_shape().into_view(),
        },
        "circle" => match node.attr("color") {
            Some(c) => match tint(c, node.line)? {
                Tint::System(sc) => circle_shape().fill_system(sc),
                Tint::Literal(lc) => circle_shape().fill(lc),
            },
            None => circle_shape().into_view(),
        },
        "capsule" => match node.attr("color") {
            Some(c) => match tint(c, node.line)? {
                Tint::System(sc) => capsule_shape().fill_system(sc),
                Tint::Literal(lc) => capsule_shape().fill(lc),
            },
            None => capsule_shape().into_view(),
        },
        "progress" => progress(
            node.value.as_deref().and_then(|v| v.parse().ok()).unwrap_or(0.5),
            node.f64_attr("total").unwrap_or(1.0),
        ),
        "gauge" => gauge(
            node.value.as_deref().and_then(|v| v.parse().ok()).unwrap_or(0.5),
            node.f64_attr("min").unwrap_or(0.0),
            node.f64_attr("max").unwrap_or(1.0),
            text(node.attr("label").unwrap_or("")),
        ),
        "group_box" => group_box(stack_children(node)?),
        "list" => list(stack_children(node)?),
        "scroll" => stack_children(node)?.scroll(),
        "form" => form(stack_children(node)?),
        // Every bound control needs an explicit `@name`.
        //
        // Inventing one — from the line, or from position in the tree — looks
        // friendlier and is a trap: adding a line above a `toggle` would
        // change its derived name, and the control would silently reset on the
        // next reload. A name the file states is a name that survives the file
        // being edited, which is the entire point of the slots.
        "toggle" => toggle_bound(
            node.value.as_deref().unwrap_or("Toggle"),
            &flag_slot(&require_slot(node)?, node.flag("on")),
        ),
        "slider" => {
            let lo = node.f64_attr("min").unwrap_or(0.0);
            let hi = node.f64_attr("max").unwrap_or(1.0);
            slider_bound(
                &number_slot(&require_slot(node)?, node.f64_attr("value").unwrap_or(lo)),
                lo,
                hi,
            )
        }
        "stepper" => stepper_bound(
            node.value.as_deref().unwrap_or("Stepper"),
            &number_slot(&require_slot(node)?, node.f64_attr("value").unwrap_or(0.0)),
            node.f64_attr("min").unwrap_or(0.0),
            node.f64_attr("max").unwrap_or(100.0),
            node.f64_attr("step").unwrap_or(1.0),
        ),
        "field" => textfield_bound(
            node.value.as_deref().unwrap_or(""),
            &string_slot(&require_slot(node)?, node.attr("text").unwrap_or("")),
        ),
        "label" => label(
            node.value.as_deref().unwrap_or(""),
            node.attr("icon").unwrap_or("star"),
        ),
        other => {
            return Err(format!(
                "line {}: no view called `{other}`; try one of {}",
                node.line,
                NAMES.join(", ")
            ))
        }
    };
    decorate(base, node)
}

pub fn view(self) -> View

The shape as a view, with SwiftUI’s default fill.

pub fn stroke(self, c: Color, line_width: f64) -> View

.stroke(_:lineWidth:) — the outline instead of the fill.

pub fn stroke_system(self, c: SystemColor, line_width: f64) -> View

.stroke(_:lineWidth:) with one of SwiftUI’s own colours.

Examples found in repository

examples/dashboard.rs (line 33)

fn tile(i: usize) -> View {
    let value = reading(i);
    vstack_spacing(
        &[
            zstack![
                circle_shape().stroke_system(SystemColor::Gray, 6.0).opacity(0.25),
                // The filled part: the same circle trimmed to the fraction, and
                // turned so the arc starts at the top rather than at three
                // o'clock.
                circle_shape()
                    .trim(0.0, value)
                    .stroke_system(TINTS[i], 6.0)
                    .rotate(-90.0),
                text!("{:.0}", value * 100.0).text_style(TextStyle::Title2).bold(),
            ]
            .frame(72.0, 72.0),
            text(LABELS[i]).font_size(12.0).fg_system(SystemColor::Gray),
        ],
        8.0,
    )
    .padding(12.0)
    .a11y_element(AccessibilityChildBehavior::Combine)
    .a11y_label(LABELS[i])
    .a11y_value(&format!("{:.0} percent", value * 100.0))
}

pub fn fill_then_stroke( self, fill: Color, stroke: Color, line_width: f64, ) -> View

.fill(_).stroke(_, lineWidth:) — both at once, which a shape cannot express by chaining because .fill already produces a view.

Works on transformed shapes too: .inset(2) gives a Circle._Inset, which this now spells correctly. It used to assert, because inset(by:) returns some InsettableShape and the binding kept the shape it started as — so the result was named StrokeShapeView<Circle, …>, a type that exists, is the wrong one, and is laid out differently.

The field offsets are still computed by padding each to eight rather than read from the metadata, and still checked against the type’s own size before anything is written.

pub fn fill_then_stroke_border( self, fill: Color, border: Color, line_width: f64, ) -> View

.fill(_).strokeBorder(_, lineWidth:) — filled, then bordered inside its own edge.

The difference from fill_then_stroke is where the line sits: a stroke straddles the edge and a border is drawn within it, so a bordered shape never paints outside its bounds.

pub fn stroke_default(self, line_width: f64) -> View

.stroke(lineWidth:) — outlined in the inherited foreground style, which is what picks up an enclosing .foregroundStyle.

pub fn trim(self, from: f64, to: f64) -> Self

.trim(from:to:) — keep a fraction of the path, as unit fractions.

How a progress ring is drawn: a stroked circle trimmed to the fraction complete, usually with .rotate(-90.0) after it so the arc starts at the top rather than at three o’clock. Without it a “ring showing 70%” is a full circle.

Examples found in repository

examples/dashboard.rs (line 38)

fn tile(i: usize) -> View {
    let value = reading(i);
    vstack_spacing(
        &[
            zstack![
                circle_shape().stroke_system(SystemColor::Gray, 6.0).opacity(0.25),
                // The filled part: the same circle trimmed to the fraction, and
                // turned so the arc starts at the top rather than at three
                // o'clock.
                circle_shape()
                    .trim(0.0, value)
                    .stroke_system(TINTS[i], 6.0)
                    .rotate(-90.0),
                text!("{:.0}", value * 100.0).text_style(TextStyle::Title2).bold(),
            ]
            .frame(72.0, 72.0),
            text(LABELS[i]).font_size(12.0).fg_system(SystemColor::Gray),
        ],
        8.0,
    )
    .padding(12.0)
    .a11y_element(AccessibilityChildBehavior::Combine)
    .a11y_label(LABELS[i])
    .a11y_value(&format!("{:.0} percent", value * 100.0))
}

pub fn inset(self, amount: f64) -> Self

.inset(by:) — still a shape, so it can be filled or stroked after.

Insetting before stroking is how you keep a lineWidth inside the frame; stroking alone centres the line on the edge and spills half of it.

pub fn offset(self, x: f64, y: f64) -> Self

.offset(x:y:) on the shape itself, before it is filled.

pub fn rotation(self, degrees: f64) -> Self

.rotation(.degrees(_)) on the shape’s path.

Trait Implementations

impl IntoView for Shape

fn into_view(self) -> View