影响滚动视图的几何阅读器

Posted 2023-02-24

【中文标题】影响滚动视图的几何阅读器

【英文标题】：Geometryreader affecting scrollview

【发布时间】：2020-10-15 07:34:46

【问题描述】：

添加标准 Scrollview 时，我可以毫无问题地滚动到列表的末尾，在我的按钮上添加 GeometryReader 后，滚动列表不会滚动到列表的末尾，而是停在顶部的某处我的按钮。 geometryReader 不能缩放到子对象的大小，如果不为 GeometryReader 指定硬编码的帧大小，如何更改它？我正在使用 GeometryReader 稍后使用 geo.frame(in: .global).maxY

识别与屏幕上位置相对应的按钮顶部

struct scroll: View 
    
    private var gridItemLayout = [GridItem(.flexible()), GridItem(.flexible())]
    
    var body: some View 
        ScrollView 
            VStack 
                LazyVGrid(columns: gridItemLayout) 
                    Circle()
                        .scaledToFill()
                        .foregroundColor(.red)
                    Circle()
                        .scaledToFill()
                        .foregroundColor(.green)
                    Circle()
                        .scaledToFill()
                        .foregroundColor(.blue)
                    Circle()
                        .scaledToFill()
                        .foregroundColor(.yellow)
                
                GeometryReader  geo in
                    Button(action: 
                        
                    ) 
                        Text("Adjust time")
                    
                    .cornerRadius(18.0)
                    .padding(.top, 5)
                
                //.frame(width: .infinity, height: 50)
                
            
        
    

当检查高度并尝试将 GeometryReader 的框架设置为等于按钮的高度时，它也会给我 0 作为按钮的值。当我尝试用 geo.frame.width 读取按钮的宽度时，它给了我一个正确的值。？

struct scroll: View 
    
    private var gridItemLayout = [GridItem(.flexible()), GridItem(.flexible())]
    
    @State private var buttonHeight: CGFloat = .zero
    
    var body: some View 
        ScrollView 
            VStack 
                Text("\(buttonHeight)")
                LazyVGrid(columns: gridItemLayout) 
                    
                    Circle()
                        .scaledToFill()
                        .foregroundColor(.red)
                    Circle()
                        .scaledToFill()
                        .foregroundColor(.green)
                    Circle()
                        .scaledToFill()
                        .foregroundColor(.blue)
                    Circle()
                        .scaledToFill()
                        .foregroundColor(.yellow)
                
                GeometryReader  geo in
                    
                    Button(action: 
                        
                    ) 
                        Text("Adjust time")
                    
                    .onAppear(perform: 
                        buttonHeight = geo.size.height
                    )
                    .cornerRadius(18.0)
                    .padding(.top, 5)
                
                .frame(width: .infinity, height: buttonHeight)
                .background(Color.gray)
                
            
        
    

【参考方案1】：

您可以通过将GeometryReader 放入按钮背景来阅读它，例如

Button(action: 
    
) 
    Text("Adjust time")

.cornerRadius(18.0)
.padding(.top, 5)
.background(GeometryReader  geo in
   // geo.frame(in: .global).maxY      // << global position of button
)

然后，您甚至可以将其存储在视图首选项中以传递到状态中，例如 https://***.com/a/62466397/12299030。

【讨论】：

啊哈很好，不知道背景的事情：D 所以谢谢。将其存储到偏好中并传递它我知道但再次感谢您指出!!