当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


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(如 HierarchicalShapeStyleMaterial)作为背景,请改用 View/background(_:ignoresSafeAreaEdges:)。要指定 ShapeInsettableShape ,请分别使用 View/background(_:in:fillStyle:)-89n7jView/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:)。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。