SwiftUI: List and LazyVStack. How to use and support iOS 13 and 14 versions
Let's go over List and LazyVStack implementation in SwiftUI, how to remove row separator and customise List view for iOS 13 and what under the hood. We will find out how List and LazyVStack works and implement each view depending on your needs.
I still think that the SwiftUI framework is far from complete, but it is necessary to learn and investigate it. Many developers are skeptical, but it will become the primary tool in our hands sooner or later. Because SwiftUI gives us a simple way to build UI across Apple platforms using declarative Swift syntax. Also, Xcode provides you many tools to make your work easier and faster compared to UIKit. All your code is visible as a preview and immediately refreshed after your changes. So SwiftUI is an incredibly excellent framework that design tools cannot pass by.
1. Prepare data for usage and iteration
To display a model in any container that presents rows, we need to confirm the model to Identifiable protocol. It provides a stable notion of identity to a class or value type. The following example creates Contact model that we will use in our app:
2. List view: overview and displaying data
The standard and frequent requirement for a developer is to display some collection of data in the app. The main idea of the List display items vertically, add scroll to view if needed, load row views depend on current content offset, and make them suitable for displaying. From the box, you receive default styling for each row, depending on the platform. For example, you will see line separator and disclosure indicators next to an item that initiates navigation action on the iOS platform.
The following code snippet shows how to use List to display collection of contacts data:
As you can see, it is straightforward to use List. We use custom view ContactCell to display contact data. And the result of the previous code snippet can see in the image below.
Note: Members of a collection must be uniquely identifiable. An excellent way to use UUID or ids provided by a database. Additionally, identifiers allow automatically generate animations (like moves, deletions, inserts)
Unfortunately, problems appear when we want to change the style of the List. For example, remove cell separators or disclosure indicators. To remove or customize these properties, we should avoid using List. Instead of it better to use LazyVStack. The following code snippet shows you how to remove row separators by using events: onAppear() and onDisappear(), but it will work only for the iOS 13 version:
In the future reading, we will figure out why this is so.
3. LazyVStack view: overview and displaying data
In this part, we will talk about LazyVStack, but everything is the same for LazyНStack. Likewise, for VStack and HStack
Using stacks is a good solution for groups or repeating views. But if content larger than the device screen, the scroll indicator will not appear. So to make scrollable content, you have to wrap your stack inside a ScrollView. And if a performance issue appears, you should use the lazy stack.
LazyVStack renders only items that need now. In the following example, a ScrollView contains a LazyVStack that represents vertical rows of contact views.
Don’t to forget set your padding to content if need
You will get the following result on the image:
Also, by default, stack view doesn’t have row separators and disclosures, so you have to implement it if you need it. Or use List instead of stacks.
4. Conclusion
In iOS 13, the List is a wrapper over the UITableview(NSTableView). You can see it by the influence of the appearance proxy for the receiver. From UITableview, it accepts lazy loading and carries a lot of baggage and unnecessary low-level work since there is a need for delegates and the basic implementation of cells. When VStack is a freeform StackView that contains random combinations of other views and controls their layout and organization. If we want to support both 13 and 14 versions of iOS, and List with a standard display of separators and disclosure indicators is suitable for us, you can safely use it. But if we need customization of these properties, we are limited to using LazyVstack or LazyHStack from iOS 14. And accordingly, support List using UitableView appearance proxy for iOS 13, as in iOS 14 List has its other implementation.
You can use VStack or HStack to solve this problem, but they have no optimization for displaying a large dataset, and you may run into performance problems. List, LazyVStack, LazyHStack work similarly with UITableView. They only render cells in the visible content area. So UIKit / AppKit are event-driven APIs that rely heavily on delegation and callbacks, while SwiftUI is data-driven.
Thank you for taking the time to read my story and for your support. If you enjoyed this article, please clap it to let me know. I will be sharing more stories in the future, so be sure to follow me to stay updated. Your feedback and support are greatly appreciated!
Follow Me: Twitter | LinkedIn
