Swift Never 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大神的英文原創作品 Never overlay(alignment:content:)。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。