How display a List inside a SwiftUI ScrollView

The SwiftUI mechanism to render a List inside a ScrollView. Includes a snippet.

SOFTWARE DEVELOPMENTIOS DEVELOPMENTSWIFTUI

Eduardo Domínguez Menéndez

7/18/20243 min read

Snippet ScrollView containing a List
Snippet ScrollView containing a List

Let's start a new article of my coding school. While working on a sidebar, I encountered an undesired behaviour. My code structure consisted of a ScrollView containing a VStack with buttons and a List. Surprisingly, the List was not displaying. Initially, I suspected a SwiftUI bug, but the system was actually behaving correctly. Why was this happening?

SwiftUI rendering policies for a List and a ScrollView

The problem arises from rendering policies. The ScrollView expects its size from its content, while the List expects its size from its container. This mutual dependency creates a deadlock, with each element waiting for the other's size. The rendering system resolves this deadlock by eliminating the List, this action is called "drop".

How display a List inside a ScrollView

To fix this, I applied the frame modifier to the List, setting a minimum height with frame modifier as you can see in the next code snippet:

Suggested Software Applications to improve your developer workflows

Prompt Creator

Generate the best prompts forgetting prompt engineering techniques and their extra verbose while you are drafting prompt. You focus in define the details of the task and Prompt Creator creates the best prompts following a template approach which seamlessly generates the extra verbose to launch the your Chat AI the best prompts.

GIS for Developers

A tool to collect locations on a map and transform them on entities of MapKit framework to import in Xcode ready to use in your projects. Boost your productivity on GIS projects. App has two two versions: native macOS and iOS for iPad.