在 ScrollView/GeometryReader 视图中将矩形与底部对齐不起作用

Question

我试图让一个矩形在 GeometryReader 视图中对齐，它嵌套在 HStack 中，然后是 ScrollView。

我无法让 Rect() 与视图底部对齐，它只能从顶部绘制。

这不起作用，矩形是从视图的顶部绘制的，而不是从视图的底部绘制的。

我该如何解决？ 我尝试将 .bottom 对齐放在所有视图和框架上，但没有一个起作用。

如果需要额外说明，请告诉我。

我将代码更新为实际示例。

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

我想这就是你要找的。 当ScrollView进入GeometryReader它会与视图顶部对齐。 我在Scrollview上放了一个背景，所以你可以看到它只有 50 的高度。你的问题不是ScrollView ，而是GeometryReader 。 ScrollView需要在VStack ，上面有一个Spacer()才能将它向下推。

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