Skip to main content
ViewThatFits(children: Component[]): Component;
ViewThatFits(props: { axes?: Axis }, children: Component[]): Component;
​
children
Component[]
required
An array of alternative layouts, ordered from most preferred to least preferred. The first child that fits in the available space is rendered.
​
props
object
Configuration options.

​
Support

​
Usage

​
Responsive layout

Provide a wide layout and a narrow fallback. ViewThatFits selects the first one that fits: 
ViewThatFits([
    HStack({ spacing: 12 }, [
        Image({ systemName: "star.fill" }),
        Text("Favorites"),
        Text("View all your saved items")
    ]),
    VStack({ spacing: 8 }, [
        Image({ systemName: "star.fill" }),
        Text("Favorites")
    ])
])

​
Horizontal axis only

Test fit only along the horizontal axis: 
ViewThatFits({ axes: "horizontal" }, [
    HStack([
        Text("Full Label Text"),
        Spacer(),
        Text("Value")
    ]),
    HStack([
        Text("Label"),
        Spacer(),
        Text("Value")
    ]),
    Text("Value")
])

​
Adaptive button bar

ViewThatFits([
    HStack({ spacing: 8 }, [
        Button("Save", () => {}),
        Button("Cancel", () => {}),
        Button("Reset", () => {})
    ]),
    VStack({ spacing: 8 }, [
        Button("Save", () => {}),
        Button("Cancel", () => {}),
        Button("Reset", () => {})
    ])
])

​
Notes

  • Children are tested in order. The first child whose ideal size fits within the available space is rendered. All others are discarded.
  • If no child fits, the last child is used as the fallback.
  • This is useful for building responsive layouts that adapt to different screen sizes without using GeometryReader.

​
See Also