Swift — چیدمان SwiftUI (SwiftUI Layout)

آخرین بروزرسانی: 1404/08/15

قبلی: راه اندازی پروژه iOS (iOS Project Setup) بعدی: HStack VStack ZStack (HStack VStack ZStack)

چیدمان SwiftUI (SwiftUI Layout)

در چیدمان SwiftUI، نماها مثل لگو کنار هم می نشینند. «پشته (Stack)» ردیف چیدن نماهاست. «فریم (Frame)» اندازه و جای نما را تعیین می کند. با تراز و فاصله، ظاهر مرتب می شود. مثل چیدن کتاب ها در قفسه کلاس است.

پشته ها و فاصله گذاری

VStack عمودی می چیند. HStack افقی می چیند. ZStack لایه ای می چیند. همچنین با Spacer فاصله ها را هل می دهی. بنابراین چیدمان منعطف می شود.

import SwiftUI

// Demo.swift
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()
  }
}

// ContentView.swift
struct ContentView: View {
  var body: some View {
    StacksDemo()
  }
}

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

مشاهده در ادیتور

نکته: از Spacer() برای فاصله هوشمند استفاده کن. سپس متن ها منظم می مانند.

فریم و تراز

با .frame() اندازه را تنظیم کن. با .padding() حاشیه بده. همچنین با .alignmentGuide خط پایه متن ها را هم خط کن. بنابراین عناصر مرتب دیده می شوند.

import SwiftUI

// Demo.swift
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)

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

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

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

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