簡體   English   中英

SwiftUI NavigationView + tabView 顯示導航標題略微偏離屏幕

[英]SwiftUI NavigationView + tabView shows navigation title slightly off the screen

我在 TabView 中有三個視圖,每個視圖都有一個 naviagtionTitle。 然而,當第一個視圖出現時,navigationTitle 幾乎離開了屏幕。 只有當我單擊另一個頁面然后返回到原始頁面時,navigationTitle 才會出現在正確的位置。 可能是什么問題呢?

struct OnboardingView : View {
    
    @Binding var shouldShowOnboarding: Bool
    
    
    var body : some View {
        TabView {
            PageView(imageName: "Onboarding",
                     title: "Zone Out of This World",
                     showsDismissButton: false,
                     shouldShowOnboarding : $shouldShowOnboarding)
            PageView(imageName: "Onboarding",
                     title: "Improve Your Focus",
                     showsDismissButton: false,
                     shouldShowOnboarding : $shouldShowOnboarding)
            PageView(imageName: "Onboarding",
                     title: "Meditate to Relax",
                     showsDismissButton: true,
                     shouldShowOnboarding : $shouldShowOnboarding)
            
        }
        .tabViewStyle(PageTabViewStyle())
        .edgesIgnoringSafeArea(.all)
    }
}



struct PageView : View {
    
    let imageName: String
    let title: String
    let showsDismissButton : Bool
    @Binding var shouldShowOnboarding: Bool
    
    
    
    var body: some View {
        
        NavigationView {
            ZStack {
                Image(imageName)
                    .ignoresSafeArea()
                
                
                if showsDismissButton {
                    Button(action: {
                        shouldShowOnboarding.toggle()


                    }, label: {
                        Text("Get Started")
                            .frame(width: 352, height: 57)
                            .background(Color(#colorLiteral(red: 0.8470588326454163, green: 0.37254902720451355, blue: 0.27450981736183167, alpha: 1)))
                            .foregroundColor(Color.white)
                            .cornerRadius(30)
                            .padding(.top, 600)
                    })
                }
            }
            .navigationTitle(title)
          
        }
        .navigationViewStyle(.stack)
    }
}

我已經包括了截圖。

放置錯誤: 在此處輸入圖像描述

正確放置: 在此處輸入圖像描述

.edgesIgnoringSafeArea(.all)似乎導致了初始轉變。 我不確定為什么它會在您轉移視圖后自行糾正,但根據當前代碼,我不明白您為什么想要擁有.edgesIgnoringSafeArea所以我認為只需將其注釋掉以便擁有第二種預期風格。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM