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

SwiftUI provides a number of approaches to constructing lists of content material. You should utilize a VStack in case your checklist consists of a bunch of components that needs to be positioned on high of one another. Or you should use a LazyVStack in case your checklist is admittedly lengthy. And in different circumstances, a Checklist may make extra sense.

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

We’ll begin off with a take 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 element that now we have in SwiftUI is the VStack. It merely locations components on high of one another:

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

A VStack works very well if you solely have a handful of things, and also you need to place this stuff on high of one another. Regardless that you’ll sometimes use a VStack for a small variety of objects, however there’s no cause 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 only some objects in fashions, this may work effective. Whether or not or not it’s the right alternative… I’d say it’s not.

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

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 comprise 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 little thing 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 checklist… LazyVStack could be the higher alternative for you.

Understanding when to make use of a LazyVStack

The LazyVStack parts is functionally largely the identical as an everyday 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 checklist of things, the LazyVStack will add an increasing number of views to the hierarchy. Which means that you’re not paying an enormous price 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 simple:

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

Our drawing efficiency needs to be significantly better with the LazyVStack in comparison with the common VStack method.

In a LazyVStack, we’re free to make use of any sort of view that we would like, and now we have full management over how the checklist finally ends up trying. We don’t acquire any out of the field performance which will be nice for those who require the next degree of customization of your checklist.

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 checklist 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 a listing, you acquire some small design tweaks to make it clear that this checklist merchandise navigates to a different view.

That is very helpful for many circumstances, however you may not want any of this performance.

Checklist additionally comes with some built-in designs that mean you can simply create one thing that both seems to be just like the Settings app, or one thing a bit extra like a listing of contacts. It’s simple to get began with Checklist for those who don’t require a number of customization.

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

A brilliant primary instance of utilizing Checklist within the instance that we noticed earlier would seem 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 may if we wished to. This may be helpful if you’re utilizing Sections in your checklist for instance:

Checklist {
  Part("Basic") {
    ForEach(mannequin.normal) { 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 little one views:

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

  Part("Notifications") {
    NotificationItem(mannequin.e-newsletter)
    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 would like 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 achieve for LazyVStack in a ScrollView as a substitute.

In Abstract

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

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

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