mödemlooper (@modemlooper.net)

Reducing the Number of .sheet Modifiers in Your SwiftUI Views Showing sheets is something most SwiftUI apps do. The most common way to show sheets is to have the following items in a SwiftUI view: * A `@State` property in the view that determines whether to show the sheet. * Code to set that property to `true` from the UI. * A `.sheet` modifier to show a view in a sheet. @State private var showSheet = false Button { showSheet = true } label: { Label("Add Page", systemImage: "plus") } .sheet(isPresented: $showSheet) { AddPageView() } This way of showing sheets works well if your app shows one or two sheets in a view. If your app shows more sheets in a view, you wind up with a `@State` property and a `.sheet` modifier for each sheet your app can show. Add enough sheets, and your code becomes a mess. You can reduce the number of Boolean sheet showing properties and `.sheet` modifiers by doing the following: * Create an enum for the sheets you want to show. * Create a sheet view to show the correct sheet based on the enum you create. * Create a focused value to show sheets from menu items. ## Creating an enum for the sheets Create an enum with one case for each sheet your app shows. The enum should conform to the `Identifiable` and `Hashable` protocols. enum Sheet: Identifiable, Hashable { case addBookmark case addChange case addRemote case editChangeDescription case push case clone var id: Self { self } } ## Creating a sheet view Start by creating a SwiftUI view. Add a constant that lets the sheet view know what sheet to know. The type for the constant should be the enum you created. In the `body` property, write a `switch` statement on the enum to show the correct sheet. struct SheetView: View { let sheet: Sheet var body: some View { switch sheet { case .addBookmark: AddBookmarkView() case .addChange: AddChangeView() case .addRemote: AddRemoteView() case .editChangeDescription: EditDescriptionView() case .push: PushView() case .clone: CloneView() } } } ## Creating a focused value If you want to show sheets from menu items, you must create a focused value that stores the sheet to show. Add an extension to the `FocusedValues` struct to create the focused value property. The type of the focused value should be an optional binding to the enum you created. extension FocusedValues { @Entry var sheetToShow: Binding<Sheet>? } The `@Entry` macro supports iOS 18+ and macOS 15+. In the views for your menu items that show sheets, add a `@FocusedValue` property so you can set the sheet to show. @FocusedValue(\.sheetToShow) private var sheet In your menu’s UI code, set the `sheet` property’s wrapped value to the enum for the sheet you want to show. Button(action: { sheet?.wrappedValue = .clone }, label: { Text("Clone") }) ## Showing a sheet To show a sheet from a SwiftUI view, you must do the following: * Add a `@State` property to store the sheet to show. * Add a `.focusedSceneValue` modifier if you want to show sheets from menus. * Set the sheet to show from the view’s UI. * Add a `.sheet` modifier to show the sheet. ### Add `@State` property Add a `@State` property to the SwiftUI view to store the enum for the sheet to show. @State private var sheetToShow: Sheet? = nil The type must be an optional value so you can pass the sheet enum to the `.sheet` modifier. ### Add `.focusedSceneValue` modifier If you are showing sheets from menus, add a `.focusedSceneValue` modifier to the view. The modifier takes two arguments. The name of the first argument must match the name of the variable you added as a `FocusedValues` extension. The second argument is a binding to the `@State` property you added to the view. .focusedSceneValue(\.sheetToShow, $sheetToShow.safeBinding(defaultValue: .addChange)) The `safeBinding` function is an extension to convert an optional binding to a non-optional binding. The `.focusedSceneValue` modifier cannot accept a binding to an optional value so you must convert the `sheetToShow` value to a non-optional value. extension Binding { // Convert an optional binding to a non-optional one. func safeBinding<T: Sendable>(defaultValue: T) -> Binding<T> where Value == Optional<T> { Binding<T>.init { self.wrappedValue ?? defaultValue } set: { newValue in self.wrappedValue = newValue } } } The code for the `safeBinding` function comes from the Stack Overflow question Converting optional Binding to non-optional Binding. ### Set the sheet to show Set the sheet to show from the view’s UI. Button(action: { sheetToShow = .push }, label: { Label("Push", systemImage:"square.and.arrow.up") }).accessibilityLabel("Push Changes") ### Add `.sheet` modifier Finally add a `.sheet` modifier to the view and pass a binding to the `@State` property as the `item` argument. Show the sheet view inside the closure. The argument you pass to the closure contains the enum value that tells the sheet view what sheet to show. .sheet(item: $sheetToShow) { sheet in SheetView(sheet: sheet) } ## Related reading Azam Sharp wrote the article Global Sheets Pattern in SwiftUI that covers how to show global sheets in SwiftUI apps. Azam’s article focuses more on iOS and using environment values while this article focuses more on Mac and focused values. His article also shows how to support older OS versions that don’t support the `@Entry` macro. https://swiftdevjournal.com/posts/reducing-sheet-modifiers/