Swift — شیت ها و پاپ اورها (Sheets & Popovers)

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

قبلی: TabView (TabView) بعدی: دیپ لینک ها (Deep Links)

شیت ها و پاپ اورها (Sheets & Popovers)

در SwiftUI، «شیت (Sheet)» یک پنجره مودال است. مودال یعنی صفحه ای که روی محتوا می نشیند. «پاپ اور (Popover)» هم پنجره کوچکی است. اینجا با شیت تمام صفحه هم آشنا می شویم. تمرکز ما روی «شیت و پاپ اور SwiftUI» است.

شیت ساده با .sheet

تابع/مودیفایر «.sheet» مودال عادی نشان می دهد. «State» یعنی وضعیت داخلی ویو. وقتی مقدارش تغییر کند، رابط دوباره رندر می شود. با دکمه، مقدار را «true» می کنیم و شیت باز می شود.

یک متغیر State برای نمایش بساز.
روی دکمه، مقدار را true کن.
در .sheet، محتوای مودال را قرار بده.
برای بستن، مقدار را false کن.

import SwiftUI

struct SheetsBasicDemo: View {
  @State private var show = false
  var body: some View {
    Button("Show Sheet") {
      show = true
    }
    .sheet(isPresented: $show) {
      VStack(spacing: 12) {
        Text("Modal")
        Button("Close") {
          show = false
        }
      }
      .padding()
    }
  }
}

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

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

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

نکته: همیشه راه بسته شدن را مشخص کن. کاربر باید به راحتی برگردد.

مودال تمام صفحه با .fullScreenCover

مودیفایر «.fullScreenCover» کل صفحه را می گیرد. برای سناریوهای متمرکز عالی است. مثل فرم ورود یا پخش ویدئو. یک ویو جدا می سازیم و با کلوزر آن را می بندیم.

متغیر State برای نمایش بساز.
روی دکمه، مقدار را true کن.
در .fullScreenCover ویو مقصد را بده.
با کلوزر، بستن را هندل کن.

import SwiftUI

struct FullScreenCoverDemo: View {
  @State private var show = false
  var body: some View {
    Button("Present Full Screen") {
      show = true
    }
    .fullScreenCover(isPresented: $show) {
      CoverView(onClose: {
        show = false
      })
    }
  }
}

struct CoverView: View {
  let onClose: () -> Void
  var body: some View {
    ZStack {
      Color.black.opacity(0.85).ignoresSafeArea()
      VStack(spacing: 12) {
        Text("Full Screen").foregroundStyle(.white)
        Button("Dismiss") {
          onClose()
        }
        .tint(.white)
      }
      .padding()
    }
  }
}

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

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

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

هشدار: مودال زیاد آزاردهنده است. فقط وقتی لازم است نشان بده.

ارتباط با مسیرهای دیگر ناوبری

پس از یادگیری این بخش، سراغ تب ها و دیپ لینک برو. برای تب ها این صفحه را ببین: TabView. برای پیوند عمیق هم این صفحه را ببین: Deep Links. همچنین این لینک را نگه دار: شیت و پاپ اور SwiftUI.

جمع بندی سریع

.sheet مودال عادی نشان می دهد.
.fullScreenCover تمام صفحه را می گیرد.
همیشه دکمه بستن قرار بده.
از مودال کم استفاده کن.
State نمایش را کنترل می کند.