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

实例方法

overlay(alignment:content:)

将您在此视图前面指定的视图分层。

声明

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

返回值

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

参数

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

详述

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


RoundedRectangle(cornerRadius: 8)
    .frame(width: 200, height: 100)
    .overlay(alignment: .topLeading) { Star(color: .red) }
    .overlay(alignment: .topTrailing) { Star(color: .yellow) }
    .overlay(alignment: .bottomLeading) { Star(color: .green) }
    .overlay(alignment: .bottomTrailing) { Star(color: .blue) }

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


struct Star: View {
    var color = Color.yellow


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

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

如果您在 content 闭包中指定多个视图，则修饰符会将闭包中的所有视图收集到一个隐式 ZStack 中，按从后到前的顺序排列它们。例如，您可以在 ShapeStyle/blue 的字段上放置一个星号和一个 Circle ：


Color.blue
    .frame(width: 200, height: 200)
    .overlay {
        Circle()
            .frame(width: 100, height: 100)
        Star()
    }

覆盖修改器和由覆盖内容组成的隐式ZStack(圆形和星形)都使用默认的Alignment/center 对齐方式。星星出现在圆圈的中心，两者都显示为以正方形为中心的合成视图：

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


Color.blue
    .frame(width: 200, height: 200)
    .overlay(alignment: .bottom) {
        Circle()
            .frame(width: 100, height: 100)
        Star()
    }

圆和星作为一个单元向下移动，以使堆栈的底部边与正方形的底部边对齐，而星保持在圆的中心：

要控制 content 闭包内各个项目的放置，可以为每个项目使用不同的覆盖修饰符，如前面矩形角上的星形示例所示，或者在内容闭包内添加显式 ZStack它自己的对齐方式：


Color.blue
    .frame(width: 200, height: 200)
    .overlay(alignment: .bottom) {
        ZStack(alignment: .bottom) {
            Circle()
                .frame(width: 100, height: 100)
            Star()
        }
    }

堆栈对齐确保星形的底部边与圆形对齐，而覆盖将复合视图与正方形对齐：

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

如果要指定 ShapeStyle(如 Color 或 Material)作为覆盖，请改用 View/overlay(_:ignoresSafeAreaEdges:)。要指定 Shape ，请使用 View/overlay(_:in:fillStyle:) 。

可用版本

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

相关用法

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