SwiftUI ScrollView 在带渐变的矩形下停止在 ZStack 中工作

Question

我遇到这个问题，当我将一个矩形放在带有渐变填充的 ScrollView 上时，scrollview 停止对触摸使用react。

目的是淡出 ScrollView 底部的项目，这样它们就不会与父 View 中的自定义底部导航 View 发生冲突。

我尝试使用 .frame 修饰符使淡入淡出高度仅在底部四分之一左右，以希望停止阻塞 ScrollView ，但它没有用。

有人知道解决这个问题的方法吗？

import Foundation
import SwiftUI
import CoreData


struct TestView: View {

    var managedObjectContext:NSManagedObjectContext
    var spendings:FetchedResults<Spending>
    var expenses:FetchedResults<Expense>
    var settings:FetchedResults<Settings>
    @State private var showAddSpending:Bool = false

       @Binding var selection:Int

    var body: some View{
        VStack{
            HStack{
                Text("Spending").padding()

            }.padding(.horizontal)

            ZStack{

                //List items
                ScrollView{
                    ForEach(self.spendings) { spend in
                        //if(spend.currentMonth == true){
                        HStack{
                            // IS EXPANDED
                            if spend.isExpanded {

                                VStack{

                                    HStack{
                                        //NAME
                                        if(spend.currentMonth){
                                            Text("\(spend.name)")
                                                .lineLimit(1)
                                                .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
                                                .foregroundColor(Color .orange)
                                                .onLongPressGesture {
                                                    spend.currentMonth.toggle()
                                            }
                                        } else {

                                            Text("\(spend.name)")
                                                .lineLimit(1)
                                                .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
                                                .onLongPressGesture {
                                                    spend.currentMonth.toggle()
                                            }
                                        }

                                        //AMOUNT
                                        Text("\(spend.amount)")


                                            .frame(minWidth: 0, maxWidth: 70, alignment: .trailing)

                                        //DELETE
                                        DeleteStyle(text: "multiply", symbol: true)
                                            .onTapGesture {
                                                self.managedObjectContext.delete(spend)
                                                do {
                                                    try self.managedObjectContext.save()
                                                }catch{
                                                    print(error)
                                                }
                                        }
                                    }
                                    VStack{


                                        //CATEGORY
                                        Text("Category: \(spend.category)")


                                            .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)

                                    }
                                }

                                .onTapGesture {
                                    spend.isExpanded.toggle()
                                }





                            } else {

                                // ISNT EXPANDED
                                HStack{
                                    //NAME
                                    if(spend.currentMonth){
                                        Text("\(spend.name)")
                                            .lineLimit(1)
                                            .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
                                            .foregroundColor(Color .orange)
                                            .onLongPressGesture {
                                                spend.currentMonth.toggle()
                                        }
                                    } else {

                                        Text("\(spend.name)")
                                            .lineLimit(1)
                                            .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
                                            .onLongPressGesture {
                                                spend.currentMonth.toggle()
                                        }

                                    }

                                    Spacer()

                                    //AMOUNT
                                    Text("\(spend.amount)")


                                        .frame(minWidth: 0, maxWidth: 70, alignment: .trailing)


                                    //DELETE
                                    DeleteStyle(text: "multiply", symbol: true).onTapGesture {
                                        self.managedObjectContext.delete(spend)
                                        do {
                                            try self.managedObjectContext.save()
                                        }catch{
                                            print(error)
                                        }
                                    }
                                }

                                .onTapGesture {
                                    spend.isExpanded.toggle()
                                }


                            }
                        }
                    }
                    .foregroundColor(Color (UIColor .secondaryLabel))
                }.padding(.horizontal)

                //Button to add new item
                VStack{
                    Spacer()
                    HStack{
                        Spacer()
                        /*
                         Text("Total: £\(calculateTotalSpendingForCurrentMonth())")
                         .foregroundColor(.white)
                         .padding(15)
                         .background(Color .orange)
                         .cornerRadius(40)
                         */
                        if spendings.isEmpty {
                            HStack{
                                Text("Record a spend")
                                Image(systemName: "arrow.right")
                            }
                            .foregroundColor(Color (UIColor .secondaryLabel))
                            .padding(.bottom, 90)
                            .padding(.horizontal, 40)
                        }
                        VStack{
                            Button(action: {
                                self.showAddSpending = true
                            }) {
                                NavStyle(text: "plus", symbol: true)

                            }.sheet(isPresented: $showAddSpending) {
                                AddSpendingView(managedObjectContext: self.managedObjectContext, spendings: self.spendings, expenses: self.expenses)
                            }

                        }

                    }

                }

                //Black Fade at bottom
                VStack{
                    Spacer()
                    Rectangle()
                        .fill (
                            LinearGradient(gradient: Gradient(colors: [.clear, .black]),
                                           startPoint: .center, endPoint: .bottom)
                    )
                }
            }
        }.background(Color (UIColor.secondarySystemBackground))
    }
}

Answer 1

将 UIViewRepresentable 与 .disabled(true) 结合使用允许与带覆盖的 ScrollView 进行交互。

struct OverlayWrapper<Content: View>: UIViewRepresentable {
    
    var content: Content
    
    init(@ViewBuilder content: @escaping () -> Content) {
        self.content = content()
    }
    
    func makeUIView(context: Context) -> UIView {
        
        let uiView = UIView()
        
        // Get reference to the SwiftUI view wrapped inside PagerScrollView
        let child = UIHostingController(rootView: content)
        
        let screenWidth = UIScreen.main.bounds.width
        let screenHeight = UIScreen.main.bounds.height
        
        // Get size of the child
        let newSize = child.view.sizeThatFits(CGSize(width: screenWidth, height: screenHeight))
        
        let frame = CGRect(x: 0, y: 0, width: newSize.width, height: newSize.height)
        
        child.view.frame = frame
        child.view.backgroundColor = UIColor.clear

        uiView.frame = frame
        uiView.backgroundColor = UIColor.clear
        
        uiView.addSubview(child.view)
        
        return uiView
    }
    
    
    func updateUIView(_ uiView: UIView, context: Context) {
        // If the UI is not updated, updateUIView will not be called
    }
}

使用 OverlayWrapper 的示例:

struct ExampleView: View {
    
    var body: some View {
        ZStack {
            ScrollView(.vertical) {
                VStack {
                    ForEach(0..<100) { i in
                        Text("\(i)")
                    }
                }
            }
            OverlayWrapper() {
                // This can be replaced with any SwiftUI view.
                Rectangle()
                    .frame(width: 200, height: 200)
                    .foregroundColor(Color.blue.opacity(0.5))
            }
            .frame(width: 200, height: 200, alignment: .center)
            .disabled(true)
        }
    }
}