Align Rectangle to bottom in ScrollView / GeometryReader view not working

Question

I am trying to get a rectangle to be aligned in a GeometryReader view, that is nested inside a HStack and then ScrollView.

I can not get the Rect() to be aligned to the bottom of the view, it is only drawn from the top.

This does not work, the Rect is drawn coming from the top of View, not from the Bottom of the View.

How do I fix this? I have tried putting the .bottom alignment on all of the views and frames and none of them work.

If additional clarification is needed please let me know.

I updated my code to an actual example.

import SwiftUI



struct Scrollview1: View {
    
    
    let samples = [106, 77, 53, 15, 83, 80, 63, 43, 80, 81, 66, 75, 78, 57, 18, 73, 80, 70, 27, 82, 83, 70, 66, 78, 50, 30, 13, 77, 67, 40, 12, 76, 73, 73, 77, 63, 42, 12, 88, 77, 46, 14, 90, 83, 73, 79, 73, 34, 14, 87, 78, 53, 37, 79, 75, 19, 86, 74, 45, 14, 79, 81, 46, 14, 82, 76, 44, 69, 70, 37, 13, 80, 81, 48, 15, 76, 79, 41, 76, 75, 49, 26, 79, 78, 57, 18, 79]
    
    
    var body: some View {
        
        
        
        ScrollView(.horizontal, showsIndicators: false) {
    
            VStack (spacing: 3) {
                
                
                HStack (alignment: .bottom , spacing: 1) {
                    
                    ForEach(samples, id: \.self) { sample in
                        
                        GeometryReader { geo in
                            
                            Rectangle()
                                .fill( geo.frame(in: .global).maxX >  100 && 250 > geo.frame(in: .global).maxX  ? Color.red : Color.gray)
                            //  .frame( alignment: .leading)
                                .frame(width: 5, height: CGFloat(sample))
                            
                        }
                     }
                }
            }
        }
        
    }
}
struct Scroll_Previews1: PreviewProvider {
    static var previews: some View {
        Scrollview1()
    }
}

Answer 1

I think this is what you are looking for. When the ScrollView goes into the GeometryReader it becomes top aligned with the view. I put a background on the Scrollview so you could see it was just a height of 50. Your issue is not the ScrollView , it is the GeometryReader . The ScrollView needs to be in a VStack with a Spacer() above to push it down.

    GeometryReader { geometry in
        VStack {
            Spacer()
            ScrollView(.horizontal){
                HStack(alignment: .bottom){
                    Rectangle()
                        .frame(width: 2, height: 50)
                }
            }
            .background(Color.red)
        }
        .padding()
    }