SwiftUI嵌入其他视图时Map组件显示异常（底部模糊）

编写了一个包含Map组件的Incoming视图，单独显示正常，但嵌入自定义MainTabbedView后，地图底部出现模糊显示问题。尝试设置Map的frame为.infinity、添加.ignoresSafeArea修饰符，以及在MainTabbedView中对Incoming视图应用这些设置，均未解决。其他视图嵌入后显示正常，仅Map组件存在该问题。

解决方案 #

核心原因 #

自定义TabBar通过ZStack叠加在TabView之上，Map组件默认会延伸至底部安全区域，导致部分内容被TabBar覆盖，系统对被覆盖区域做了模糊处理，从而出现底部模糊现象。

解决步骤 #

1. 单个视图适配
   让Map忽略底部安全区域，同时添加底部内边距（数值等于自定义TabBar高度+水平padding总和，即70+20=90），确保Map内容不被TabBar覆盖：

   Map()
       .ignoresSafeArea(edges: .bottom)
       .padding(.bottom, 90)
   

2. 全局视图适配（可选）
   若不想在单个视图中设置padding，可直接给TabView添加底部内边距，让所有Tab页面统一避开自定义TabBar：

   TabView(selection: $selectedTab) {
       // 各页面视图
   }
   .padding(.bottom, 90)
   

3. 强制裁剪（备选方案）
   若仍存在模糊问题，给Map添加.clipped()修饰符，强制裁剪超出视图范围的内容：

   Map()
       .ignoresSafeArea(edges: .bottom)
       .padding(.bottom, 90)
       .clipped()
   

修改后的完整代码 #

Incoming视图 #

import SwiftUI
import MapKit

struct Incoming: View {
    var body: some View {
        NavigationStack {
            Map()
                .ignoresSafeArea(edges: .bottom)
                .padding(.bottom, 90)
        }
    }
}

MainTabbedView（全局适配版本） #

import SwiftUI

enum TabbedItems: Int, CaseIterable{
    case onroute = 0
    case archived
    case settings
    case profile

    var title: String{
        switch self {
        case .onroute: return "Incoming"
        case .archived: return "Delivered"
        case .settings: return "Settings"
        case .profile: return "Profile"
        }
    }

    var iconName: String{
        switch self {
        case .onroute: return "onroute"
        case .archived: return "parcels"
        case .settings: return "settings"
        case .profile: return "profile"
        }
    }
}

struct MainTabbedView: View {
    @State var selectedTab = 0

    var body: some View {
        ZStack(alignment: .bottom){
            TabView(selection: $selectedTab) {
                Incoming()
                    .tag(0)
                Archived()
                    .tag(1)
                SettingsView()
                    .tag(2)
                Profile()
                    .tag(3)
            }
            .padding(.bottom, 90) // 全局添加底部内边距

            ZStack{
                HStack{
                    ForEach(TabbedItems.allCases, id: \.self){ item in
                        Button{
                            selectedTab = item.rawValue
                        } label: {
                            CustomTabItem(imageName: item.iconName, title: item.title, isActive: (selectedTab == item.rawValue))
                        }
                    }
                }
                .padding(6)
            }
            .frame(height: 70)
            .background(Color("tabBarBG"))
            .cornerRadius(35)
            .padding(.horizontal, 20)
        }
        .ignoresSafeArea(.keyboard, edges: .bottom)
    }
}

extension MainTabbedView{
    func CustomTabItem(imageName: String, title: String, isActive: Bool) -> some View{
        HStack(spacing: 10){
            Spacer()

            if title == "Profile" {
                Image(isActive ? "\(imageName)_active" : "\(imageName)")
                    .resizable()
                    .renderingMode(.original)
                    .foregroundColor(isActive ? Color("iconActive") : Color("iconInactive"))
                    .aspectRatio(contentMode: .fit)
                    .frame(height:38)
            } else {
                Image(isActive ? "\(imageName)_active" : "\(imageName)")
                    .resizable()
                    .renderingMode(.template)
                    .foregroundColor(isActive ? Color("iconActive") : Color("iconInactive"))
                    .aspectRatio(contentMode: .fit)
                    .frame(height:20)
            }

            if isActive{
                Text(title)
                    .font(.system(size: 13))
                    .fontWeight(.bold)
                    .foregroundColor(isActive ? Color("textActive") : .gray)
            }

            Spacer()
        }
        .frame(width: isActive ? .infinity : 60, height: 55)
        .background(isActive ? Color("tabBarSelected") : Color("tabBarBG"))
        .cornerRadius(30)
    }
}

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