Как правильно использовать NavigationView в ZStack?

Question

Я пытаюсь добавить некоторые параметры фильтра, чтобы они находились в верхней части моего вида над NavigationView. Я написал следующий код, который в основном делает то, что я хочу, однако он отключил возможность щелкать строки, чтобы перейти к подробному представлению. Я предполагаю, что это потому, что мои кнопки фильтра находятся сверху ZStack, но я не уверен, как еще заставить это работать.

Вот код, который я написал:

import SwiftUI

struct BonusList: View {
    var bonuses = sampleBonusData
    @State var showSettings = false
    @State var showBonuses = false
    @State var bonusEarned = true
    @State var showStatePicker = false
    @State var showCategoryPicker = false

    var body: some View {
        ZStack {
            NavigationView {
                List(bonuses) { item in
                    NavigationLink(destination: BonusDetail(bonusName: item.bonusName, bonusCode: item.bonusCode, city: item.city, sampleImage: item.sampleImage)) {
                        HStack(spacing: 12.0) {
                            Image(item.sampleImage)
                                .resizable()
                                .aspectRatio(contentMode: .fill)
                                .frame(width: 60, height: 60)
                                .background(Color.white)
                                .cornerRadius(15)

                            VStack(alignment: .leading) {
                                HStack {
                                    Text(item.bonusName)
                                        .font(.headline)
                                    Spacer()
                                    Image(systemName: "checkmark.shield")
                                        .opacity(self.bonusEarned ? 100 : 0)
                                }
                                Text("\(item.city), \(item.state)")
                                    .font(.subheadline)
                                    .frame(height: 25.0)
                                HStack {
                                    Text(item.bonusCategory)
                                        .font(.caption)
                                        .fontWeight(.bold)
                                        .foregroundColor(.gray)
                                        .padding(.top, 4)
                                    Spacer()
                                    Text(item.bonusCode)
                                        .font(.caption)
                                        .fontWeight(.bold)
                                        .foregroundColor(.gray)
                                        .padding(.top, 4)
                                }
                            }
                        }
                    }
                }
                .navigationBarTitle(Text("Bonuses"))
                //            .navigationBarHidden(true)
            }
            .saturation(self.bonusEarned ? 0 : 1)
            HStack {
                FilterByCategory(showCategoryPicker: $showCategoryPicker)
                Spacer()
                FilterByState(showStatePicker: $showStatePicker)
            }
            StatePicker(showStatePicker: $showStatePicker)
            CategoryPicker(showCategoryPicker: $showCategoryPicker)
        }
    }
}

Вот как это выглядит при запуске:

Answer 1

Если я правильно понимаю, у вас есть представление или два, которые находятся выше в ZStack, которые находятся вне холста и входят, когда эти кнопки нажимаются?

Вы могли бы рассмотреть возможность использования модальных и установка вида, который вы хотите показать для каждой кнопки в качестве вида для модального окна. Это будет держать ваши взгляды за пределами экрана и по-прежнему разрешать взаимодействие с вашим списком. Вот что я сделал ...

На главном экране

import SwiftUI

struct MainView: View {

    @State private var isPresented = false

    var body: some View {
        NavigationView {
            VStack {
               //...
            }
    //Modal
            .sheet(isPresented: $isPresented, content: {
                AddItem(showModal: self.$isPresented)
            })
        }
    }
}

Модальное представление

import SwiftUI

struct AddItem: View {

    @Binding var showModal: Bool

    var body: some View {

        VStack {
                Button(action: {
                    self.showModal = false
                }, label: {
                    Text("Cancel")
                })
        }
    }
}