##質問内容
SwiftUIでのNavigationLinkで移動した際に画面が下にずれていく現象の解決方法をご教示下さい。
##状況の説明
当方、iOSアプリの開発を勉強するため、XcodeでSwiftUIを触り始めた初学者です。
SwiftUIでNavigationLinkを用いて画面を遷移していくと
階層が深くなるにつれ、画面全体がどんどん下にずれ、配置した文字等が真ん中に配置できない現象が発生しています。
画面遷移をしていくと、Backボタンが複数表示されていたため、こちらが原因かと推察し、
.navigationBarBackButtonHidden(true)を挿入しましたが、Backボタンは非表示になったものの
画面が下にずれていく現象は解消できていません。
現状は下記コード(階層が深いため一部のみ表記)のように、.paddingの数値をページごとに変えて対応していますが、
ページ内の行数が変わるたびに.paddingの数値も変更しなければいけないため、代替手段がないかご教示いただきたいです。
なお、環境はXCode Ver11.5となります。
初学者のため、質問項目などで情報不足などございましたらご指摘いただけますと幸いです。
##ContentView.swiftの該当コード
import SwiftUI import Foundation // 初期画面 struct ContentView: View { var body: some View { NavigationView { VStack{ Text("AAA") .font(.body) .italic() .underline() .multilineTextAlignment(.leading) .lineLimit(nil) .offset(x: -110, y: 0) .padding(40) NavigationLink(destination: View2000000()) { Text("BBB") .font(.body) .foregroundColor(Color.white) .padding(40.0) .frame(width: 300.0, height: 50.0) .background(Color.black) .cornerRadius(30) .compositingGroup() // Viewの要素をグループ化 .shadow(color: .gray, radius: 3, x: 5, y: 5) } NavigationLink(destination: View3000000()) { Text("CCC") .font(.body) .foregroundColor(Color.white) .padding(40.0) .frame(width: 300.0, height: 50.0) .background(Color.black) .cornerRadius(30) .compositingGroup() // Viewの要素をグループ化 .shadow(color: .gray, radius: 3, x: 5, y: 5) } .padding(40) NavigationLink(destination: View4000000()) { Text("DDD") .font(.body) .foregroundColor(Color.white) .padding(40.0) .frame(width: 300.0, height: 50.0) .background(Color.black) .cornerRadius(30) .compositingGroup() // Viewの要素をグループ化 .shadow(color: .gray, radius: 3, x: 5, y: 5) } .padding(.bottom, 150) } } } } struct View2000000: View { var body: some View { NavigationView { VStack{ Text("EEE") .font(.body) .lineLimit(nil) .multilineTextAlignment(.center) .frame(width: nil) .fixedSize() .padding(40) NavigationLink(destination: View2100000()) { Text("Yes") .font(.body) .foregroundColor(Color.white) .padding(40.0) .frame(width: 300.0, height: 50.0) .background(Color.black) .cornerRadius(30) .compositingGroup() // Viewの要素をグループ化 .shadow(color: .gray, radius: 3, x: 5, y: 5) } NavigationLink(destination: View2200000()) { Text("No") .font(.body) .foregroundColor(Color.white) .padding(40.0) .frame(width: 300.0, height: 50.0) .background(Color.black) .cornerRadius(30) .compositingGroup() // Viewの要素をグループ化 .shadow(color: .gray, radius: 3, x: 5, y: 5) } .padding(40) } .padding(.bottom, 200) } } } struct View2100000: View { var body: some View { NavigationView { VStack{ Text("FFF") .font(.body) .lineLimit(nil) .multilineTextAlignment(.center) .frame(width: nil) .fixedSize() .padding(40) NavigationLink(destination: View2110000()) { Text("GGG") .font(.body) .foregroundColor(Color.white) .padding(40.0) .frame(width: 300.0, height: 50.0) .background(Color.black) .cornerRadius(30) .compositingGroup() // Viewの要素をグループ化 .shadow(color: .gray, radius: 3, x: 5, y: 5) } NavigationLink(destination: View2120000()) { Text("HHH") .font(.body) .foregroundColor(Color.white) .padding(40.0) .frame(width: 300.0, height: 50.0) .background(Color.black) .cornerRadius(30) .compositingGroup() // Viewの要素をグループ化 .shadow(color: .gray, radius: 3, x: 5, y: 5) } .padding(40) } .padding(.bottom, 300) }.navigationBarBackButtonHidden(true) } }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。