SwiftUI uslublash va mavzular

SwiftUI uslublash va mavzular (theming)

Ilovangizni bezash uchun ranglar, materiallar va rang sxemalaridan foydalaning hamda tashqi ko‘rinishni mavzular (theming) yordamida markazlashtiring.

Urg‘u rangi va rang sxemalari

Urg‘u rangini (accent color) belgilash uchun .tint dan, joriy rang sxemasiga murojaat qilish uchun esa .colorScheme dan foydalaning.

import SwiftUI

struct ThemeDemo: View {
  @Environment(\.colorScheme) var scheme
  var body: some View {
    VStack(spacing: 12) {
      RoundedRectangle(cornerRadius: 8)
        .fill(.tint)
        .frame(height: 80)
        .overlay(Text("Tint").foregroundStyle(.white))
      Text(scheme == .dark ? "Scheme: Dark" : "Scheme: Light")
    }
    .padding()
  }
}

import SwiftUI

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

import SwiftUI

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

Yuqoridagi misolda kontent ortida xira shishasimon fonga (frosted backdrop) ega kartochka ko‘rsatilgan.

Materiallar

Materialni belgilash uchun .material dan, joriy rang sxemasiga murojaat qilish uchun esa .colorScheme dan foydalaning.

import SwiftUI

struct MaterialCard: View {
  var body: some View {
    ZStack {
      Image(systemName: "photo.fill").resizable().scaledToFill().ignoresSafeArea()
      RoundedRectangle(cornerRadius: 12).fill(.regularMaterial)
        .frame(height: 120)
        .overlay(Text("Regular Material").font(.headline))
        .padding()
    }
  }
}

import SwiftUI

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

import SwiftUI

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

Yuqoridagi misolda kontent ortida xira shishasimon fonga (frosted backdrop) ega kartochka ko‘rsatilgan.