Whenever you consider creating a scrollable screen in SwiftUI, you might think of using a List. However, it’s not always the best choice. Lists are great for displaying uniform data. For anything else, a ScrollView with a lazy stack is almost always the best option. This week, we will learn how to build a custom scrollable container in SwiftUI with precise control of look and feel.

SwiftWithMajid is a platform for learning and mastering Swift programming, offering tutorials, articles, and resources for iOS and macOS developers. Developers can learn about Swift language features, iOS app development, and software architecture patterns to build elegant and efficient applications using Swift.

Swift with Majid

When building scrollable screens in SwiftUI, List is not always the best choice for non-uniform data. Using ScrollView with lazy stacks and the Container View APIs introduced in recent SwiftUI versions, you can build custom reusable primitives that offer more design flexibility. The post walks through building ScrollingSurface (a ScrollView/LazyStack wrapper), DividedCard (using Group(subviews:) to insert dividers between child views), and SectionedSurface (using ForEach(sections:) to extract and filter sections). A custom NavigationButtonStyle replicates the chevron indicator normally provided by List. Together these primitives replicate List behavior while giving precise control over look and feel.

Building List replacement in SwiftUI