SwiftUI ScrollView with Path element not showing all - swiftui

Question

This sample code illustrates my problem:
import SwiftUI
struct ContentView: View {
var body: some View {
ScrollView {
VStack {
subviewone()
subviewone()
subviewone()
subviewone()
subviewone()
subviewone()
graph()
}.padding(.all)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct graph: View {
var body: some View {
GeometryReader { geo in
Path { path in
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: geo.size.width, y: 0))
path.addLine(to: CGPoint(x: geo.size.width, y: geo.size.width))
}.fill(Color.red)
}
}
}
struct subviewone: View {
var body: some View {
VStack {
Text("testtest")
Text("testtest")
Text("testtest")
Text("testtest")
Text("testtest")
Text("testtest")
Text("testtest")
}
}
}
I need one view to display some graph, and I need the size of the space allocated for the graph view to scale the axis.
That is why I placed it inside GeometryReader.
When I run this code on a device that would need to scroll (iPhone 8 for example), I am unable to scroll to see the whole "graph".
It looks as if the "graph view" is somehow drawn outside of the ScrollView.
Setting frame on the Path view doesn't help.
Thank you for any help provided.

Answer 1

1) you should use Shape, because then you get a rect in which you can "paint"
2) you have to give a frame with it, because Apple does not know how big your shape is (see the Rectangles i appended at the end)
3) if you do not give a frame with it, you get a "default" height for your shape, as Rectangles get it
struct ContentView: View {
var body: some View {
ScrollView {
VStack {
subviewone()
subviewone()
subviewone()
subviewone()
subviewone()
subviewone()
graph()
.fill(Color.red)
.frame(height:400) // or: .aspectRatio(contentMode: .fill)
Rectangle()
Rectangle()
Rectangle()
}.padding(.all)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct graph: Shape {
func path(in rect: CGRect) -> Path {
Path { path in
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: rect.size.width, y: 0))
path.addLine(to: CGPoint(x: rect.size.width, y: rect.size.width))
}
}
}
struct subviewone: View {
var body: some View {
VStack {
Text("testtest")
Text("testtest")
Text("testtest")
Text("testtest")
Text("testtest")
Text("testtest")
Text("testtest")
}
}
}