Selecting between LazyVStack, Checklist, and VStack in SwiftUI – Donny Wals

SwiftUI affords a number of approaches to constructing lists of content material. You should use a VStack in case your listing consists of a bunch of parts that ought to be positioned on high of one another. Or you should utilize a LazyVStack in case your listing is actually lengthy. And in different instances, a Checklist may make extra sense.

On this put up, I’d like to try every of those elements, define their strengths and weaknesses and hopefully offer you some insights about how one can resolve between these three elements that each one place content material on high of one another.

We’ll begin off with a have a look at VStack. Then we’ll transfer on to LazyVStack and we’ll wrap issues up with Checklist.

Understanding when to make use of VStack

By far the best stack part that we have now in SwiftUI is the VStack. It merely locations parts on high of one another:

VStack {
  Textual content("One")
  Textual content("Two")
  Textual content("Three")
}

A VStack works rather well if you solely have a handful of things, and also you wish to place these things on high of one another. Although you’ll sometimes use a VStack for a small variety of objects, however there’s no purpose you couldn’t do one thing like this:

ScrollView {
  VStack {
    ForEach(fashions) { mannequin in 
      HStack {
        Textual content(mannequin.title)
        Picture(systemName: mannequin.iconName)
      }
    }
  }
}

When there’s just a few objects in fashions, it will work high-quality. Whether or not or not it’s the proper selection… I’d say it’s not.

In case your fashions listing grows to possibly 1000 objects, you’ll be placing an equal variety of views in your VStack. It is going to require a variety of work from SwiftUI to attract all of those parts.

Ultimately that is going to result in efficiency points as a result of each single merchandise in your fashions is added to the view hierarchy as a view.

Now for example these views additionally include pictures that should be loaded from the community. SwiftUI is then going to load these pictures and render them too:

ScrollView {
  VStack {
    ForEach(fashions) { mannequin in 
      HStack {
        Textual content(mannequin.title)
        RemoteImage(url: mannequin.imageURL)
      }
    }
  }
}

The RemoteImage on this case could be a customized view that allows loading pictures from the community.

When every part is positioned in a VStack like I did on this pattern, your scrolling efficiency will probably be horrendous.

A VStack is nice for constructing a vertically stacked view hierarchy. However as soon as your hierarchy begins to appear and feel extra like a scrollable listing… LazyVStack is likely to be the higher selection for you.

Understanding when to make use of a LazyVStack

The LazyVStack elements is functionally largely the identical as a daily VStack. The important thing distinction is {that a} LazyVStack doesn’t add each view to the view hierarchy instantly.

As your person scrolls down a protracted listing of things, the LazyVStack will add increasingly more views to the hierarchy. Which means you’re not paying an enormous value up entrance, and within the case of our RemoteImage instance from earlier, you’re not loading pictures that the person may by no means see.

Swapping a VStack out for a LazyVStack is fairly easy:

ScrollView {
  LazyVStack {
    ForEach(fashions) { mannequin in 
      HStack {
        Textual content(mannequin.title)
        RemoteImage(url: mannequin.imageURL)
      }
    }
  }
}

Our drawing efficiency ought to be significantly better with the LazyVStack in comparison with the common VStack strategy.

In a LazyVStack, we’re free to make use of any kind of view that we wish, and we have now full management over how the listing finally ends up wanting. We don’t achieve any out of the field performance which may be nice in the event you require the next degree of customization of your listing.

Subsequent, let’s see how Checklist is used to grasp how this compares to LazyVStack.

Understanding when to make use of Checklist

The place a LazyVStack gives us most management, a Checklist gives us with helpful options proper of the field. Relying on the place your listing is used (for instance a sidebar or simply as a full display screen), Checklist will look and behave barely in another way.

Whenever you use views like NavigationLink within an inventory, you achieve some small design tweaks to make it clear that this listing merchandise navigates to a different view.

That is very helpful for many instances, however you won’t want any of this performance.

Checklist additionally comes with some built-in designs that permit you to simply create one thing that both appears just like the Settings app, or one thing a bit extra like an inventory of contacts. It’s simple to get began with Checklist in the event you don’t require plenty of customization.

Similar to LazyVStack, a Checklist will lazily consider its contents which suggests it’s a great match for bigger units of information.

An excellent primary instance of utilizing Checklist within the instance that we noticed earlier would appear like this:

Checklist(fashions) { mannequin in 
  HStack {
    Textual content(mannequin.title)
    RemoteImage(url: mannequin.imageURL)
  }
}

We don’t have to make use of a ForEach however we might if we needed to. This may be helpful if you’re utilizing Sections in your listing for instance:

Checklist {
  Part("Common") {
    ForEach(mannequin.basic) { merchandise in 
      GeneralItem(merchandise)
    }
  }

  Part("Notifications") {
    ForEach(mannequin.notifications) { merchandise in 
      NotificationItem(merchandise)
    }
  }
}

Whenever you’re utilizing Checklist to construct one thing like a settings web page, it’s even allowed to skip utilizing a ForEach altogether and hardcode your baby views:

Checklist {
  Part("Common") {
    GeneralItem(mannequin.colorScheme)
    GeneralItem(mannequin.showUI)
  }

  Part("Notifications") {
    NotificationItem(mannequin.publication)
    NotificationItem(mannequin.socials)
    NotificationItem(mannequin.iaps)
  }
}

The choice between a Checklist and a LazyVStack for me normally comes down as to if or not I want or need Checklist performance. If I discover that I would like little to none of Checklist‘s options odds are that I’m going to succeed in for LazyVStack in a ScrollView as a substitute.

In Abstract

On this put up, you realized about VStack, LazyVStack and Checklist. I defined among the key concerns and efficiency traits for these elements, with out digging to deeply into fixing each use case and risk. Particularly with Checklist there’s loads you are able to do. The important thing level is that Checklist is a part that doesn’t all the time match what you want from it. In these instances, it’s helpful that we have now a LazyVStack.

You realized that each Checklist and LazyVStack are optimized for displaying giant quantities of views, and that LazyVStack comes with the largest quantity of flexibility in the event you’re prepared to implement what you want your self.

You additionally realized that VStack is actually solely helpful for smaller quantities of views. I like utilizing it for structure functions however as soon as I begin placing collectively an inventory of views I desire a lazier strategy. Particularly when i’m coping with an unknown variety of objects.