Instance Method

frame(width:height:alignment:)

Positions this view within an invisible frame with the specified size.

Declaration

func frame(width: CGFloat? = nil, height: CGFloat? = nil, alignment: Alignment = .center) -> some View

Parameters

width

A fixed width for the resulting view. If width is nil, the resulting view assumes this view’s sizing behavior.

height

A fixed height for the resulting view. If height is nil, the resulting view assumes this view’s sizing behavior.

alignment

The alignment of this view inside the resulting view. alignment applies if this view is smaller than the size given by the resulting frame.

Return Value

A view with fixed dimensions of width and height, for the parameters that are non-nil.

Discussion

Use this method to specify a fixed size for a view’s width, height, or both. If you only specify one of the dimensions, the resulting view assumes this view’s sizing behavior in the other dimension.

For example, the following code lays out an ellipse in a fixed 200 by 100 frame. Because a shape always occupies the space offered to it by the layout system, the first ellipse is 200x100 points. The second ellipse is laid out in a frame with only a fixed height, so it occupies that height, and whatever width the layout system offers to its parent.

VStack {
    Ellipse()
        .fill(Color.purple)
        .frame(width: 200, height: 100)
    Ellipse()
        .fill(Color.blue)
        .frame(height: 100)
}
A screenshot showing the effect of frame size options: a purple ellipse shows the effect of a fixed frame size, while a blue ellipse shows the effect of constraining a view in one dimension.

The alignment parameter specifies this view’s alignment within the frame.

Text("Hello world!")
    .frame(width: 200, height: 30, alignment: .topLeading)
    .border(Color.gray)

In the example above, the text is positioned at the top, leading corner of the frame. If the text is taller than the frame, its bounds may extend beyond the bottom of the frame’s bounds.

A screenshot showing the effect of frame size options on a text view showing a fixed frame size with a specified alignment.

See Also

Sizing a View

func fixedSize() -> View

Fixes this view at its ideal size.

func fixedSize(horizontal: Bool, vertical: Bool) -> View

Fixes this view at its ideal size in the specified dimensions.

func layoutPriority(Double) -> View

Sets the priority by which a parent layout should apportion space to this child.