Início / coding / Perguntas / 79432938
Accepted
g i i k
Asked: 2025-02-12 19:47:55 +0800 CST

Comportamento inesperado do modificador aspectRatio(_:contentMode:)

  • 772

Usando o seguinte

@main
struct aspectratioApp: App {
  var body: some Scene {
    WindowGroup { ContentView().border(.blue, width: 2).padding() }
  }
}

e ContentViewsem o aspectRatiomodificador aplicado (veja abaixo), os resultados são como esperado, incl. Canvaspreenche o espaço disponível (que eu acho que é o comportamento padrão), gerando canvas size: (243.0, 78.0)no console: insira a descrição da imagem aqui

Em seguida, vamos aplicar o .aspectRatio(isSquare ? 1 : nil, contentMode: isSquare ? .fit : .fill)modificador, que acredito que está dizendo para fazer Canvasum quadrado que se encaixe ou o que quer que preencha o espaço disponível (veja ContentView com aspectRatio abaixo). Logo de início, obtenho um quadrado Canvascomo este: insira a descrição da imagem aqui

e um tamanho de tela quadrada impresso no console. A alternância isSquaremantém o quadrado da tela com um tamanho ligeiramente menor:

canvas size: (157.0, 157.0)
canvas size: (130.0, 130.0)

O que estou esquecendo aqui? A documentação para aspectRatio documenta o parâmetro aspectRatio da seguinte forma: A proporção de largura para altura a ser usada para a visualização resultante. Use nil para manter a proporção atual na visualização resultante. que eu interpreto como significando qualquer que seja a proporção se o modificador não for aplicado.

Não é assim que funciona? O modificador não é stateless, ou seja, ele se lembrou de que a tela era quadrada uma vez e está apenas mantendo isso para sempre, incl. em reinicializações do aplicativo?

ContentView sem AspectRatio

struct ContentView: View {
  @State private var isSquare = false
  var body: some View {
    VStack {
      Text("isSquare: \(isSquare)").padding()
      Canvas { _, size in print("canvas size: \(size)") }
        .border(.teal, width: 2)
        .padding()
      Toggle(isOn: $isSquare) { Text("Constrain to Square") }.padding()
    }
    .border(.yellow, width: 2)
    .padding()
  }
}

ContentView com proporção de aspecto

struct ContentView: View {
  @State private var isSquare = false
  var body: some View {
    VStack {
      Text("isSquare: \(isSquare)").padding()
      Canvas { _, size in print("canvas size: \(size)") }
        .aspectRatio(isSquare ? 1 : nil, contentMode: isSquare ? .fit : .fill)
        .border(.teal, width: 2)
        .padding()
      Toggle(isOn: $isSquare) { Text("Constrain to Square") }.padding()
    }
    .border(.yellow, width: 2)
    .padding()
  }
}
swiftui

2 respostas

  1. Meu palpite é que a proporção padrão é baseada no tamanho ideal da visualização.

    O tamanho ideal de a Canvasé 10,0 x 10,0. Isso pode ser confirmado aplicando .fixedSize()-se a a Canvasmostrado isoladamente:

    Canvas { _, size in print("canvas size: \(size)") }
    .fixedSize()
    .border(.teal, width: 2)

    tamanho da tela: (10.0, 10.0)

    Quando o modificador .aspectRatioé aplicado com uma proporção de nil, a proporção de aspecto padrão é usada. Com base no tamanho ideal 10,0 x 10,0, a proporção de aspecto padrão de a Canvasé quadrado.

    • 1
  2. Best Answer

    Passar nilpara aspectRationão é como .opacity(1)ou .scaleEffect(1)onde não muda nada. aspectRationão é idempotente.

    A documentação diz:

    A proporção de largura para altura a ser usada para a visualização resultante. Use nilpara manter a proporção de aspecto atual na visualização resultante.

    Então a visualização precisa ter uma "proporção de aspecto atual". Como aspectRatioencontrar isso? Ela dá uma .unspecifiedproposta de tamanho para o Canvas, pedindo seu tamanho ideal. Mas Canvasé suposto ocupar tanto espaço quanto quiser, então ela diz apenas 10x10 (este também é o padrão quando você usa replacingUnspecifiedDimensions), o que não é muito significativo, mas tem que retornar algo no final do dia.

    Então aspectRatiorecebe 10x10 e diz: "ah, a 'proporção de aspecto atual' é 1", e é assim que Canvasse torna um quadrado, mesmo quando você usa nilcomo aspectRatio.

    Para outro exemplo de como o SwiftUI fornece propostas de tamanho para visualizações, veja minha resposta aqui

    Você pode ver quais propostas suas visualizações recebem, implementando um NSViewRepresentablee override sizeThatFits. O SwiftUI chama esse método quando quer propor um tamanho para suas visualizações.

    struct PropsoalLogger: NSViewRepresentable {
    func makeNSView(context: Context) -> some NSView {
        NSView()
    }
    
    func updateNSView(_ nsView: NSViewType, context: Context) {
        
    }
    
    func sizeThatFits(_ proposal: ProposedViewSize, nsView: NSViewType, context: Context) -> CGSize? {
        print(proposal)
        // Canvas most likely does this under the hood
        return proposal.replacingUnspecifiedDimensions()
    }
}

    Substitua Canvaspor esta visualização e use aspectRatio. Você verá que a primeira proposta é width: nil, height: nil- também conhecida como .unspecifiedproposta. Se você remover aspectRatio, não haverá nenhuma .unspecifiedproposta. Observe que o VStackchamará isso várias vezes para fazer seu layout.

    Basicamente, você precisa obter a proporção do aspecto do pai e passá-la para aspectRatio, em vez de pedir Canvaspara o tamanho dele. Você poderia, por exemplo, fazer:

    GeometryReader { geo in
    Canvas { _, size in print("canvas size: \(size)") }
        .aspectRatio(isSquare ? 1 : geo.size.width / geo.size.height, contentMode: .fit)
}
    • 1

relate perguntas