横屏模式下Tab View Header背景色缺失问题求助

• App包含4个标签页，每个标签页头部带有名称和彩色背景，支持竖屏（portrait）、横屏（landscape）两种显示模式
• 第一个交易录入标签页存在特殊性：头部右侧带有Save按钮，描述和金额输入框的键盘配有Done按钮
• 竖屏模式下，所有标签页头部的标题、背景色均能正常显示；横屏模式下，交易录入标签页仅能显示标题和Save按钮，无背景色，其余三个标签页显示正常
• 已移除横竖屏切换逻辑排查漏洞，问题依旧；制作简化Demo后，横屏状态下交易录入标签页的背景色缺失问题仍未解决

注：Demo代码未包含所有标签页视图，可复制TotalsTabView并修改名称补全；交易录入视图的分类、描述、金额等组件均为简单文本视图，未全部列出。

交易录入视图代码 #

struct EntryTabView: View {

    enum Field: Hashable {
        case ckDsc
        case ckAmt
    }
    @FocusState private var myFocus: Field?

    var body: some View {

        GeometryReader { g in
            VStack {

                ZStack (alignment: .top) {

                    if g.size.height > g.size.width {  // 判断竖屏
                        Color(.green)
                            .frame(height: g.safeAreaInsets.top * 1.9, alignment: .top)
                            .ignoresSafeArea()

                    } else {  // 横屏
                        Color(.green)
                            .frame(height: g.safeAreaInsets.top * 0.14, alignment: .top)
                            .ignoresSafeArea()
                    }
                    HStack {
                        VStack (alignment: .leading) {
                            Text("Expense Entry")
                                .font(.title)
                                .bold()
                                .kerning(1.5)
                                .padding(.leading, 10)
                                .frame(maxWidth: .infinity, alignment: .leading)
                        }
                        Spacer()

                        Button {
                            myFocus = nil
                            //self.saveButton()   // 按钮点击逻辑

                        } label: {
                            Text("Save")
                                .bold()
                                .padding(.trailing, 10)
                                .tint(.blue)
                        }
                       // .disabled(moneyS.isEmpty)
                    }
                }

                Form {
                    GetDate()
                        .padding(.bottom, 10)
                    GetPaymentType()
                        .padding(.bottom, 10)
                    GetCategory()
                        .padding(.bottom, 10)
                    GetDescription()
                        .padding(.bottom, 10)
                    GetMoney()
                }
            }
            .toolbar {
                ToolbarItemGroup(placement: .keyboard) {
                    Spacer()
                    Button("Done")
                    {
                        myFocus = nil
                    }
                }
            }
        }
    }
}

主视图代码 #

struct ContentView: View {

    var body: some View {

        NavigationStack {
            VStack {
                TabView () {

                    EntryTabView()
                        .tabItem {
                            Label("Expense Entry", systemImage: "entry.lever.keypad")
                        }
                        .tag(0)

                    TotalsTabView()
                        .tabItem {
                            Label("Totals", systemImage: "t.circle.fill")

                        }
                        .tag(1)

                    HistoryTabView()
                        .tabItem {
                            Label("History", systemImage: "clock.arrow.circlepath")
                        }
                        .tag(2)

                    MenuTabView()
                        .tabItem {
                            Label("More", systemImage: "ellipsis")
                        }
                        .tag(3)
                }
            }
            .tint(.blue)
            .symbolRenderingMode(.hierarchical)
            .symbolVariant(.fill)
        }
    }
}

通用标签页头部组件代码（适配横竖屏及不同尺寸iPhone） #

struct DrawTabTitleBox: View {

    var g: GeometryProxy
    var title: String

    var body: some View {

        ZStack (alignment: .top) {
            if g.size.height > g.size.width {  // 判断竖屏

                if g.size.width < 380 {  // iPhone mini适配
                    Color(.green)
                        .frame(height: g.safeAreaInsets.top * 1.9, alignment: .top)
                        .ignoresSafeArea()

                    VStack (alignment: .leading) {
                        Text(title)
                            .font(.title)
                            .bold()
                            .kerning(1.5)
                            .padding(.leading, 10)
                            .frame(maxWidth: .infinity, alignment: .leading)
                    }

                } else {       // iPhone Pro Max适配
                    Color(.green)
                        .frame(height: g.safeAreaInsets.top * 1.65, alignment: .top)
                        .ignoresSafeArea()

                    VStack (alignment: .leading) {
                        Text(title)
                            .font(.title)
                            .bold()
                            .kerning(1.5)
                            .padding(.leading, 10)
                            .frame(maxWidth: .infinity, alignment: .leading)
                    }
                }
            } else { // 横屏

                if g.size.width < 720 {
                    Color(.green)
                        .ignoresSafeArea()
                        .frame(height: g.size.height * 0.14)

                    VStack (alignment: .leading) {
                        Text(title)
                            .font(.title)
                            .bold()
                            .kerning(1.5)
                            .padding(.top, 11)
                            .padding(.leading, 10)
                            .frame(maxWidth: .infinity, alignment: .leading)
                    }
                } else {

                    Color(.green)
                        .ignoresSafeArea()
                        .frame(height: g.size.height * 0.126)

                    VStack (alignment: .leading) {
                        Text(title)
                            .font(.title)
                            .bold()
                            .kerning(1.5)
                            .padding(.top, 11)
                            .padding(.leading, 10)
                            .frame(maxWidth: .infinity, alignment: .leading)

                    }
                }
            }
        }
    }
}

交易录入占位组件代码 #

struct GetDate: View {

    var body: some View {

        Text("Get Date")
    }
}

其他标签页头部创建示例代码 #

struct TotalsTabView: View {
    var body: some View {

        GeometryReader { g in
            VStack (alignment: .leading, spacing: 0) {

                DrawTabTitleBox(g: g, title: "Totals")

                Text("Totals View")
                    .frame(maxWidth: .infinity, alignment: .center)
            }
        }
    }
}

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