SwiftUI’da Stack Yapısı

Halen yeni sayılabilecek ama iOS geliştirmede devrim niteliğinde sayabileceğim SwiftUI’ın Stack yapısını en yalın olabilecek şekilde size aktarmaya çalışacağım. Stack, ekranda kullanılacak olan bileşenlerin dikey, yatay ya da Z ekseninde konumlandırılmasını sağlayan bir özelliktir. SwiftUI’da 3 çeşit Stack vardır; VStack(Bileşenlerin dikey olarak konumlandırmayı sağlar), HStack(Bileşenlerin yatay olarak konumlandırmayı sağlar), ZStack(Bileşenlerin z ekseninde yani üst üste olarak konumlandırmayı sağlar)’tir. Akılda kalıcı olabilmesi adına baş harfleri ile kendiniz için kodlayabilirsiniz. (V = Vertical(Dikey), H = Horizontal(Yatay))

Android geliştiriciler için daha açıklayıcı olması adına kısaca şöyle örnekleyelim; LinearLayout kullandığımızı farz edelim. LinearLayout’un attribute’lerinden orientation’u vertical olarak belirlediğimiz zaman LinearLayout içine koyduğumuz tüm bileşenler yukarıdan aşağıya doğru alt alta olacak şekilde yerleştirilir. Bu görünümü iOS geliştirmede SwiftUI ile sağlamak istersek VStack kullanılması gerekir. LinearLayout’un attribute’lerinden orientation’u horizontal olarak belirlediğimiz zaman ise LinearLayout içine koyduğumuz tüm bileşenler soldan sağa doğru olacak şekilde yerleştirilir. Bu görünümü iOS geliştirmede SwiftUI ile sağlamak istersek ise HStack kullanılması gerekir. SwiftUI’da bileşenleri Z ekseninde konumlandırmak ise Android’deki FrameLayout ile ilişkilendirebiliriz. Kullanılan bileşenler üst üste koyulur. Örneğin; bir resim üzerine yazı ekleyebilmek gibi.

Let’s code! :)

VStack ile başlayalım;

import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
Text("Hello, Mars!")
Text("Hello, Saturn!")
Button("Click Me!") {
      }
    }
  }
}

Body bloğu içinde yazılmış olan bu kod 3 tane bileşenin(2 Text ve 1 Button) alt alta gösterimini sağlamaktadır. Göstermek gerekirse;

VStack, HStack’e çevrildiği zaman elde edilecek görünüm ise bu şekildedir;

Görüldüğü üzere 3 bileşen yan yana sıralanmış şekildedir.

HStack, ZStack’e çevrildiği zaman elde edilecek görünüm ise bu şekildedir;

Görüldüğü üzere 3 bileşen üst üste sıralanmış şekilde görünmektedir.

SwiftUI öncesinde bileşenler için constraint’leri belirlemek epey bir süre alıyordu ve dikkat gerektiren bir iş yükü olarak karşımıza çıkıyordu. SwiftUI’daki Stack özelliği sayesinde ise bu işlem hem kolaylaştı hem de daha kısa zamanda geliştirme yapılmasına olanak sağladı.

Diğer yazılarda görüşmek üzere, sağlıcakla kalın.