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

Question

添加标准 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)
                
            }
        }
    }
}

Answer 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://stackoverflow.com/a/62466397/12299030。