Swift中弹窗视图后方导航栏显露问题的解决方法

要实现弹窗显示时后方导航栏不再清晰可见，但仍能透过模糊弹窗背景看到其模糊效果，你可以通过动态调整导航栏的透明度和内容可见性来实现，而非直接隐藏导航栏：

方法1：SwiftUI原生工具栏配置 #

在你的RestaurantSelectionView中添加以下修饰符，动态控制导航栏的背景透明度和内容显示：

struct RestaurantSelectionView: View {
    @State private var searchText: String = ""
    @State private var selectedLocation: String = ""
    @ObservedObject private var viewModel: RestaurantSelectionViewModel
    @State private var showNoPermissionView: Bool = false
    @State private var showingPopover = false

    var body: some View {
        ZStack {
            // 原有内容区域
            VStack(alignment: .leading, spacing: 0) {
                CustomSearchBar(debouncedText: $searchText, selectedLocation: $selectedLocation, placeholderText: "Your address, city or postal code")
                ZStack {
                    // 无权限提示视图
                    VStack(alignment: .center, spacing: 24) {
                        ZStack {
                            Image(Images.dottedCircle.name)
                            Image(Images.redPin.name)
                        }
                        Text("Turn on location services\n to find an A&W near you.")
                            .lineLimit(2)
                            .foregroundColor(Color(Colors.brown500.color))
                    }
                    .padding(.horizontal, 16)
                    .isHidden(!showNoPermissionView)
                    // 位置列表视图
                    VStack {
                        List(self.viewModel.locations, id: \.id) { location in
                            LocationListCell(city: location)
                                .listRowSeparator(.hidden)
                                .onTapGesture {
                                    searchText = ""
                                    selectedLocation = location.description
                                    viewModel.fetchCoordinates(placeId: location.placeId)
                                }
                        }
                        .isHidden(viewModel.locations.isEmpty)
                        .listStyle(.plain)
                        .background(Color.clear)
                    }
                }
            }
        }
        .overlay {
            if showingPopover {
                CustomModalPopUpView(modalType: .loginToPin, show: $showingPopover)
                    .ignoresSafeArea()
            }
        }
        // 动态配置导航栏
        .toolbar {
            // 隐藏导航栏标题（如果有）
            ToolbarItem(placement: .principal) {
                Text("")
                    .opacity(showingPopover ? 0 : 1)
            }
            // 隐藏导航栏按钮（如果有）
            ToolbarItem(placement: .navigationBarTrailing) {
                Button("") {}
                    .opacity(showingPopover ? 0 : 1)
            }
        }
        // 弹窗显示时将导航栏背景设为透明
        .toolbarBackground(Color(UIColor.systemBackground).opacity(showingPopover ? 0 : 1), for: .navigationBar)
        // 弹窗显示时禁用整个页面交互（包括导航栏）
        .disabled(showingPopover)
    }
}

方法2：增强弹窗背景模糊效果 #

如果你的CustomModalPopUpView还没有全屏模糊背景，可以在弹窗内部添加一层全屏模糊层，让导航栏区域被模糊覆盖，视觉上达到“隐藏”效果：

struct CustomModalPopUpView: View {
    let modalType: ModalType
    @Binding var show: Bool

    var body: some View {
        ZStack {
            // 全屏模糊遮罩
            Color.black.opacity(0.3)
                .background(.ultraThinMaterial)
                .ignoresSafeArea()
                .onTapGesture {
                    show = false
                }
            // 弹窗核心内容
            YourPopUpContentView()
                .padding()
                .background(Color.white)
                .cornerRadius(12)
        }
    }
}

结合两种方法，既能让导航栏的内容和背景在弹窗显示时不可见，又能通过弹窗的模糊层保留下方内容的视觉层次感，符合你想要的效果。

内容的提问来源于stack exchange，提问作者Aashima Anand