SwifUI - 嵌入其他视图时地图无法正确显示

Question

我的看法是这样的：

import SwiftUI
import MapKit

   struct Incoming: View {

   var body: some View {
       NavigationStack {
          Map()        
       }
   }
}

还有一个像这样更复杂的：

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

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

一切看起来都不错，但有一件事：地图。 我不明白为什么它在视图中看起来不错，但嵌入到我的 MainTabbedView 中时底部看起来很模糊。

我尝试为 maxWidth 和 maxHeight 制作地图“.infinity”的框架：没有成功； 我尝试将“.ignoresafearea”放在地图下：没有成功。 我尝试在 MainTabbedView 的“Incoming()”选项卡上执行这两件事：没有成功。

有什么我不知道的吗？

还尝试创建一个只有彩色背景的简单视图，并且它在我的 MainTabbedView 中正确显示。 问题看地图。 有什么建议么？ 预先感谢。

Answer 1

尝试这种方法使地图下降到底部，对我有用：

TabView(selection: $selectedTab) {
    Incoming().tag(0)
    Archived().tag(1)
    SettingsView().tag(2)
    Profile().tag(3)
}
.ignoresSafeArea()  // <--- here
.tabViewStyle(.page(indexDisplayMode: .never)) // <--- here