SwiftUI 15中Map视图出现异常底部内边距问题求助

问题描述 #

在iOS 15的SwiftUI环境中，遇到两个异常问题：

• 点击MapView时，视图底部出现类似TabBar的异常内边距（如图所示）；
• 点击自定义TabBar区域时，原本已隐藏的Apple默认TabBar偶尔会短暂显示。
  注：相同逻辑的代码在另一应用中运行正常

问题截图 #

相关代码 #

MainTabbedView 代码 #

struct MainTabbedView: View {
    
    @State var selectedTab = 0
    
    var body: some View {
        TabView(selection: $selectedTab) {
            CreatorView()
                .tag(0)
                .toolbar(.hidden, for: .tabBar)
            
            MapView()
                .tag(1)
                .toolbar(.hidden, for: .tabBar)
            
            RemindersView()
                .tag(2)
                .toolbar(.hidden, for: .tabBar)
            
            SettingsView()
                .tag(3)
                .toolbar(.hidden, for: .tabBar)
        }
        .overlay(alignment: .bottom) {
            HStack {
                ForEach((TabbedItems.allCases), id: \.self) { item in
                    Button {
                        selectedTab = item.rawValue
                    } label: {
                        CustomTabItem(image: item.icon, imageName: item.iconName, title: item.title, isActive: (selectedTab == item.rawValue))
                    }
                }
            }
            .padding(6)
            .frame(height: 60)
            .background(Color.alleRausPrimary.opacity(0.3))
            .background(.ultraThinMaterial)
            .cornerRadius(35)
            .padding(.horizontal, 26)
        }
    }
    
    @ViewBuilder
    func CustomTabItem(image: SFSymbol, imageName: String, title: String, isActive: Bool) -> some View {
        
        let iconWidth: [String: CGFloat] = [
            "plus.circle.fill": 24,
            "mappin.and.ellipse": 19,
            "bell.badge": 19,
            "gearshape": 20
        ]
        
        let iconHeight: [String: CGFloat] = [
            "plus.circle.fill": 24,
            "mappin.and.ellipse": 23,
            "bell.badge": 22,
            "gearshape": 20
        ]
        
        HStack(spacing: 10) {
            Spacer()
            
            Image(systemSymbol: image)
                .resizable()
                .renderingMode(.template)
                .frame(width: iconWidth[imageName], height: iconHeight[imageName])
                .foregroundColor(isActive ? .white.opacity(0.9) : Color.alleRausPrimary)
            
            // Display title only if the tab is currently active
            if isActive {
                Text(title)
                    .font(.system(size: 12))
                    .minimumScaleFactor(0.7)
                    .lineLimit(1)
                    .foregroundColor(.white)
            }
            Spacer()
        }
        .frame(minWidth: 60, maxWidth: isActive ? .infinity : 60)
        .frame(height: 50)
        .background(isActive ? Color.alleRausPrimary.opacity(0.9) : .clear)
        .cornerRadius(30)
    }
}

import SFSafeSymbols

/// An enumeration representing the different tabs in the app.
enum TabbedItems: Int, CaseIterable {
    
    /// Represents the "Creator" tab.
    case creator = 0
    /// Represents the "Map" tab.
    case map
    /// Represents the "Reminders" tab.
    case reminders
    /// Represents the '"Settings"' tab.
    case settings
    
    /// The title associated with each tab, localized for internationalization.
    var title: String {
        switch self {
        case .creator:
            return "Creator"
        case .map:
            return "Map"
        case .reminders:
            return "Reminders"
        case .settings:
            return "Settings"
        }
    }
    
    var iconName: String {
        switch self {
        case .creator:
            return "plus.circle.fill"
        case .map:
            return "mappin.and.ellipse"
        case .reminders:
            return "bell.badge"
        case .settings:
            return "gearshape"
        }
    }
    
    /// The system name of the SF Symbol associated with each tab.
    var icon: SFSymbol {
        switch self {
        case .creator:
            return .plusCircleFill
        case .map:
            return .mappinAndEllipse
        case .reminders:
            return .bellBadge
        case .settings:
            return .gearshape
        }
    }
}

MapView 代码 #

@State var position: MapCameraPosition = .userLocation(fallback: .automatic)
    
var body: some View {
    Map(position: $position) {
        UserAnnotation()
    }
    .mapControls {
        MapUserLocationButton()
        MapCompass()
        MapScaleView()
        MapPitchToggle()
    }
}

解决方案 #

1. 修复MapView底部异常内边距 #

给MapView添加忽略底部安全区域的设置，让视图填充到屏幕底部，避免默认留出TabBar的空间：

Map(position: $position) {
    UserAnnotation()
}
.mapControls {
    MapUserLocationButton()
    MapCompass()
    MapScaleView()
    MapPitchToggle()
}
.ignoresSafeArea(.container, edges: .bottom) // 添加这一行

2. 防止默认TabBar短暂显示 #

• 移除每个子View中的.toolbar(.hidden, for: .tabBar)，改为直接给TabView全局设置隐藏TabBar，确保状态统一：

TabView(selection: $selectedTab) {
    CreatorView().tag(0)
    MapView().tag(1)
    RemindersView().tag(2)
    SettingsView().tag(3)
}
.toolbar(.hidden, for: .tabBar) // 全局设置隐藏默认TabBar
.overlay(alignment: .bottom) {
    // 自定义TabBar代码
}

• 额外添加tabViewStyle禁用默认TabBar的交互逻辑，彻底避免触发默认行为：

TabView(selection: $selectedTab) {
    // ...子视图
}
.toolbar(.hidden, for: .tabBar)
.tabViewStyle(.page(indexDisplayMode: .never)) // 添加这一行
.overlay(alignment: .bottom) {
    // ...自定义TabBar
}

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