SwiftUI #1— VStack e HStack

Bruno Faganello
Nov 7 · 2 min read

Better apps. Less code.

Como todo mundo já sabe da novidade que é o SwiftUI, vou pular a introdução sobre ele.

Vou começar falando sobre duas Views que serão extremamente importantes no desenvolvimento das suas telas que são a Vertical Stack(VStack) e Horizontal Stack(HStack).

Por que elas são tão importantes?

Vamos começar criando nossa classe de SwiftUI, por default ela já cria uma Text pra gente, mas se eu tentar adicionar um outro Text, Button ou qualquer outro elemento de UI vamos tomar o seguinte erro:

Function declares an opaque return type, but has no return statements in its body from which to infer an underlying type

Dizendo que nosso body só pode conter um elemento para dar um return

Nesse momento que entra nossas stacks, nesse artigo vou exemplificar com a VStack mas tudo que acontece na VStack vai funcionar na HStack só mudando a orientação.

Adicionando nossa stack conseguimos colocar mais elementos na nossa View.

Utilizando Spacer()

Como visto na imagem acima adicionamos uma VStack e colocamos nossos elementos dentro dela. Entretanto os elementos ficam "colados" e podemos resolver isso utilizando o Spacer()

O Spacer preenche automaticamente todo o espaço disponível, podendo ser util em vários casos para delimitar uma proporção igualitária com todos os elementos. Como no exemplo abaixo:

Porém em alguns casos queremos alguns limites diferentes do padrão e podemos modificar isso utilizando o modifier frame(height: CGFloat?)

ZStack

Existem também um Stack de para fazer a sobreposição de elementos, pode ser util caso seja necessário colocar um texto em cima de uma imagem.

ZStack {
Image("uva-image")
Text("Uva")
.font(.largeTitle)
.background(Color.black)
.foregroundColor(.white)
}

Code with Coffee

Take a cup of coffee and come learn new things.

Thanks to Thiago Ferreira

Bruno Faganello

Written by

Engenheiro de Software Mobile. Fico constantemente atualizado com relação a tecnologia para que isso possa mudar a vida das pessoas. 💻

Code with Coffee

Take a cup of coffee and come learn new things.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade