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")
                })
        }
    }
}

如何在ZStack中正确使用NavigationView？

1 个答案: