@menachav (mena ..)posted at 2022-04-16

swift Navigationの遷移が深くなるとTextが下にずれる

Q&A

Closed

Swift SwiftUI

解決したいこと

Navigationの遷移が深くなるとTextがしたにずれてしまう

現在swiftを学習しているんですが、画面遷移時にTextが下にずれてしまいます。
なぜ下にずれるのかがわかりません.

発生している問題・エラー

該当するソースコード

import SwiftUI

struct ContentView: View {
    var body :some View{
        NavigationView{
            VStack{
                Text("診断アプリ")
                    .padding(.bottom, 11.0)
                NavigationLink(destination:SecondQuestionView()){
                    Text("スタート！！！！")
                }
            }
            .navigationBarBackButtonHidden(true)
        }
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

import SwiftUI

struct SecondQuestionView: View {
    var body: some View {
            NavigationView{
                VStack{
                        Text("好きな分野は宇宙ですか?")
                        NavigationLink(destination:NakagawaKen()){
                            Text("Yes")
                        }
                    
                        NavigationLink(destination:ThirdQuestionView()){
                            Text("No")
                        }
                    }
                
                }
            .navigationBarBackButtonHidden(true)
        }
}

struct SecondView_Previews: PreviewProvider {
    static var previews: some View {
        SecondQuestionView()
    }
}

import SwiftUI

struct ThirdQuestionView: View {
    var body: some View {
        NavigationView{
            VStack{
                Text("はっきりもの言ってくれる教授はありがたいですか？")
                NavigationLink(destination:NakagawaKen()){
                    Text("Yes")
                }
                NavigationLink(destination:FourthQuestionView()){
                    Text("No")
                }
                
            }
            
        }
        .navigationBarBackButtonHidden(true)
    }
}

struct ThirdQuestionView_Previews: PreviewProvider {
    static var previews: some View {
        ThirdQuestionView()
    }
}

下にずれる原因とそれを解決するにはどうすればよいでしょうか
よろしければご教授お願いします

1Answer

@satomine posted at 2022-04-17

元のコードでは，NavigationLink を踏むとき，元々あった NavigationView の内側に新しい NavigationView を作ることになります．入れ子が深くなるたびに，内側のビューの範囲が下側に寄ります．
（各所の .navigationBarBackButtonHidden(true) をコメントアウトすると，
入れ子になった NavigationView と同じ数だけ「戻る」ボタンが表示されると思います．）

ContentView の中にある大元の NavigationView だけ残し，それ以外のビューでは次のように NavigationView を外してみてください．

struct SecondQuestionView: View {
    var body: some View {
        VStack{
            Text("好きな分野は宇宙ですか?")
            NavigationLink(destination:NakagawaKen()){
                Text("Yes")
            }

            NavigationLink(destination:ThirdQuestionView()){
                Text("No")
            }
        }
        .navigationBarBackButtonHidden(true)
    }
}

1Like

Comments

@menachav
Questioner
回答ありがとううございます!
NavigationLinkを使うためにはNavigationViewが必要だと勝手に思い込んでいました
解決して頂きありがとうございます!

Are you sure you want to delete the question?