Question

我正在尝试创建一个ScrollView，该ScrollView包含一个GeometryReader（显然不是这样）。 GeometryReader应包含具有固定宽度和高度的（图像）。但是，在执行此操作时，ScrollView将视图“推”到屏幕上方，似乎正在应用一些随机的垂直偏移。

var body: some View {
    ScrollView {
        GeometryReader { geometry in
            Image("hp")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: geometry.size.width, height: 400)
                .clipped()
        }
    }
}

在删除GeometryReader并仅插入图像时，它可以正常工作。

有人可以帮忙吗？

编辑：找到了解决方案。我通过告诉图像它应该与内部几何读取器一样高和宽来实现所需的行为。然后我设置内部几何读取器的框架。我正在使用外部几何读取器来访问整个屏幕的尺寸

var body: some View {
    GeometryReader { outerGeometry in
        ScrollView {
            VStack {
                GeometryReader { innerGeometry in
                    Image("hp")
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .frame(width: innerGeometry.size.width,
                        height: innerGeometry.size.height)
                        .offset(y: innerGeometry.frame(in: .global).minY/7)
                        .clipped()
                }
                    .frame(width: outerGeometry.size.width, height: 300)
            }
        }
    }
}

我希望它能对某人有所帮助！

Answer 1

GeometryReader（如果照原样放置）提供的尺寸不是ScrollView本身的大小，而是提供放置图像的“内容视图”的大小。 ScrollView的“内容视图”大于屏幕尺寸，以使当滚动超过滚动文档尺寸时在边缘产生弹性效果。

正确用法在@Александр_Грабовский答案中。

Answer 2

只需尝试将ScrollView放在GeometryReader内，反之亦然：

// ...
    var body: some View {

        GeometryReader { geometry in

            ScrollView {
                Image("hp")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: geometry.size.width, height: 400)
                    .clipped()
            }
        }

    }
// ...

，结果应为：

SwiftUI ScrollView中的GeometryReader导致奇怪的行为和随机偏移

2 个答案: