How to fit ScrollView to content in SwiftUI

Issue #769

If we place ScrollView inside HStack or VStack, it takes all remaining space. To fit ScrollView to its content, we need to get its content size and constrain ScrollView size.

Use a GeometryReader as Scrollview content background, and get the local frame

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import SwiftUI

struct HSearchBar: View {
@State
private var scrollViewContentSize: CGSize = .zero

var body: some View {
HStack {
searchButton
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 12) {
ForEach(store.collections) { collection in
collectionCell(collection)
}
}
.background(
GeometryReader { geo -> Color in
DispatchQueue.main.async {
scrollViewContentSize = geo.size
}
return Color.clear
}
)
}
.frame(
maxWidth: scrollViewContentSize.width
)
}
}
}

Comments