Swift中移除屏幕底部模糊边框的问题求助

尝试移除屏幕底部的模糊边框，已使用.edgesIgnoringSafeArea(.all)但无效果，推测和视图堆叠有关，刚接触Xcode不知如何解决。

代码（ContentView.swift） #

struct ContentView: View {
    @StateObject var cartManager = CartManager()
    
    var columns = [GridItem(.adaptive(minimum: 160), spacing: 20)]
    
    var body: some View {
        NavigationView {
            VStack {
                ScrollView {
                    LazyVGrid(columns: columns, spacing: 20) {
                        ForEach(productList, id: \.id) { product in
                            ProductCard(product: product)
                                .environmentObject(cartManager)
                        }
                    }
                    .padding()
                }
                //.background(Color.white.ignoresSafeArea(.all))
                //Change the background color
                .background(Color(UIColor(hexString: "#f0f0f0")))
                .navigationTitle(Text("Brunnings"))
                .toolbar {
                    ToolbarItem(placement: .bottomBar) {
                        HStack {
                            Navbar(image: Image("Home"), destination: EmptyView())
                            Spacer()
                            Navbar(image: Image("Location"), destination: StoreLocationView())
                            Spacer()
                            Navbar(image: Image("Profile"), destination: ProfileView())
                        }
                        .padding(8)
                        .background(Color(UIColor(hexString: "#F8F8F8")))
                        .clipShape(Capsule())
                        .padding(.horizontal)
                        .shadow(color: Color.black.opacity(0.15), radius: 8, x: 2, y: 6)
                        .frame(maxHeight: .infinity, alignment: .bottom)
                    }
                    ToolbarItem(placement: .navigationBarTrailing) {
                        NavigationLink(destination: CartView().environmentObject(cartManager)) {
                            CartButton(numberOfProducts: cartManager.products.count)
                        }
                    }
                    
            }
            }
            
        }
        
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

效果对比 #

• 当前效果：
• 期望效果：

底部的模糊边框是NavigationView底部安全区的默认背景导致的，按以下步骤调整代码：

1. 把背景色移到外层VStack并延伸到底部安全区
   原来的背景只加在ScrollView上，无法覆盖底部安全区。将背景色应用到包裹整个内容的VStack，并添加.edgesIgnoringSafeArea(.bottom)让背景铺满底部：

NavigationView {
    VStack {
        // 原有ScrollView内容保持不变
        ScrollView { ... }
    }
    .background(Color(UIColor(hexString: "#f0f0f0")))
    .edgesIgnoringSafeArea(.bottom)
    .navigationTitle(Text("Brunnings"))
    .toolbar { ... }
}

2. 移除底部ToolbarItem的冗余frame设置
   .bottomBar的placement已经会把导航栏固定在底部，不需要额外的.frame(maxHeight: .infinity, alignment: .bottom)，删掉这个设置：

ToolbarItem(placement: .bottomBar) {
    HStack {
        Navbar(image: Image("Home"), destination: EmptyView())
        Spacer()
        Navbar(image: Image("Location"), destination: StoreLocationView())
        Spacer()
        Navbar(image: Image("Profile"), destination: ProfileView())
    }
    .padding(8)
    .background(Color(UIColor(hexString: "#F8F8F8")))
    .clipShape(Capsule())
    .padding(.horizontal)
    .shadow(color: Color.black.opacity(0.15), radius: 8, x: 2, y: 6)
    // 删除此行：.frame(maxHeight: .infinity, alignment: .bottom)
}

3. 强制隐藏底部导航栏的默认背景
   如果前两步后仍有模糊，给NavigationView添加.toolbarBackground(.hidden, for: .bottomBar)，彻底隐藏系统默认的底部栏背景：

NavigationView { ... }
.toolbarBackground(.hidden, for: .bottomBar)
.navigationViewStyle(StackNavigationViewStyle())

调整后的完整代码：

struct ContentView: View {
    @StateObject var cartManager = CartManager()
    
    var columns = [GridItem(.adaptive(minimum: 160), spacing: 20)]
    
    var body: some View {
        NavigationView {
            VStack {
                ScrollView {
                    LazyVGrid(columns: columns, spacing: 20) {
                        ForEach(productList, id: \.id) { product in
                            ProductCard(product: product)
                                .environmentObject(cartManager)
                        }
                    }
                    .padding()
                }
            }
            .background(Color(UIColor(hexString: "#f0f0f0")))
            .edgesIgnoringSafeArea(.bottom)
            .navigationTitle(Text("Brunnings"))
            .toolbar {
                ToolbarItem(placement: .bottomBar) {
                    HStack {
                        Navbar(image: Image("Home"), destination: EmptyView())
                        Spacer()
                        Navbar(image: Image("Location"), destination: StoreLocationView())
                        Spacer()
                        Navbar(image: Image("Profile"), destination: ProfileView())
                    }
                    .padding(8)
                    .background(Color(UIColor(hexString: "#F8F8F8")))
                    .clipShape(Capsule())
                    .padding(.horizontal)
                    .shadow(color: Color.black.opacity(0.15), radius: 8, x: 2, y: 6)
                }
                ToolbarItem(placement: .navigationBarTrailing) {
                    NavigationLink(destination: CartView().environmentObject(cartManager)) {
                        CartButton(numberOfProducts: cartManager.products.count)
                    }
                }
            }
        }
        .toolbarBackground(.hidden, for: .bottomBar)
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

内容的提问来源于stack exchange，提问作者Harry Issac