How to loop subviews in SwiftUI

Find out how to iterate through subviews in SwiftUI.

The Problem

For all those who remember the time when UIKit was the “new thing” , or at least the main framework for developing iOS apps, it was probably a shock to discover that a simple subview iteration in SwiftUI is not so trivial as it was used to be in UIKit.

Let us revisit the good old UIKit days:

self.subviews.forEach {
	// do stuff with the subview
}

Applications are numerous. You might want to add a custom separator between some views. Or you might need to insert another view at some random index. Maybe you might need to get a height of a specific view.

Iterating through subviews was something we took for granted before SwiftUI started to take up more place in everyday developer life.

How is it usually done?

Iterating through subviews in SwiftUI has not been in the prime focus of community so far. Thou this does not make this issue lose its atractivity, but rather makes the problem - and some solutions - more exotic. So far there have been some interesting approaches, but also not very safe ones.

Some of these require usage of Mirror to extract each individual view just to wrap them it in an AnyView and then build an array. Something like in the code below.

extension TupleView {

	var array: [AnyView] {
		Mirror(reflecting: self.value).children.compactMap {
			AnyView(_fromValue: $0.value)
		}
	}
}

We can do better

In order to avoid usage of AnyView we need to approach this issue from another angle. Luckily SwiftUI provides a way to do this. This approach require usage of an private API which might be a no-go for some developers. So far it has proven to be safe and accepted from Apple.

How?

A private API can be put in place to access the subviews. First we need to define a new type which conforms to the _VariadicView.MultiViewRoot . You can name it as you like as long as it implements the required method. I named it CustomLayout.

This gives us access to children collection of a variadic view. Since this collection is a random access collection we get to use ForEach and iterate through subviews. And this is exactly what we intended to do. Having the access to the collection of views we get to the behaviour we were looking for. We can loop through subviews and make changes or just read per view relevant information according to their index. Or both 🙂

In the example below we simply set the separator color based on the index of the individual subview.

struct CustomLayout: _VariadicView.MultiViewRoot {

	func body(children: _VariadicView.Children) -> some View {
		ForEach(children) { child in
			child
			if child.id == children.last?.id {
				Color.red.frame(height: 1)
			} else {
				Color.green.frame(height: 1)
			}
		}
	}
}

var body: some View {
	_VariadicView.Tree(CustomLayout()) {
		Text("1")
		Text("2")
		Text("3")
	}
}

Final step is to put the CustomLayout to work simply by nesting your views in _VariadicView.Tree(CustomLayout()).

Summary

I hope you found these information useful and interesting. You can also check out the example code on my GitHub.

SwiftUI is still developing and makes some common tasks more complicated then they should be. Nevertheless Xcode and Swift paired together are powerful tools that are up to the most demanding task. Growing complexity of the language opens a window of possibilities to almost always get what we want 🙂.

25032024.1