如何在不破坏动画的情况下将背景图像放置在 ZStack 中？

Question

MRE

struct Test: View {
    var body: some View {
        NavigationView {
            GeometryReader { geometry in
                ScrollView {
                    ZStack {
                        Image("paperBG")
                            .resizable()
                            .aspectRatio(geometry.size, contentMode: .fill)
                            .edgesIgnoringSafeArea(.all)

                        Text("hi")
                            .navigationBarTitle("Title")
                    }
                }
                .navigationBarTitleDisplayMode(.automatic)
            }
        }
    }
}

我需要一个滚动视图，背景图像边到边。您还可以看到，当标题动画到顶部时，动画会改变背景的大小。

Answer 1

您用来查找窗口大小的

GeometryReader

根据导航标题的显示方式提供不同的大小。如果您可以在不使用

GeometryReader

的情况下获得窗口的大小，或者如果您可以只使用

.scaledToFill

代替，那么这将为您提供一个解决方案。否则，如果

NavigationView

在

GeometryReader

内，效果会更好：

struct Test: View {
    var body: some View {
        GeometryReader { geometry in
            NavigationView {
                ScrollView {
                    ZStack {
                        Image("paperBG")
                            .resizable()
                            .aspectRatio(geometry.size, contentMode: .fill)
                            .edgesIgnoringSafeArea(.all)

                        Text("hi")
                            .navigationBarTitle("Title")
                    }
                }
                .navigationBarTitleDisplayMode(.automatic)
            }
        }
    }
}

如果还不正确，那么也许您可以提供您的“paperBG”进行测试，并详细说明您期望它的行为方式。