如何根据另一个视图将视图放在 ZStack 中的特定位置？答案

【问题标题】：How to put view in specific location in ZStack based on another view?如何根据另一个视图将视图放在 ZStack 中的特定位置？
【发布时间】：2022-10-13 03:17:36
【问题描述】：

我在 ScrollView 中有一个视图，并基于偏移值。还有另一种视图需要动画化。

此视图位于灰色框下方，但它的基础是硬编码值。如何在没有硬编码值的情况下将绿色框固定在灰色区域下方？使用硬编码值将与其他设备不一致。

struct ContentView: View {
    @State private var contentOffset = CGFloat(0)
    
    var body: some View {
        NavigationView {
            ZStack {
                VStack(spacing: 0) {
                    TrackableScrollView { offset in
                        contentOffset = offset.y
                    } content: {
                        VStack(spacing: 0) {
                            Text("Hello World")
                                .padding()
                                .frame(maxWidth: .infinity)
                                .background(Color.gray)
                        }
                    }
                }
                
                Text("HELLO")
                    .frame(maxWidth: .infinity)
                    .background(Color.green)
                    .opacity(contentOffset < -16 ? 0 : 1)
                    .animation(.easeIn(duration: 0.2), value: contentOffset)
                    .offset(y: -280)
            }
            .ignoresSafeArea()
            .frame(maxHeight: .infinity, alignment: .top)
            .background(AccountBackground())
            .navigationBarHidden(true)
        }
    }
}

它看起来像什么：

当您向上滚动时，绿色框将消失。

【问题讨论】：

标签： ios iphone swiftui

【解决方案1】：

为此，您需要覆盖到 ZStack。如果您有导航栏，则需要为其提供的偏移量为 0，因为它将自动放置在其下方。 TrackableScrollView 是一个偏好键，通常在网上找到，用于跟踪滚动视图的滚动位置。

struct ContentView: View {
    @State private var contentOffset = CGFloat(0)
    @State private var offsetPositionValue: CGFloat = 0
    @State private var heightOfFrame: CGFloat = 0
    
    @State private var isShyHeaderVisible = false
    
    var body: some View {
        NavigationView {
            ZStack {
                TrackableScrollView { offset in
                    withAnimation {
                        contentOffset = offset.y
                    }
                } content: {
                    Text("Hello World")
                }
                .overlay(
                    ZStack {
                        HStack {
                            Text("TD FIRST CLASS TRAVEL VISA")
                                .foregroundColor(.white)
                                .lineLimit(1)
                            
                            Spacer()
                            
                            Text("20,000 pts")
                                .foregroundColor(.white)
                                .padding(.leading, 50)
                        }
                        .padding(.horizontal)
                        .padding(.vertical, 8)
                        .frame(width: UIScreen.main.bounds.width)
                        .background(Color.green)
                        .offset(y: contentOffset < -16 ? 0 : heightOfFrame - 5)
                        .opacity(contentOffset < -16 ? 1 : 0)
                        .transition(.move(edge: .top))
                    }
                    .frame(maxHeight: .infinity, alignment: .top)
                )
            }
            .navigationTitle("Hello")
            .navigationViewStyle(StackNavigationViewStyle())
            .navigationBarTitleDisplayMode(.inline)
            .frame(maxHeight: .infinity, alignment: .top)
            .background(AccountBackground())
        }
    }
}

【讨论】：