Bottom Sheet切换时父视图偏移问题排查及解决咨询

问题根源 #

你的代码存在两个核心问题导致父视图偏移：

1. 布局层级错误：BottomSheet的GeometryReader与NavigationView是同级视图，当BottomSheet显示/隐藏时，布局系统会重新计算整体空间分配，触发NavigationView位置变动。
2. 动画范围过大：BottomSheet中的.animation(.interactiveSpring())修饰符作用于整个容器，导致父视图被牵连进动画逻辑。

修复方案 #

1. 调整BottomSheet视图层级

通过overlay将BottomSheet附加到NavigationView上层，确保它始终作为悬浮层存在，不干扰父布局的空间计算，同时修正GeometryReader中多余的闭包写法。

2. 缩小动画作用范围

将动画修饰符仅绑定到BottomSheet的显示状态，避免影响父视图。

修正后的代码 #

调整后的BottomSheetView

fileprivate enum Constants {
    static let radius: CGFloat = 16
    static let indicatorHeight: CGFloat = 6
    static let indicatorWidth: CGFloat = 60
    static let snapRatio: CGFloat = 0.25
    static let minHeightRatio: CGFloat = 0.3
}

struct BottomSheetView<Content: View>: View {
    @Binding var isOpen: Bool

    let maxHeight: CGFloat
    let minHeight: CGFloat
    let content: Content

    @GestureState private var translation: CGFloat = 0

    private var offset: CGFloat {
        isOpen ? 0 : maxHeight - minHeight
    }

    private var indicator: some View {
        RoundedRectangle(cornerRadius: Constants.radius)
            .fill(Color.secondary)
            .frame(width: Constants.indicatorWidth, height: Constants.indicatorHeight)
            .onTapGesture {
                isOpen.toggle()
            }
    }

    init(isOpen: Binding<Bool>, maxHeight: CGFloat, @ViewBuilder content: () -> Content) {
        self.minHeight = maxHeight * Constants.minHeightRatio
        self.maxHeight = maxHeight
        self.content = content()
        self._isOpen = isOpen
    }

    var body: some View {
        GeometryReader { geometry in
            VStack(spacing: 0) {
                indicator.padding()
                content
            }
            .frame(width: geometry.size.width, height: maxHeight, alignment: .top)
            .background(Color(.secondarySystemBackground))
            .cornerRadius(Constants.radius)
            .frame(height: geometry.size.height, alignment: .bottom)
            // 仅给偏移添加动画，缩小作用范围
            .offset(y: max(offset + translation, 0))
            // 绑定到isOpen状态，仅状态变化时触发动画
            .animation(.interactiveSpring(), value: isOpen)
            .gesture(
                DragGesture().updating($translation) { value, state, _ in
                    state = value.translation.height
                }.onEnded { value in
                    let snapDistance = maxHeight * Constants.snapRatio
                    guard abs(value.translation.height) > snapDistance else {
                        return
                    }
                    isOpen = value.translation.height < 0
                }
            )
        }
    }
}

修正后的TestView2

struct TestView2: View {
    @State private var showMenu = false
    @State var deleteAccountSheet = false
  
    var body: some View {
        NavigationView {
            VStack {
                Text("click me")
                    .onTapGesture {
                        deleteAccountSheet = true
                    }
                HStack {
                    Text("this will move up in view")
                        .font(.custom("OpenSans-Regular", size: 24))
                }
                Text("in the view")
            }
        }
        .blur(radius: deleteAccountSheet ? 2 : 0)
        // 使用overlay将BottomSheet附加到NavigationView上层
        .overlay(
            GeometryReader { geometry in
                BottomSheetView(
                    isOpen: $deleteAccountSheet,
                    maxHeight: geometry.size.height * 0.7
                ) {
                    Text("Give me one more click")
                        .onTapGesture {
                            print("click")
                            deleteAccountSheet = false
                        }
                }
                .edgesIgnoringSafeArea(.all)
            }
        )
    }
}

关键改动说明 #

• overlay层级：将BottomSheet放入NavigationView的overlay中，确保它是悬浮层，不会影响父视图的布局空间。
• 状态绑定动画：将.animation修饰符绑定到isOpen状态，仅当BottomSheet显示状态变化时触发动画，避免动画扩散到父视图。
• 移除冗余闭包：删除原GeometryReader中多余的{ ... }()写法，规范布局结构。

内容的提问来源于stack exchange，提问作者Swink