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

SwiftUI presents a number of approaches to constructing lists of content material. You should utilize a VStack in case your record consists of a bunch of parts that ought to be positioned on high of one another. Or you should use a LazyVStack in case your record is absolutely lengthy. And in different circumstances, a Listing would possibly make extra sense.

On this submit, I’d like to check out every of those parts, define their strengths and weaknesses and hopefully offer you some insights about how one can determine 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 Listing.

Understanding when to make use of VStack

By far the only stack part that we now have 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 whenever you solely have a handful of things, and also you wish to place these things on high of one another. Though you’ll usually use a VStack for a small variety of gadgets, 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 gadgets in fashions, this can work effective. Whether or not or not it’s the proper alternative… I’d say it’s not.

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

Finally 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 instance these views additionally comprise pictures that have to 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 can be a customized view that permits loading pictures from the community.

When every little thing is positioned in a VStack like I did on this pattern, your scrolling efficiency will likely 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 record… LazyVStack is perhaps 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 record of things, the LazyVStack will add an increasing number of 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 would possibly 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 would like, and we now have full management over how the record finally ends up trying. We don’t acquire any out of the field performance which could be nice if you happen to require the next degree of customization of your record.

Subsequent, let’s see how Listing is used to know how this compares to LazyVStack.

Understanding when to make use of Listing

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

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

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

Listing additionally comes with some built-in designs that help you simply create one thing that both seems to be just like the Settings app, or one thing a bit extra like an inventory of contacts. It’s straightforward to get began with Listing if you happen to don’t require a lot of customization.

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

A brilliant fundamental instance of utilizing Listing within the instance that we noticed earlier would seem like this:

Listing(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 needed to. This may be helpful whenever you’re utilizing Sections in your record for instance:

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

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

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

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

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

The choice between a Listing and a LazyVStack for me often comes down as to whether or not I want or need Listing performance. If I discover that I would like little to none of Listing‘s options odds are that I’m going to achieve for LazyVStack in a ScrollView as an alternative.

In Abstract

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

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

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