如何使背景中的按钮可点击，滚动视图位于顶部？

Question

我有一个ScrollView可以在标题上滑动的按钮，但我需要标题中的一个可点击的按钮。

它看起来是这样的：

我需要可点击的“开始”按钮，但因为它ScrollView位于顶部，所以不可点击。我尝试使用zIndex但滚动不再出现在标题顶部。

这是示例代码：

struct ContentView: View {
    @State private var isPresented = false
    @State private var headerHeight: CGFloat = 0

    var body: some View {
        ZStack(alignment: .top) {
            VStack {
                Button("Start") {
                    isPresented = true
                }
                .padding()
                .frame(maxWidth: .infinity)
                .foregroundColor(.white)
                .background(Color.blue)
                .cornerRadius(16)
            }
            .padding(80)
            .background(Color(.label).ignoresSafeArea())
            .assign(heightTo: $headerHeight)
            ScrollView(showsIndicators: false) {
                Spacer()
                    .frame(height: headerHeight)
                VStack {
                    ForEach((0...50), id: \.self) {
                        Text("Some text \($0)")
                    }
                }
                .padding()
                .frame(maxWidth: .infinity)
                .background(Color(.white))
            }
        }
        .navigationBarHidden(true)
        .alert(isPresented: $isPresented) {
            Alert(title: Text("Button tapped"))
        }
    }
}

extension View {
    /// Binds the height of the view to a property.
    func assign(heightTo height: Binding<CGFloat>) -> some View {
        background(
            GeometryReader { geometry in
                Color.clear.onAppear {
                    height.wrappedValue = geometry.size.height
                }
            }
        )
    }
}

如何在使滚动视图滑过标题的同时实现这一点？

Answer 1

版本2.0.0

我决定更新我的答案，因为如果我将它们放在同一个答案中可能会造成混淆，所以我将其放在这里，以使代码和答案清晰易读。关于新的更新，基本上是相同的方式，但是加强版！

import SwiftUI

struct ContentView: View {
    
    @State private var isPresented: Bool = Bool()
    @State private var offsetY: CGFloat = CGFloat()
    @State private var headerHeight: CGFloat = CGFloat()
    
    var body: some View {
        
        GeometryReader { screenGeometry in
            
            ZStack {
                
                Color.yellow.ignoresSafeArea()
                
                ScrollView(showsIndicators: false) {
                    
                    VStack(spacing: 0.0) {
                        
                        Color.clear                         // Test if we are in Center! >> change Color.clear to Color.blue and uncomment down code for Capsule() to see it!
                            .frame(height: headerHeight)
                            //.overlay(Capsule().frame(height: 2.0))
                            .overlay( HeaderView(isPresented: $isPresented)
                                        .background( GeometryReader { proxy in Color.clear.onAppear { headerHeight = proxy.size.height } } )
                                        .offset(y: headerHeight + screenGeometry.safeAreaInsets.top - offsetY))
                        
                        ZStack {
                            
                            Color.white.cornerRadius(20.0)
                            
                            VStack { ForEach((0...30), id: \.self) { item in Text("item " + item.description); Divider().padding(.horizontal) } }.padding(.top)
                            
                        }
                        .padding(.horizontal)
                        .overlay( GeometryReader { proxy in Color.clear.onChange(of: proxy.frame(in: .global).minY) { newValue in offsetY = newValue } } )
                        
                    }
                    
                }
                
            }
            .position(x: screenGeometry.size.width/2, y: screenGeometry.size.height/2)
            .alert(isPresented: $isPresented) { Alert(title: Text("Button tapped")) }
            .statusBar(hidden: true)
            
        }
        .shadow(radius: 10.0)
        
    }
    
}

struct HeaderView: View {
    
    @Binding var isPresented: Bool
    
    var body: some View {
        
        ZStack {
            
            Color.clear
            
            VStack(spacing: 20.0) {
                
                button(color: Color(UIColor.systemTeal))
                
                Text("Some text 1").bold()
                
                Text("Some text 2").bold()
                
                button(color: Color(UIColor.green))
                
                Text("Some text 3").bold()
                
                Text("Some text 4").bold()
                
                button(color: Color.purple)
                
            }
            
        }
        .padding()
        
    }
    
    func button(color: Color) -> some View {
        
        return Button(action: { isPresented.toggle() }, label: {
            
            Text("Start")
                .bold()
                .padding()
                .shadow(radius: 10.0)
                .frame(maxWidth: .infinity)
                .background(color)
                .foregroundColor(.white)
                .cornerRadius(16)
            
        })
        
    }
    
}