SwiftUI maket (layout)

SwiftUI maket (layout)

SwiftUI’ning maket tizimi yordamida stack’lar, frame’lar, tekislash va oraliqlar bilan moslashuvchan interfeyslar yarating.

Stack’lar va oraliqlar

View’larni vertikal, gorizontal yoki qatlamlar bo‘yicha joylashtirish uchun VStack, HStack va ZStack dan foydalaning.

Oraliq va tekislashni sozlash mumkin.

Sintaksis:

• VStack(alignment: .leading, spacing: 8) { ... }
• HStack { Text("A"); Spacer(); Text("B") }
• ZStack { Color.blue; Text("Overlay") }

import SwiftUI

struct StacksDemo: View {
  var body: some View {
    VStack(alignment: .leading, 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 { StacksDemo() }
}

import SwiftUI

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

Ushbu misol kontentni sarlavhalar, spacer’lar va padding bilan vertikal, gorizontal va qatlamli stack’lar yordamida joylashtiradi.

Frame’lar va tekislash

O‘lcham va joylashuvni .frame(), .padding() va .alignmentGuide yordamida sozlang.

Sintaksis:

• .frame(width: 200, height: 100)
• .frame(maxWidth: .infinity, alignment: .leading)
• .alignmentGuide(.firstTextBaseline) { d in d[.bottom] }

import SwiftUI

struct FrameDemo: View {
  var body: some View {
    VStack(spacing: 16) {
      ZStack(alignment: .topLeading) {
        Color.yellow.opacity(0.2)
        Text("Top Left").padding(6)
      }
      .frame(width: 200, height: 100) // fixed size

      HStack {
        Text("Left")
        Spacer()
        Text("Right")
      }
      .frame(maxWidth: .infinity, alignment: .leading) // expand horizontally

      HStack(alignment: .firstTextBaseline, spacing: 8) {
        Text("Title").font(.title)
        Text("Aligned baseline")
          .alignmentGuide(.firstTextBaseline) { d in d[.bottom] }
      }
    }
    .padding()
  }
}

import SwiftUI

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

import SwiftUI

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

Ushbu misolda qat’iy va moslashuvchan frame’lar, taqsimlash uchun spacer’lar va matn uchun tayanch chiziq (baseline) bo‘yicha tekislash ko‘rsatilgan.