SwiftUI ScrollView with Path element not showing all

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")
        }

    }
}