Início / coding / Perguntas / 79288282
Accepted
Andrei Herford
Asked: 2024-12-17 22:32:05 +0800 CST

Quais regras o VStack usa para alocar espaço entre subvisualizações?

  • 772

TL;DR Quais regras o VStack usa para distribuir o espaço disponível entre suas subvisualizações, especialmente quando maxHeight: .infitiyestá envolvido.

Vindo de UIKite LayoutConstraintsainda estou lutando para entender como é SwiftUIo tamanho da visualização.

Depois de ler/assistir a diferentes tutoriais, documentos, etc., entendi que, no final das contas, cada visualização determina seu próprio tamanho. A visualização pai oferece o tamanho disponível, e a criança decide o quão grande ela quer ser. Por exemplo, este vídeo da WWDC mostra isso com bons exemplos.

Entretanto, como isso funciona no seguinte VStack:

VStack(spacing: 0) {
    VStack {
        Text("Top")
           .background(.blue)
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(.red)
    
    VStack {
        Text("Bottom")
           .background(.yellow)
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(.green)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
  • O rootView oferece ao VStack externo o tamanho completo da tela.
  • O VStack externo oferece esse tamanho aos seus filhos e pergunta o quão grande eles querem ser.
  • Os VStacks internos contêm apenas um TextView. Normalmente, eles perguntariam ao textView o quão grande ele quer ser e retornariam esse tamanho como o deles. No entanto, o modificador de frame muda isso para infinit heigt.
  • Ambas as crianças têm altura infinita. Então o VStack externo dá a ambas 50% da altura.

Isso está correto?

Text("Bottom")
   .frame(maxWidth: .infinity, maxHeight: .infinity)
   .background(.yellow)

Agora, o rótulo inferior solicita altura infinita para si mesmo. No entanto, o VStack interno só fornece os 50% disponíveis da altura da tela.

Mas ao adicionar mais Subviews aos VStacks internos, o limite de 50% não é válido:

VStack(spacing: 0) {
    VStack {
        Text("Top1")
        Text("...")
        Text("TopN")
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(.red)
    
    VStack {
        Text("Bottom1")
        Text("...")
        
        // ...
        
        Text("BottomN")
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(.green)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)

Como o tamanho é calculado aqui? Por que o VStack inferior se torna maior que 50% neste caso, mas não antes?

insira a descrição da imagem aqui

Editar:

Estou surpreso que o comportamento da terceira captura de tela não possa ser reproduzido.

Aqui está outra captura de tela mostrando o código completo e o resultado:

insira a descrição da imagem aqui

1 respostas

  1. Best Answer

    Resposta editada para a pergunta editada:

    Aqui está uma descrição detalhada de como o processo de layout funciona no seu caso:

    1. Outer VStackobtém o tamanho mínimo dos VStacks internos ( proposta zero )

    Os VStacks internos fazem o mesmo para obter o tamanho mínimo de suas visualizações filhas. No seu exemplo, essa é a soma dos tamanhos mínimos das Textvisualizações dentro dos VStacks internos.

    2. Outer VStackobtém o tamanho máximo dos VStacks internos ( proposta infinita )

    Como você está usando frame(maxHeight: .infinity)o s interno VStack, ele responderá com um valor infinito .

    3. Cálculos baseados no tamanho disponível para o exteriorVStack

    Após os passos 1 e 2, o externo VStacktem todas as informações necessárias para o cálculo.

    a) Se a altura mínima de ambos os VStacks internos for menor que 50% da altura disponível, o VStack externo proporá uma altura específica de 50% para cada um dos VStacks internos.

    Os VStacks internos aceitarão essa sugestão, pois o valor sugerido está dentro de sua faixa mínima/máxima.

    b) Se uma das VStacks internas retornar uma altura mínima maior que 50% da altura disponível, a VStack externa faz uma distribuição correspondente como sugestão às VStacks internas.

    Vamos dar um exemplo concreto para este caso:

    • O VStack externo tem uma altura disponível de 800 .
    • O VStack verde inferior retorna 700 como altura mínima porque contém muitas Textvisualizações que exigem essa altura.
    • O VStack vermelho superior tem uma altura mínima de 50 , pois não requer tanto espaço.

    Como resultado, o VStack externo sugere uma altura de 700 para o VStack verde e uma altura de 100 (800 menos 700) para o VStack vermelho.

    A estratégia de a VStacké, portanto, dividir o espaço disponível da forma mais uniforme possível, levando em consideração as respectivas alturas mínimas/máximas das vistas secundárias.

    Ao usar frame(maxHeight: .infinity)você não impede que uma das visualizações seja reduzida em tamanho, se necessário. É provavelmente aí que está seu mal-entendido.

    Usar isso simplesmente informa ao outer VStackna etapa 2 descrita acima que os VStacks inner não têm altura máxima. Se você fosse usar um valor específico em vez de infinity, isso seria levado em conta na etapa 3.

    Nota da resposta original, que ainda é válida

    Em relação às suas perguntas gerais sobre como o sistema de layout do SwiftUI ou, mais especificamente, os contêineres de layout do SwiftUI funcionam, recomendo que você dê uma olhada em como implementar seu próprio contêiner de layout.

    A documentação pode ser encontrada aqui .

    Implementar seu próprio contêiner de layout para fins de aprendizado também permite que você analise detalhadamente o sistema de layout do SwiftUI.

    Em particular, os métodos sizethatfits e placeSubviews a serem implementados para um contêiner de layout devem fornecer uma visão detalhada.

    Você também pode colocar um contêiner de layout personalizado em um VStack, por exemplo, para observar como um VStack interage com suas visualizações filhas por meio das chamadas de método mencionadas.

    Observe em particular que, dependendo da implementação, um contêiner de layout pode solicitar às suas visualizações filhas várias vezes por meio de sizethatfits usando propostas diferentes para determinar o tamanho ideal:

    A visualização pai do contêiner que chama esse método pode chamá-lo mais de uma vez com propostas diferentes para aprender mais sobre a flexibilidade do contêiner antes de decidir qual proposta usar para posicionamento.

    • 1

relate perguntas