Swift Optional background(alignment:content:)用法及代码示例

实例方法

background(alignment:content:)

将您指定的视图分层放置在该视图后面。

声明

func background<V>(
    alignment: Alignment = .center,
    content: () -> V
) -> some View where V : View

返回值

使用指定内容作为背景的视图。

参数

alignment: 修改器用于定位对背景视图进行分组的隐式 ZStack 的对齐方式。默认值为 Alignment/center 。
content: ViewBuilder 用于声明要在此视图后面绘制的视图，从下到上以级联顺序堆叠。您列出的最后一个视图显示在堆栈的前面。

详述

使用此修饰符将一个或多个视图放置在另一个视图后面。例如，您可以在 Text 视图中放置一组星星：


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

上面的例子假设你已经定义了一个带有参数化颜色的 Star 视图：


struct Star: View {
    var color: Color


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

通过为每个修饰符设置不同的alignment 值，可以使星星出现在文本后面的不同位置：

如果您在 content 闭包中指定多个视图，则修饰符会将闭包中的所有视图收集到一个隐式 ZStack 中，按从后到前的顺序排列它们。例如，您可以在一个圆圈后面放置一个垂直条，将两个垂直条放在一个水平条后面：


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)
    }

背景修饰符和由背景内容(圆形和竖线)组成的隐式ZStack 都使用默认的Alignment/center 对齐方式。垂直条出现在圆圈后面的中心，两者都显示为以水平条为中心的复合视图：

如果您为背景指定对齐方式，它将应用于隐式堆栈而不是闭包中的各个视图。如果添加 Alignment/leading 对齐，您可以看到这一点：


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

垂直条和圆形作为一个单元移动以将堆栈与水平条的前缘对齐，而垂直条保持在圆形的中心：

要控制 content 闭包中各个项目的位置，请为每个项目使用不同的背景修饰符，如前面文本下的星号示例所示，或者在内容闭包内添加一个显式的 ZStack 并具有自己的对齐方式：


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)
        }
    }

堆栈对齐确保圆的前缘与垂直条对齐，而背景修饰符将复合视图与水平条对齐：

您可以通过将修改后的视图和背景内容放入 ZStack 来实现没有背景修饰符的分层。这会产生更简单的视图层次结构，但会更改 SwiftUI 应用于视图的布局优先级。当您希望修改后的视图支配布局时，请使用背景修饰符。

如果要指定 ShapeStyle(如 HierarchicalShapeStyle 或 Material)作为背景，请改用 View/background(_:ignoresSafeAreaEdges:)。要指定 Shape 或 InsettableShape ，请分别使用 View/background(_:in:fillStyle:)-89n7j 或 View/background(_:in:fillStyle:)-20tq5 。

可用版本

iOS 15.0+, iPadOS 15.0+, macOS 12.0+, Mac Catalyst 15.0+, tvOS 15.0+, watchOS 8.0+

相关用法

注：本文由纯净天空筛选整理自apple.com大神的英文原创作品 Optional background(alignment:content:)。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。