Common Elements

Blocks all accessibility on the element, so that it is is no longer an accessibility element, and its children are hidden from the accessibility system.

Acts as an accessibility container for any accessible subviews.

Accessible subviews are found using the following algorithm:

Recurse subviews until a view is found that either

• hasisAccessibilityElement set to true or

If an accessibility element is found, we add it to the accessibilityElements and terminate the search down that branch. If a container is found, the elements returned from the container are added to the accessibilityElements and the search down that branch is also terminated.

Wraps an element tree with a modified environment.

By specifying environmental values with this element, all child elements nested will automatically inherit those values automatically. Values can be changed anywhere in a sub-tree by inserting another AdaptedEnvironment element.

An element that dynamically builds its content based on the environment.

Use this element to build elements whose contents may change depending on the Environment.

Example

EnvironmentReader { environment -> Element in
    MyElement(
        foo: environment.foo
    )
}

Aligns a content element within itself. The vertical and horizontal alignment may be set independently.

When using alignment mode .fill, the content is scaled to the width or height of the Aligned element.

For other modes, the size of the content element is determined by calling measure(in:) on the content element – even if that size is larger than the wrapping element.

A simple element that wraps a child element and adds visual styling including background color.

An element that wraps a child element in a button that mimics a UIButton with the .system style. That is, when highlighted (or disabled), it fades its contents to partial alpha.

Centers a content element within itself.

The size of the content element is determined by calling measure(in:) on the content element – even if that size is larger than the wrapping Centered element.

Displays a list of items in a linear vertical layout.

Constrains the size of the content element to an aspect ratio.

Constrains the measured size of the contained element in the ranges specified by the width and height properties.

There are several constraint types available for each axis. See ConstrainedSize.Constraint for a full list and in-depth descriptions of each.

Notes

An important note is that the constraints of ConstrainedSize are authoritative during measurement. For example, if your ConstrainedSize specifies .atLeast(300) for width, and the ConstrainedSize is asked to measure within a SizeConstraint that is at most 100 points wide, the returned measurement will still be 300 points. The same goes for the height of the ConstrainedSize.

An empty Element which has no size and draws no content.

An element that sizes its children equally, stacking them in the primary axis according to the specified direction and spacing them according to the specified spacing. In the secondary axis, children are justified to fill the space of the largest child.

An element that dynamically builds its content based on the available space.

Use this element to build elements whose contents may change responsively to different layouts.

Example

GeometryReader { (geometry) -> Element in
    let image: UIImage
    switch geometry.constraint.width.maximum {
    case ..<100:
        image = UIImage(named: "small")!
    case 100..<500:
        image = UIImage(named: "medium")!
    default:
        image = UIImage(named: "large")!
    }
    return Image(image: image)
}

Displays an image within an element hierarchy.

Insets a content element within a layout.

Commonly used to add padding around another element when displayed within a container.

Displays text content.

Stretches all of its child elements to fill the layout area, stacked on top of each other.

During a layout pass, measurement is calculated as the max size (in both x and y dimensions) produced by measuring all of the child elements.

View-backed descendants will be z-ordered from back to front in the order of this element’s children.

Displays a list of items in a linear horizontal layout.

A solid line, parallel to the x or y axis, with a fixed thickness but unconstrained in length, suitable for use as a separator.

Wraps a content element and makes it scrollable.

Allows users to pick from an array of options.

An element that does not display anything (it has neither children or a view).

Spacer simply takes up a specified amount of space within a layout.

Wraps a content element and calls the provided closure when tapped.

Displays a text field.

Wraps a content element and adds transitions when the element appears, disappears, or changes layout.