HStack VStack ZStack

SwiftUI maket: stack’lar

View’larni VStack, HStack va ZStack yordamida vertikal, gorizontal yoki qatlamlar bo‘yicha joylashtiring.

Misollar

import SwiftUI

struct StackDemo: View {
  var body: some View {
    VStack(spacing: 12) {
      Text("Title").font(.title)
      HStack {
        Text("Left")
        Spacer()
        Text("Right")
      }
      ZStack {
        Color.blue.opacity(0.1)
        Text("Overlay")
      }
    }.padding()
  }
}

import SwiftUI

struct ContentView: View {
  var body: some View { StackDemo() }
}

import SwiftUI

@main
struct MyApp: App {
  var body: some Scene { WindowGroup { ContentView() } }
}

Ustki qatlamlar (overlays) va tekislash

Kontentni ZStack bilan qatlamlang va joylashuvni alignment hamda alignmentGuide yordamida boshqaring.

Sintaksis:

• ZStack(alignment: .topLeading) { ... }
• .alignmentGuide(.top) { d in d[.bottom] }

import SwiftUI

struct OverlayDemo: View {
  var body: some View {
    ZStack(alignment: .topLeading) {
      Image(systemName: "rectangle.fill").resizable().foregroundStyle(.blue.opacity(0.15))
      Text("Badge")
        .padding(6)
        .background(.ultraThinMaterial, in: Capsule())
        .alignmentGuide(.top) { d in d[.bottom] } // custom guide
    }
    .frame(width: 220, height: 120)
    .padding()
  }
}

import SwiftUI

struct ContentView: View {
  var body: some View { OverlayDemo() }
}

import SwiftUI

@main
struct MyApp: App {
  var body: some Scene { WindowGroup { ContentView() } }
}