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

Posted 2023-03-11

【中文标题】在 ScrollView / GeometryReader 视图中将矩形与底部对齐不起作用

【英文标题】：Align Rectangle to bottom in ScrollView / GeometryReader view not working

【发布时间】：2021-10-26 13:44:07

【问题描述】：

我试图让一个矩形在 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()
    

【问题讨论】：

听起来你想反转滚动视图，因为新项目从底部开始并向上滚动。如果是这样，see this blog post。如果不是什么，你到底想要什么？

所以我希望将 Rectangle 放到视图的底部。所以它是石笋而不是石笋。

@Yrb 我添加了它的样子。

但是ScrollView 中还发生了什么？如果没有别的，为什么要使用它？如果没有ScrollView，这会容易得多。

@Yrb 这是一个简化的例子。滚动视图中会有很多矩形。因此，如果您尝试使用一个（或多个）矩形，您将会看到问题。

【参考方案1】：

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

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

【讨论】：

我更新了我的代码以显示问题和我希望发生的事情的图片。

我编辑了我的答案，所以它会导致多个矩形。