如何在ZStack中基于另一视图确定视图的特定位置？

你当前通过硬编码offset(y: -280)定位绿色视图，导致不同设备适配问题。可以通过PreferenceKey获取灰色视图的位置信息，动态计算绿色视图的偏移量，同时保留滚动淡出效果。

修改后的完整代码 #

import SwiftUI

// 定义PreferenceKey用于传递视图frame信息
struct ViewFrameKey: PreferenceKey {
    static var defaultValue: CGRect = .zero
    
    static func reduce(value: inout CGRect, nextValue: () -> CGRect) {
        value = nextValue()
    }
}

struct ContentView: View {
    @State private var contentOffset = CGFloat(0)
    @State private var grayViewFrame = CGRect.zero
    
    var body: some View {
        NavigationView {
            ZStack(alignment: .top) {
                VStack(spacing: 0) {
                    TrackableScrollView { offset in
                        contentOffset = offset.y
                    } content: {
                        VStack(spacing: 0) {
                            Text("Hello World")
                                .padding()
                                .frame(maxWidth: .infinity)
                                .background(Color.gray)
                                // 传递当前视图的frame信息
                                .background(
                                    GeometryReader { proxy in
                                        Color.clear
                                            .preference(key: ViewFrameKey.self, value: proxy.frame(in: .global))
                                    }
                                )
                        }
                    }
                }
                
                Text("HELLO")
                    .frame(maxWidth: .infinity)
                    .background(Color.green)
                    .opacity(contentOffset < -16 ? 0 : 1)
                    .animation(.easeIn(duration: 0.2), value: contentOffset)
                    // 动态计算偏移量：灰色视图的底部位置就是绿色视图的顶部位置
                    .offset(y: grayViewFrame.maxY)
            }
            .onPreferenceChange(ViewFrameKey.self) { newFrame in
                grayViewFrame = newFrame
            }
            .ignoresSafeArea()
            .frame(maxHeight: .infinity, alignment: .top)
            .background(Color.blue) // 替换为你的AccountBackground()即可
            .navigationBarHidden(true)
        }
    }
}

// TrackableScrollView的实现（如果已有可直接复用）
struct TrackableScrollView<Content: View>: View {
    let onOffsetChange: (CGPoint) -> Void
    let content: Content
    
    init(onOffsetChange: @escaping (CGPoint) -> Void, @ViewBuilder content: () -> Content) {
        self.onOffsetChange = onOffsetChange
        self.content = content()
    }
    
    var body: some View {
        ScrollView {
            content
                .background(
                    GeometryReader { proxy in
                        Color.clear
                            .preference(key: ScrollOffsetKey.self, value: proxy.frame(in: .named("scroll")))
                    }
                )
        }
        .coordinateSpace(name: "scroll")
        .onPreferenceChange(ScrollOffsetKey.self) { frame in
            onOffsetChange(CGPoint(x: 0, y: frame.minY))
        }
    }
}

struct ScrollOffsetKey: PreferenceKey {
    static var defaultValue: CGRect = .zero
    
    static func reduce(value: inout CGRect, nextValue: () -> CGRect) {
        value = nextValue()
    }
}

关键实现说明 #

• 传递视图位置信息：通过ViewFrameKey这个自定义PreferenceKey，把灰色视图在全局坐标系下的frame传递给父视图。
• 动态计算偏移：绿色视图的offset(y: grayViewFrame.maxY)直接绑定灰色视图的底部坐标，不管设备尺寸如何，都能精准定位在灰色视图下方。
• 保留淡出逻辑：原有的滚动偏移判断和动画效果完全保留，向上滚动时绿色视图依然会平滑淡出。

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