background(alignment:content:)

Return Value 戻り値

A view that uses the specified content as a background.

Discussion 議論

Use this modifier to place one or more views behind another view. For example, you can place a collection of stars beind a Text view:

Text("ABCDEF")
    .background(alignment: .leading) { Star(color: .red) }
    .background(alignment: .center) { Star(color: .green) }
    .background(alignment: .trailing) { Star(color: .blue) }

The example above assumes that you’ve defined a Star view with a parameterized color:

struct Star: View {
    var color: Color


    var body: some View {
        Image(systemName: "star.fill")
            .foregroundStyle(color)
    }
}

By setting different alignment values for each modifier, you make the stars appear in different places behind the text:

If you specify more than one view in the content closure, the modifier collects all of the views in the closure into an implicit ZStack, taking them in order from back to front. For example, you can layer a vertical bar behind a circle, with both of those behind a horizontal bar:

Color.blue
    .frame(width: 200, height: 10) // Creates a horizontal bar.
    .background {
        Color.green
            .frame(width: 10, height: 100) // Creates a vertical bar.
        Circle()
            .frame(width: 50, height: 50)
    }

Both the background modifier and the implicit ZStack composed from the background content — the circle and the vertical bar — use a default center alignment. The vertical bar appears centered behind the circle, and both appear as a composite view centered behind the horizontal bar:

If you specify an alignment for the background, it applies to the implicit stack rather than to the individual views in the closure. You can see this if you add the leading alignment:

Color.blue
    .frame(width: 200, height: 10)
    .background(alignment: .leading) {
        Color.green
            .frame(width: 10, height: 100)
        Circle()
            .frame(width: 50, height: 50)
    }

The vertical bar and the circle move as a unit to align the stack with the leading edge of the horizontal bar, while the vertical bar remains centered on the circle:

To control the placement of individual items inside the content closure, either use a different background modifier for each item, as the earlier example of stars under text demonstrates, or add an explicit ZStack inside the content closure with its own alignment:

Color.blue
    .frame(width: 200, height: 10)
    .background(alignment: .leading) {
        ZStack(alignment: .leading) {
            Color.green
                .frame(width: 10, height: 100)
            Circle()
                .frame(width: 50, height: 50)
        }
    }

The stack alignment ensures that the circle’s leading edge aligns with the vertical bar’s, while the background modifier aligns the composite view with the horizontal bar:

You can achieve layering without a background modifier by putting both the modified view and the background content into a ZStack. This produces a simpler view hierarchy, but it changes the layout priority that SwiftUI applies to the views. Use the background modifier when you want the modified view to dominate the layout.

If you want to specify a ShapeStyle like a HierarchicalShapeStyle or a Material as the background, use background(_:ignoresSafeAreaEdges:) instead. To specify a Shape or InsettableShape, use background(_:in:fillStyle:) or background(_:in:fillStyle:), respectively.