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

And*_*ltz 8 ios swift swiftui

我试图创建一个包含 GeometryReader 的 ScrollView(明确不是相反)。GeometryReader 应包含具有固定宽度和高度的(图像)。然而,当这样做时,ScrollView 将视图推到屏幕“上方”,它似乎应用了一些随机的垂直偏移。

在此处输入图片说明

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

删除 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)
            }
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

我希望它可以帮助某人!

Але*_*кий 12

试着把ScrollView里面,GeometryReader而不是反之亦然:

// ...
    var body: some View {

        GeometryReader { geometry in

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

    }
// ...
Run Code Online (Sandbox Code Playgroud)

结果应该是:

在此处输入图片说明


Asp*_*eri 7

GeometryReader,如果按照您的方式放置,则提供的不是其本身的大小ScrollView,而是放置图像的“内容视图”的大小。“内容视图”ScrollView大于屏幕尺寸,以便当滚动超过滚动文档尺寸时在边缘产生弹簧效果。

\n

正确的用法在@\xd0\x90\xd0\xbb\xd0\xb5\xd0\xba\xd1\x81\xd0\xb0\xd0\xbd\xd0\xb4\xd1\x80_\xd0\x93\xd1\x80 \xd0\xb0\xd0\xb1\xd0\xbe\xd0\xb2\xd1\x81\xd0\xba\xd0\xb8\xd0\xb9\ 的答案

\n