首页 > 解决方案 > SwiftUI ScrollView SafeArea 问题

问题描述

我有一个自定义模式视图(使用 ZStack),它有一个 ScrollView。这个模态视图是弹簧动画打开到全屏忽略所有安全区域。

然而,当我的模态视图顶部到达顶部安全区域(y:40)时,动画效果非常好。内部的滚动视图根据需要从其父视图的顶部跳转到设备的顶部,这使得动画看起来很糟糕。

关于如何解决这个问题的任何想法?

这以最简单的形式展示了我正在使用的内容......

import SwiftUI

struct ModalView: View {
    @Binding var padding: CGFloat
    @Binding var cornerRadius: CGFloat
    @Binding var imageHeightMultiple: CGFloat

var body: some View {
    ZStack {
        ScrollView(.vertical, showsIndicators: false) {

            GeometryReader { geo in
                Image("image_1")
                .renderingMode(.original)
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: geo.size.width, height: geo.size.height)
                .background(Color.gray)
                .clipped(antialiased: true)
            }
            .frame(height: UIScreen.main.bounds.width * imageHeightMultiple)
        }
    }
    .background(Color.white)
    .cornerRadius(cornerRadius)
    .padding(.horizontal, padding)
}
}


#if DEBUG
struct ModalView_Previews: PreviewProvider {

@State static var padding: CGFloat = 16
@State static var cornerRadius: CGFloat = 20
@State static var imageHeightMultiple: CGFloat = 0.7

static var previews: some View {
    return ZStack {
        Color(.gray)
        .edgesIgnoringSafeArea(.all)

        ModalView(padding: $padding, cornerRadius: $cornerRadius, imageHeightMultiple: $imageHeightMultiple)
        .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height - 80)
        .position(x: UIScreen.main.bounds.width/2, y: UIScreen.main.bounds.height/2)
        .edgesIgnoringSafeArea(.all)
    }
    .previewDevice(PreviewDevice(rawValue: "iPhone 11 Pro"))
}
}
#endif

标签: animationswiftuiscrollviewsafeareaview

解决方案


推荐阅读