質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

Xcode

Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。

Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

Q&A

解決済

1回答

4056閲覧

SwiftUIでのNavigationLinkで遷移した際に画面が下にずれていく現象

Yusuke_O

総合スコア7

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

Xcode

Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。

Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

0グッド

0クリップ

投稿2020/06/24 06:26

##質問内容
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) } }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

Navigationlinkを最初にのみ表示する

投稿2020/06/24 09:03

Yusuke_O

総合スコア7

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問