iOS Development

Why Conditional View Modifiers are a Unhealthy Thought · objc.io

Why Conditional View Modifiers are a Unhealthy Thought · objc.io
Written by admin


Within the SwiftUI group, many individuals give you their very own model of a conditional view modifier. It lets you take a view, and solely apply a view modifier when the situation holds. It usually seems to be one thing like this:

								
extension View {
    @ViewBuilder
    func applyIfM: View>(situation: Bool, rework: (Self) -> M) -> some View {
        if situation {
            rework(self)
        } else {
            self
        }
    }
}

							

There are various weblog posts on the market with related modifiers. I feel all these weblog posts ought to include an enormous warning signal. Why is the above code problematic? Let us take a look at a pattern.

Within the following code, we’ve a single state property myState. When it adjustments between true and false, we need to conditionally apply a body:

								struct ContentView: View {
    @State var myState = false
    var physique: some View {
        VStack {
            Toggle("Toggle", isOn: $myState.animation())
            Rectangle()
                .applyIf(situation: myState, rework: { $0.body(width: 100) })
        }
        
    }
}

							

Curiously, when operating this code, the animation doesn’t look clean in any respect. If you happen to look carefully, you possibly can see that it fades between the “earlier than” and “after” state:

This is the identical instance, however written with out applyIf:

								struct ContentView: View {
    @State var myState = false
    var physique: some View {
        VStack {
            Toggle("Toggle", isOn: $myState.animation())
            Rectangle()
                .body(width: myState ? 100 : nil)
        }
        
    }
}

							

And with the code above, our animation works as anticipated:

Why is the applyIf model damaged? The reply teaches us rather a lot about how SwiftUI works. In UIKit, views are objects, and objects have inherent id. Which means two objects are equal if they’re the identical object. UIKit depends on the id of an object to animate adjustments.

In SwiftUI, views are structs — worth sorts — which signifies that they do not have id. For SwiftUI to animate adjustments, it wants to match the worth of the view earlier than the animation began and the worth of the view after the animation ends. SwiftUI then interpolates between the 2 values.

To know the distinction in habits between the 2 examples, let’s take a look at their sorts. This is the kind of our Rectangle().applyIf(...):

								_ConditionalContent<ModifiedContent<Rectangle, _FrameLayout>, Rectangle>

							

The outermost kind is a _ConditionalContent. That is an enum that may both comprise the worth from executing the if department, or the worth from executing the else department. When situation adjustments, SwiftUI can not interpolate between the outdated and the brand new worth, as they’ve differing types. In SwiftUI, when you’ve got an if/else with a altering situation, a transition occurs: the view from the one department is eliminated and the view for the opposite department is inserted. By default, the transition is a fade, and that is precisely what we’re seeing within the applyIf instance.

In distinction, that is the kind of Rectangle().body(...):

								ModifiedContent<Rectangle, _FrameLayout>

							

Once we animate adjustments to the body properties, there aren’t any branches for SwiftUI to think about. It might simply interpolate between the outdated and new worth and the whole lot works as anticipated.

Within the Rectangle().body(...) instance, we made the view modifier conditional by offering a nil worth for the width. That is one thing that nearly each view modifier assist. For instance, you possibly can add a conditional foreground colour through the use of an non-obligatory colour, you possibly can add conditional padding through the use of both 0 or a worth, and so forth.

Observe that applyIf (or actually, if/else) additionally breaks your animations when you’re doing issues accurately on the “inside”.

								Rectangle()
    .body(width: myState ? 100 : nil)
    .applyIf(situation) { $0.border(Colour.purple) }

							

Once you animate situation, the border won’t animate, and neither will the body. As a result of SwiftUI considers the if/else branches separate views, a (fade) transition will occur as a substitute.

There’s one more downside past animations. Once you use applyIf with a view that comprises a @State property, all state can be misplaced when the situation adjustments. The reminiscence of @State properties is managed by SwiftUI, primarily based on the place of the view within the view tree. For instance, take into account the next view:

								struct Stateful: View {
    @State var enter: String = ""
    var physique: some View {
        TextField("My Subject", textual content: $enter)
    }
}

struct Pattern: View {
    var flag: Bool
    var physique: some View {
        Stateful().applyIf(situation: flag) {
            $0.background(Colour.purple)
        }
    }
}

							

Once we change flag, the applyIf department adjustments, and the Stateful() view has a brand new place (it moved to the opposite department of a _ConditionalContent). This causes the @State property to be reset to its preliminary worth (as a result of so far as SwiftUI is anxious, a brand new view was added to the hierarchy), and the person’s textual content is misplaced. The identical downside additionally occurs with @StateObject.

The difficult half about all of that is that you simply won’t see any of those points when constructing your view. Your views look advantageous, however perhaps your animations are slightly funky, otherwise you generally lose state. Particularly when the situation would not change all that usually, you won’t even discover.

I might argue that all the weblog posts that recommend a modifier like applyIf ought to have a giant warning signal. The downsides of applyIf and its variants are under no circumstances apparent, and I’ve sadly seen a bunch of people that have simply copied this into their code bases and have been very proud of it (till it grew to become a supply of issues weeks later). Actually, I might argue that no code base ought to have this perform. It simply makes it approach too straightforward to by accident break animations or state.

If you happen to’re curious about understanding how SwiftUI works, you might learn our guide Considering in SwiftUI, watch our SwiftUI movies on Swift Discuss, or attend considered one of our workshops.

About the author

admin

Leave a Comment