Hi there,
It appears Im missing something fundamental in how ScrollViews manage its content view.
I have a very large Content View to add into a ScrollView. If I build the content from Views smaller or not declaring their own frame sizes, the ScrollView manages the placement of the content view without issue. But if I declare a large view and try to add that to as the content view, the offset of the content view appears to be added it too far to the top left. If you scroll the view, you will find the content will show it is miss placed at the bottom. I can force the Offset of the content view to place it correctly, but the offset value will be different both in orientations and different sizes of the content view.
Here's a simple example of building the content view which demonstrates the issue. What am I doing wrong? The code works best on an ipad simulator.
//
// ContentView.swift
// BigContentScrollTest
//
// Created by Eleanor Spenceley on 27/11/2019.
import SwiftUI
struct ContentView: View {
@Environment(\.horizontalSizeClass) var horizontalSizeClass: UserInterfaceSizeClass?
@Environment(\.verticalSizeClass) var verticalSizeClass: UserInterfaceSizeClass?
var body: some View {
if UIDevice.current.orientation.isPortrait || horizontalSizeClass == .compact {
let verticalStack = VStack {
Text("Side Panel")
.background(Color.gray)
ScrollView([.horizontal, .vertical], showsIndicators: true) {
ScrollContentView()// .offset(x: 100, y:300) // Use without the offset first.
}.background(Color.blue)
}
return AnyView(verticalStack)
}
else {
let horizontalStack = HStack {
Text("Side Panel")
.background(Color.gray)
ScrollView([.horizontal, .vertical], showsIndicators: true) {
ScrollContentView() //.offset(x: 100, y:300) // Use without the offset first.
}.background(Color.blue)
}
return AnyView(horizontalStack)
}
}
}
struct ScrollContentView : View {
private var optimumFlowChartSize = CGSize(width: 1500, height: 1500)
var body: some View {
VStack {
Text("Top").frame(height:20, alignment: .leading)
Rectangle()
.fill(Color.orange)
.frame(width: self.optimumFlowChartSize.width,
height: self.optimumFlowChartSize.height)
Text("Bottom").frame(height:20, alignment: .leading)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
.previewLayout(.fixed(width: 1024, height: 783))
.previewDisplayName("iPad Pro (10.5-inch) Landscape")
}
}