SwiftUI：如何仅在 iOS 上有条件地呈现 ActionSheet？

Question

I've started to like an approach where I write crossplatform UI code with SwiftUI. The app would still be started with a native window/container, but have a fully crossplatform SwiftUI-driven UI. For many standard things things like list, navigationview etc, it is very useful and works fine.

The problem arises with some platform-specific view extensions. I would like to write this code in a platform-agnostic fashion, but not sure how to do it for some specific cases.

First, here's a working example of a crossplatform conditional view modifier.

import SwiftUI

struct DemoView: View {
    var body: some View {
        Text("Hello, demo!").padding()
            .modifier(iosBackground())
    }
}

struct iosBackground: ViewModifier {
    #if os(OSX)
    func body(content: Content) -> some View {
        content
    }
    #else
    func body(content: Content) -> some View {
        content.background(Color.blue)
    }
    #endif
}

What the iosBackground modifier is doing, is applying a view modification only on the iOS platform (well, to be specific, on any non-OSX platform, but let's just work with OSX and iOS in this example). The OSX version of the view is passed through, while the iOS version returns a modified view. This color example is of course dumb and useless, but for layout-related things like padding, it is a highly practical approach.

My question: how do I apply the same approach to modifiers like actionSheet? Here's what I would like to do:

struct DemoView: View {
    @State var showActionSheet = true
    var body: some View {
        Text("Hello, demo!").padding()
            .modifier(iosBackground())
            .actionSheet(isPresented: $showActionSheet) {
                ActionSheet(
                    title: Text("Actions"),
                    message: Text("Available actions"),
                    buttons: [
                        .cancel { },
                        .default(Text("Action")),
                        .destructive(Text("Delete"))
                    ]
                )
            }

    }
}

If you try to compile this code, it works fine on iOS. On OSX, it has a compilation error because the actionSheet API is not available on OSX. Which, indeed, is the case. I would like to make it so that the actionSheet call would simply be a no-op on OSX, but I can't figure out how to structure and conditionally compile my code to make it happen.

The question, once again: how can I structure this code so that on iOS, actionSheet would be presented, while on OSX, it would be a no-op?

Answer 1

You are almost there. You would have found the way if you took a look at the .actionSheet 's function signature. It returns an opaque type of some View that is the return type of almost all the SwiftUI views. So, look at the documentation too:

/// Presents an action sheet.
///
/// - Parameters:
///     - isPresented: A `Binding` to whether the action sheet should be
///     shown.
///     - content: A closure returning the `ActionSheet` to present.
@available(iOS 13.0, tvOS 13.0, watchOS 6.0, *)
@available(OSX, unavailable)
public func actionSheet(isPresented: Binding<Bool>, content: () -> ActionSheet) -> some View

That being said, you could use this as like as you have used the .background function in conjunction with the content. So, here is the solution:

struct Sheet: ViewModifier {
    @Binding var presented: Bool

    func body(content: Content) -> some View {
        #if os(OSX)
        return content
        #else
        return content
            .actionSheet(isPresented: $presented) {
                ActionSheet(title: Text("Action Title"),
                            message: Text("Action Message"),
                            buttons: [.cancel(), .default(Text("Ok"))]
                )
        }
        #endif
    }
}

I just moved the #if - #endif inside the function body and that requires the return keyword explicitly. And you would use this as any modifier:

.modifier(Sheet(presented: $showActionSheet))