Resumo: Por que tem Color.red.frame(maxWidth: 500)
uma ScrollView
altura de visualização de pixels? Por que não 500px ou 0px?
Pelo que entendi sobre posicionamento e dimensionamento do SwiftUI, cada visualização é questionada sobre o tamanho desejado. A visualização responde com seus requisitos máximos e a visualização pai lhe dá o máximo de espaço possível.
Color
por padrão usa o máximo de espaço possível.- O uso de
.frame(maxHeight: x)
onColor
limita isso a x pixels - Nos exemplos a seguir, todas as três
Color
visualizações gostariam de ter um maxHeight de 500px. No entanto, como o espaço disponível é menor que 1500px, ele é dividido igualmente entre as visualizações, que são menores:
Exemplo:
var body: some View {
VStack {
Color.red
.frame(maxHeight: 500)
Color.yellow
.frame(maxHeight: 500)
Color.green
.frame(maxHeight: 500)
}
}
Mas, ao posicionar as Color
visualizações dentro de um objeto, ScrollView
elas são renderizadas com uma altura de apenas alguns pixels. Por quê?
Não deveria ScrollView
oferecer altura infinita, o que permitiria que as Color
visualizações usassem sua altura total de 500px cada?
Ou ele ScrollView
dá o mínimo de espaço possível às suas subvisualizações? Nesse caso, eu entenderia se as Color
visualizações fossem reduzidas a 0px.
Mas de onde vem essa pequena altura (talvez 10px?)? Como isso é calculado?
var body: some View {
ScrollView {
VStack {
Color.red
.frame(maxHeight: 500)
Color.yellow
.frame(maxHeight: 500)
Color.green
.frame(maxHeight: 500)
}
}
}
Sei que posso resolver "o problema" usando " frame(height: )
em vez disso". No entanto, só quero entender como o SwiftUI calcula a altura neste caso.
Uma vertical
ScrollView
permite que seu conteúdo tenha altura ilimitada, portanto,maxHeight
não tem relevância. Em vez disso, o layout das visualizações dentro de uma verticalScrollView
é baseado em sua altura fixa, altura mínima ou altura ideal, o que for maior.Da mesma forma,
maxWidth
é ignorado na horizontalScrollView
e as vistas recebem sua largura fixa, mínima ou ideal.O tamanho ideal de um
Color
é na verdade muito pequeno, como pode ser visto neste exemplo:Então é por isso que as cores têm altura tão pequena no seu exemplo.
Para forçar as cores a adotarem mais altura, tente definir
minHeight
,idealHeight
ouheight
: