Como aplicar uma textura somente na vertical?

Você pode desenhar uma versão esticada da imagem usando um GraphicsContext, e então dividi-la em blocos usando 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)

Ou simplesmente desenhe a imagem inteira em mosaico com o 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
    }
}

Sei que isso foi aceito, mas eu queria mostrar um método diferente que pode parecer mais acessível para alguns.

Se .resizable()pudesse ser aplicado após definir um tamanho de quadro para a imagem ou dimensioná-la para caber, isso não seria um problema. Mas, até onde eu sei, .resizable()deve ser o primeiro modificador ou então você obtém um erro de membro.

Então a questão é: como você pode definir a largura ou a proporção da imagem primeiro, de modo que você tenha uma Imagevisualização que possa usar .resizable(resizingMode:)nela?

Você pode fazer isso redimensionando a imagem de entrada primeiro para ajustá-la à largura do quadro, renderizando-a como uma (nova) imagem e, então, usando a imagem redimensionada como entrada para a Imagevisualização que você usará .resizable(resizingMode:).

Agora, há várias maneiras de fazer isso, como @Sweeper mostrou, mas no código abaixo eu usei ImageRenderer, introduzido com o iOS 16, que pode criar imagens a partir de visualizações SwiftUI. Isso significa que você pode construir sua visualização da maneira que quiser e então usar isso como entrada para ImageRenderer, que então basicamente se tornará seu bloco repetido. Veja o exemplo no final.

Aqui está o código completo:

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
}

Nota: Salvei a imagem original do tile que você forneceu, cortei-a grosseiramente e importei-a para o Assets com o nome "tile". Você também pode fornecer um nome no formato abaixo ou pode atualizar o tipo para o que for mais adequado ao seu modelo:

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

Esta é a imagem do bloco usada:

Exemplo opcional - Como ImageRendererpode receber qualquer visualização como entrada, você pode personalizar a visualização conforme necessário. Aqui está um exemplo aproximado, usando uma sobreposição adicionada ao imageView, que adiciona uma marca d'água que se repetirá com o tile.

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