SwiftUI 分页滚动视图问题

Question

我正在尝试为滚动视图创建动画以将新页面重叠在图像上。图像将覆盖大部分屏幕，并且不应移动，文本应在其上滑动。 动画效果很好，但是当我滚动页面时，如果文本太长并且无法封装在屏幕的一半中，则顶部部分会隐藏在安全区域下方。有什么想法如何解决吗？

GeometryReader(content: { geometry in
                    ZStack(content: {
                        Color(.blue)
                            .ignoresSafeArea()
                        AsyncImage(
                            url: URL(string: pod.hdurl)!,
                            content: { image in
                                image.resizable()
                                    .aspectRatio(contentMode: .fill)
                                    .clipped()
                            },
                            placeholder: {
                                ProgressView()
                            })
                    })
                    .clipShape(RoundedRectangle(cornerRadius: 22))
                    .padding(EdgeInsets(top: 6, leading: 22, bottom: 6, trailing: 22))
                    .frame(
                        width: geometry.size.width,
                        height: geometry.size.height * 0.9,
                        alignment: .center
                    )
                    
                    Spacer ()
                    
                    ScrollView {
                        VStack(content: {
                            Group {
                                Color(.clear)
                            }
                            .frame(
                                width: geometry.size.width,
                                height: geometry.size.height * 0.9,
                                alignment: .center
                            )
                            
                            ZStack(content: {
                                Color(.red)
                                    .ignoresSafeArea()
                                VStack(content: {
                                    Text(pod.title)
                                        .font(.largeTitle)
                                        .foregroundStyle(.primary)
                                        .multilineTextAlignment(.center)
                                    
                                    Text(pod.explanation + pod.explanation)
                                        .font(.body)
                                        .foregroundStyle(.secondary)
                                        .multilineTextAlignment(.center)
                                })
                            })
                            .clipShape(RoundedRectangle(cornerRadius: 22))
                            .padding(EdgeInsets(top: 0, leading: 22, bottom: 6, trailing: 22))
                            .scrollTransition { content, phase in
                                content
                                    .opacity(phase.isIdentity ? 1.0 : 0.8)
                                    .scaleEffect(phase.isIdentity ? 1.0 : 0.8)
                                    .blur(radius: phase.isIdentity ? 0 : 2)
                            }
                        })
                    }
                    .scrollTargetBehavior(.paging)
                    .padding([.top], 1)
                })

Answer 1

如果我理解正确的话，问题是当文本很长时，红色背景的描述性文本的顶部不会显示。因此，即使滚动有效，用户也不知道文本可用于滚动。

我认为有几个小问题。

0. 这不是一个错误，但通过为容器指定

   content

   会使代码变得比需要的更复杂。我建议，使用尾随闭包更简单，并且我希望大多数 SwiftUI 开发人员都会这样做。所以下面的代码片段中使用了这个语法。您可能还想考虑使用 Xcode 提供的内置格式：选择代码并按 Ctrl/I。

1. 在

   GeometryReader

   内部，有多个

   View

   ，但没有为这些视图定义布局。我建议对

   ZStack

   内的项目使用另一个顶级

   GeometryReader

   。另外，不需要

   Spacer

   ：

var body: some View {
    GeometryReader { geometry in
        ZStack { // <- ADDED
            ZStack {
                // content as before
            }
            // modifiers as before

            // Spacer () // not needed

            ScrollView {
                // content as before
            }
            // modifiers as before
        }
    }
}

2. 您需要指定

   .top

   作为缩放效果的锚点

.scrollTransition { content, phase in
    content
        .opacity(phase.isIdentity ? 1.0 : 0.8)
        .scaleEffect(phase.isIdentity ? 1.0 : 0.8, anchor: .top) // anchor added
        .blur(radius: phase.isIdentity ? 0 : 2)
}

通过这些更改，它对我有用。