SwiftUI List: how to make scrollable background using pattern image?

Question

In UIKit I can easily set scrollable background pattern for UITableView like this:

tableView.backgroundColor = .init(patternImage: .init(named: "background")!)

Background image in such case is infinitely tiled and is scrollable along with scroll content.

If I try to do the same in SwiftUI:

List {
    ...
}
.background(
    Color(
        UIColor(patternImage: .init(named: "background")!)
    )
)
.scrollContentBackground(.hidden)

background isn't set at all. Similar problem described here: SwiftUI can't create Color by UIColor(patternImage:).

If I try to set background image:

List {
    ...
}
.background(
    Image("background").resizable(resizingMode: .tile)
)
.scrollContentBackground(.hidden)

it is displayed and tiled, but not scrollable.

How to make for SwiftUI List the same behaviour as in UIKit?

Answer 1

You can make the background scroll as the lists scrolls:

struct ContentView: View {
    @State private var offset: CGFloat = 0.0  // 👈 1. Store the offset

    var body: some View {
        List {
            ...
        }
        .background {
            Image(.defaultCard)
                .resizable(resizingMode: .tile)
                .offset(y: offset)  // 👈 2. Apply the offset
        }
        .scrollContentBackground(.hidden)
        .onScrollGeometryChange(for: CGFloat.self) { geometry in
            geometry.contentOffset.y + geometry.contentInsets.top  // 👈 3. Calculate the offset
        } action: { _, newOffset in
            offset = -newOffset  // 👈 4. Update the offset
        }
    }
}

Note that you should make the background size >= content size to fill all the way down. Also, You may want to handle the extra bouncing space of scrollables as well.