Início / coding / Perguntas / 77032884
Accepted
Reinhard Männer
Asked: 2023-09-03 23:02:56 +0800 CST

Como exibir verticalmente uma série de imagens transformadas no SwiftUI?

  • 772

Meu aplicativo possui uma matriz handde uma estrutura com uma propriedade let blatt: Image. Durante init, an Imageé atribuído a esta propriedade.

Para exibir tal array horizontalmente, eu uso o seguinte código ( scaledWidthé alguma constante):

HStack(spacing: 10) {
    ForEach((0 ..< hand.count), id: \.self) {
        hand[$0].blatt
            .resizable()
            .scaledToFit() 
            .frame(height: scaledWidth)
            .border(.black)
    }
}

Isso fornece a seguinte saída:

insira a descrição da imagem aqui

Isso é o que eu esperava.

Outra matriz deve ser exibida verticalmente. Para isso, estou utilizando o seguinte código:

VStack(spacing: 10) {
    ForEach((0 ..< hand.count), id: \.self) {
        hand[$0].blatt
            .resizable()
            .scaledToFit() 
            .rotationEffect(Angle(degrees: 90))
            .frame(width: scaledWidth, height: scaledWidth)
            .border(.black)
    }
}

Isso fornece adicionalmente a seguinte saída:

insira a descrição da imagem aqui

Aqui, a altura de cada quadro, indicada pelo quadro com borda, é a altura da imagem não girada.

Como conheço a proporção aspectRatioBlattdas imagens, posso ajustar a saída usando .frame(width: scaledWidth, height: scaledWidth / aspectRatioBlatt). Então, os quadros têm as dimensões corretas e o espaçamento correto, mas as imagens internas são muito pequenas. Novamente, a altura do quadro é igual à altura da imagem interna não girada.

Tentei muitos modificadores de visualização e várias combinações, mas falhei. Até tentei usar um layout personalizado como sugerido aqui para o Text vertical , mas também não funcionou.
Claro que eu poderia usar um segundo conjunto de imagens transformadas, mas deveria ser possível sem ele no SwiftUI.

Como fazer certo?

ios

1 respostas

  1. Best Answer

    Pode ser mais simples girar HStack.

    Caso contrário, se você souber a proporção, poderá definir o tamanho do quadro antes da rotação e ajustar a altura após a rotação:

    struct ContentView: View {

    let width = CGFloat(50)
    let aspectRatio = 31.0 / 15.0
    let colors: [Color] = [.green, .blue, .mint, .teal, .purple]

    var body: some View {
        VStack(spacing: 50) {
            HStack(spacing: 10) {
                ForEach((0 ..< colors.count), id: \.self) { index in
                    Image(systemName: "figure.wave")
                        .resizable()
                        .scaledToFit()
                        .frame(width: width, height: width * aspectRatio)
                        .background { colors[index] }
                        .border(.black)
                }
            }
            VStack(spacing: 10) {
                ForEach((0 ..< colors.count), id: \.self) { index in
                    Image(systemName: "figure.wave")
                        .resizable()
                        .scaledToFit()
                        .frame(width: width, height: width * aspectRatio)
                        .background { colors[index] }
                        .border(.black)
                        .rotationEffect(.degrees(90))
                        .frame(height: width)
                }
            }
        }
    }
}

    Imagens giradas

    Descobri que também funcionava definindo apenas a largura e depois usando scaledToFill:

    struct ContentView: View {

    let width = CGFloat(50)
    let colors: [Color] = [.green, .blue, .mint, .teal, .purple]

    var body: some View {
        VStack(spacing: 50) {
            HStack(spacing: 10) {
                ForEach((0 ..< colors.count), id: \.self) { index in
                    Image(systemName: "figure.wave")
                        .resizable()
                        .scaledToFit()
                        .frame(width: width)
                        .background { colors[index] }
                        .border(.black)
                }
            }
            VStack(spacing: 10) {
                ForEach((0 ..< colors.count), id: \.self) { index in
                    Image(systemName: "figure.wave")
                        .resizable()
                        .scaledToFill()
                        .frame(width: width)
                        .background { colors[index] }
                        .border(.black)
                        .rotationEffect(.degrees(90))
                        .frame(height: width)
                }
            }
        }
    }
}
    • 1

relate perguntas