如何仅垂直平铺纹理？

您可以使用 绘制图像的拉伸版本GraphicsContext，然后使用 平铺该版本resizable，

let imageHeight = ... // replace this with the height of your image
let frame = CGSize(width: 300, height: 700) // as an example
Image(size: .init(width: frame.width, height: imageHeight)) { gc in
    let image = gc.resolve(Image(.tile))
    let scale = frame.width / image.size.width
    gc.scaleBy(x: scale, y: 1)
    gc.draw(image, at: .zero, anchor: .topLeading)
    gc.scaleBy(x: 1 / scale, y: 1)
}
.resizable(resizingMode: .tile)
.frame(width: frame.width, height: frame.height)

或者，只需用 绘制整个平铺图像GraphicsContext。

Image(size: frame) { gc in
    var startY: CGFloat = 0
    let image = gc.resolve(Image(.tile))
    while startY < frame.height {
        let scale = frame.width / image.size.width
        gc.scaleBy(x: scale, y: 1)
        gc.draw(image, at: .init(x: 0, y: startY), anchor: .topLeading)
        gc.scaleBy(x: 1 / scale, y: 1)
        startY += image.size.height
    }
}

我知道这是可以接受的，但我想展示一种不同的方法，让一些人可能觉得更容易接受。

如果.resizable()可以在设置图像的框架大小或缩放以适合后应用，则不会出现问题。但据我所知，.resizable()必须是第一个修饰符，否则会出现成员错误。

那么问题是，您如何首先设置图像的宽度或纵横比，以便最终获得一个Image可以使用的视图.resizable(resizingMode:)？

您可以先调整输入图像的大小以适合框架的宽度，然后渲染为（新）图像，再使用调整大小后的图像作为Image您将使用的视图的输入.resizable(resizingMode:)。

现在，有多种方法可以做到这一点，正如@Sweeper 所展示的那样，但在下面的代码中ImageRenderer，我使用了 iOS 16 中引入的，它可以从 SwiftUI 视图创建图像。这意味着您可以随心所欲地构建视图，然后将其用作 的输入ImageRenderer，然后它基本上会成为您的重复图块。请参阅最后的示例。

完整代码如下：

import SwiftUI

struct TileRepeatView: View {
    
    //Parameters
    let image: ImageResource
    let frameSize: CGSize
    
    //Body
    var body: some View {
        
        //ScrollView
        ScrollView(showsIndicators: false) {
            Rectangle()
                .stroke(.black)
                .background(alignment: .topLeading) {
                    
                    //Safely unwrap optional Image? returned by resizeToWidth()
                    if let resizedImage = resizeToWidth(image: image, targetSize: frameSize.width) {
                        
                        resizedImage // <- this is the returned Image view
                            .resizable(resizingMode: .tile) // <- now you can use .tile without clipping
                    } else {
                        //Show a placeholder or content unavailable message
                        ContentUnavailableView {
                            Label("Rendering failed", systemImage: "questionmark.circle.fill")
                        }
                    }
                }
                .frame(width: frameSize.width, height: frameSize.height)
        }
        .frame(maxWidth: .infinity, alignment: .center)
    }
    
    //Function to resize an image to a specified width and return an Image view
    private func resizeToWidth(image: ImageResource, targetSize: CGFloat) -> Image? {
        
        //Create a view required for ImageRenderer
        let imageView = Image(image)
            .resizable()
            .frame(width: targetSize)

        let renderer = ImageRenderer(content: imageView)
    
        //Return nil if renderer doesn't return an uiImage
        guard let uiImage = renderer.uiImage else {
            print("Failed to render image")
            return nil
        }
    
        //return Image view
        return Image(uiImage: uiImage)
    }
}

//Preview
#Preview {
    @Previewable @State var frameSize: CGSize = .init(width: 300, height: 700)
    
    //Preview controls
    HStack {
        Text("Frame:")
        Group {
            Button {
                frameSize = CGSize(width: 300, height: 700)
            } label: {
                Text("Size 1")
            }
            
            Button {
                frameSize = CGSize(width: 100, height: 800)
            } label: {
                Text("Size 2")
            }
            
            Button {
                frameSize = CGSize(width: 200, height: 1200)
            } label: {
                Text("Size 3")
            }
        }
        .buttonStyle(.bordered)
        .padding(.vertical)
    }
    
    TileRepeatView(image: .tile, frameSize: frameSize) // <- update the image here as needed
}

注意：我保存了您提供的原始图块图像，并对其进行了粗略裁剪，然后将其导入到 Assets 中，名称为“tile”。您也可以按照以下格式提供名称，也可以将类型更新为适合您的模型的任何类型：

TileRepeatView(image: .init(name: "tile", bundle: .main), frameSize: frameSize) 

这是使用的平铺图像：

可选示例- 由于ImageRenderer可以将任何视图作为输入，因此您可以根据需要自定义视图。这是一个粗略的示例，使用添加到的叠​​加层imageView，添加将与图块重复的水印。

//Create a view required for ImageRenderer
let imageView = Image(image)
    .resizable()
    .frame(width: targetSize)
    .overlay {
        Text("Sample")
            .font(.system(size: 100))
            .rotationEffect(.degrees(-90))
            .fixedSize()
            .foregroundStyle(.white.opacity(0.5))
    }