The SwiftUI ScrollView lacks some features I need and so I created a custom MyScrollView based on UIScrollView wrapped within a UIViewControllerRepresentable. While this works fine in general I know came across a very strange problem:
When MyScrollView is used in a sheet and its content touches bottom SafeArea, the UI freezes as soon as the should be displayed.
The code below shows the problem as well in preview as on the simulator and on devices. Please note that the code is tuned do the display size of an iPhone 16 Pro. When running on different devices one might need to adjust height of the Color.yellow.
In the demo code the UI freezes if the Color.yellow has a height between 738 to 771 pixels. Every other height is fine.
Is there something wrong with my implementation of MyScrollView? When using ScrollView instead, everything works fine.
Code:
struct ContentView: View {
@State private var showSheet: Bool = false
var body: some View {
ZStack {
Button("Show Sheet") {
showSheet = true
}
}
.sheet(isPresented: $showSheet) {
VStack {
Text("Some Header Content")
MyScrollView {
VStack {
Color.yellow
//.frame(height: 737) // works
.frame(height: 738) // does NOT works
// ...
//.frame(height: 771) // does NOT works
//.frame(height: 772) // works
}
}
.ignoresSafeArea()
}
}
}
}
struct MyScrollView<Content: View>: UIViewControllerRepresentable {
let content: Content
init(@ViewBuilder content: () -> Content) {
self.content = content()
}
func makeUIViewController(context: Context) -> UIViewController {
let scrollViewVC = UIViewController()
scrollViewVC.view.backgroundColor = .clear
let scrollView = UIScrollView()
scrollView.backgroundColor = .clear
let contentVC = UIHostingController(rootView: self.content)
contentVC.view.backgroundColor = .clear
context.coordinator.contentVC = contentVC
context.coordinator.scrollView = scrollView
scrollView.translatesAutoresizingMaskIntoConstraints = false
scrollViewVC.view.addSubview(scrollView)
NSLayoutConstraint.activate([
scrollView.topAnchor.constraint(equalTo: scrollViewVC.view.topAnchor),
scrollView.bottomAnchor.constraint(equalTo: scrollViewVC.view.bottomAnchor),
scrollView.leadingAnchor.constraint(equalTo: scrollViewVC.view.leadingAnchor),
scrollView.trailingAnchor.constraint(equalTo: scrollViewVC.view.trailingAnchor)
])
contentVC.willMove(toParent: scrollViewVC)
scrollViewVC.addChild(contentVC)
contentVC.view.translatesAutoresizingMaskIntoConstraints = false
scrollView.addSubview(contentVC.view)
NSLayoutConstraint.activate([
contentVC.view.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor),
contentVC.view.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor),
contentVC.view.leadingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.leadingAnchor),
contentVC.view.trailingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.trailingAnchor),
contentVC.view.widthAnchor.constraint(equalTo: scrollView.frameLayoutGuide.widthAnchor)
])
contentVC.didMove(toParent: scrollViewVC)
return scrollViewVC
}
func updateUIViewController(_ uiViewController: UIViewController, context: Context) {
context.coordinator.contentVC?.rootView = content
}
func makeCoordinator() -> Coordinator {
return Coordinator()
}
class Coordinator {
var contentVC: UIHostingController<Content>?
var scrollView: UIScrollView?
init() {
//...
}
}
}
#Preview {
ContentView()
}
Topic:
UI Frameworks
SubTopic:
SwiftUI
2
0
115