0

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

enter image description here

JohnKubik
  • 69
  • 1
  • 1
  • 12
  • It sounds like you want to reverse the scroll view, as in new items start at the bottom and scroll up. If so, [see this blog post](https://www.thirdrocktechkno.com/blog/implementing-reversed-scrolling-behaviour-in-swiftui/). If not what, exactly do you want? – Yrb Oct 26 '21 at 13:54
  • So I want the Rectangle to be alighted to the bottom of the view. so it is a stalagmite instead of a stalagtight. – JohnKubik Oct 26 '21 at 14:09
  • @Yrb I added an image of what it looks like. – JohnKubik Oct 26 '21 at 14:12
  • But what else is going in the `ScrollView`? If nothing else, why use it? This would be much easier without the `ScrollView`. – Yrb Oct 26 '21 at 14:29
  • @Yrb it is a simpliefied example. There are going to be a lot of rectanbles in the scrollview. So if you jut try with one (or more) rectangles you are going to see the issue. – JohnKubik Oct 26 '21 at 14:36
  • If you want the second rectangle on top of the first, you are looking to reverse the `ScrollView`, and my first comment gives you a link to resolve it. – Yrb Oct 26 '21 at 15:00
  • @Yrb, I dont want the second one on top of the first. Please look at the image I posted for what I am looking for. Not sure if I am explaining it correctly. – JohnKubik Oct 26 '21 at 15:07
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/238558/discussion-between-yrb-and-johnkubik). – Yrb Oct 26 '21 at 15:07

1 Answers1

0

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(spacing: 10) {
                    ForEach(0..<30) { index in
                        Rectangle()
                            .frame(width: 10, height: CGFloat.random(in: 20...50))
                    }
                }
            }
            .background(Color.red)
        }
        .padding()
    }
Yrb
  • 8,103
  • 2
  • 14
  • 44