在 SwiftUI 中显示和隐藏视图

Question

I want to show a view while tasks complete, how else could I call a SwiftView to show without using conditionals based on a State bool? Basically I want to avoid having this hardcoded below for every file that is gonna need the loading view...

struct ContentView: View {
    @State var doIWantThisViewToShow: Bool = false
    
    var body: some View {
        VStack {
            Button("Show/Hide MyView") {
                doIWantThisViewToShow.toggle()
            }
            if doIWantThisViewToShow {
                MyView()
                    .padding()
            }
        }
    }
}

Answer 1

You can explore a few strategies to reduce duplicate code.

1. Custom Environment value to avoid passing @Binding
2. Reusable effects
3. Maybe a protocol if your state is complex (probably not)

Mutating a view hierarchy

A custom EnvironmentValue broadcasts a state down to child views. This will save you from passing @Binding through views that may not consume the value.

Keep in mind this is a one-way top-down broadcast. Unlike @Binding, children can't mutate parent state. (But they can mutate their own children's knowledge of said state.)

Set in Parent

@State var isHovered = false

var parent: some View {
///
  .environment(\.parentIsHovered, isHovered)
}

Observe in Child

@Environment(\.parentIsHovered) var parentIsHovered

var child: some View {
///
   .grayscale(parentIsHovered ? 0 : 0.9)
   .animation(.easeInOut, value: parentIsHovered)
}

Define

private struct ParentIsHoveredKey: EnvironmentKey {
    static let defaultValue: Bool = false
}


extension EnvironmentValues {
    
    var parentIsHovered: Bool {
        get { return self[ParentIsHoveredKey] }
        set { self[ParentIsHoveredKey] = newValue }
    }
}

Reusable effects

If you gray out certain views or display a loading indicator, you can use a ViewModifier that accepts a Binding and conditionally displays an overlay, background or effects.

The example below demonstrates that by linking the .animation API to accessibilityReduceMotion .

// view
    .animate(.easeOut(duration: .fast), value: isLoading)

extension View {
    func animate<E: Equatable>(_ animation: Animation?, value: E) -> some View  {
        self.modifier(AccessibleAnimationModifier(animation, for: value))
    }
}

struct AccessibleAnimationModifier<E: Equatable>: ViewModifier {
    
    @Environment(\.accessibilityReduceMotion) var reduceMotion
    
    init(_ animation: Animation? = .default, for value: E) {
        self.animation = animation
        self.value = value
    }
    
    var animation: Animation?
    var value: E
    
    func body(content: Content) -> some View {
        content
            .animation(reduceMotion ? .none : animation, value: value)
    }
}

Reacting to loading state

Unless you handle loading state through some observed class, you need to store that state in your View using @State.

Maybe a protocol with a default implementation in an extension helps reduce duplicate code in computing a complex loading state between Views.

The pseudocode below defines a protocol DragSource with functions returning an NSItemProvider. The extension provides default implementations that a View or VM can call.

protocol DragSource {
    
    func makeDraggableThing1(/// content + logic objects) -> NSItemProvider

}

extension DragSource {
    
    func makeDraggableThing1(///) -> NSItemProvider {
        /// Default work I only want to edit once in the app
    }
}