LoginSignup
@vivinva237109

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

SwiftUIでNavigationStackとTabViewの同時使用で画面がズレる

Q&A

SwiftSwiftUITabViewNavigationStack

解決したいこと

NavigationStackの中にTabViewを設置したのですが、以下の問題が発生しました。

  1. FristPage()からNextPage()に遷移後、画面がy方向（下方向）にズレるような挙動を起こす
  2. NextView()で縦方向にスワイプすると、画面の位相がy方向（上方向）にズレるような挙動を起こす

1の問題が発生することで画面のRectangle()が中央部に位置し、一時的に画面が希望通りの状態になるですが、2の問題が発生すると画面のRectangleが下方向へ見切れてしまい、見栄えが悪くなってしまいます。

もし解決方法などがあれば、教えてください。

該当するソースコード


struct FirstView: View {
  @State var isNextView = false
  var body: some View {
    NavigationStack {
      VStack {
        Button {
          isNextView.toggle()
        } label: {
          Text("go next page")
        }
      }
      .navigationDestination(isPresented: $isNextView, destination: {
        NextView()
          .navigationBarBackButtonHidden(true)
      })
    }
  }
}

struct NextView: View {
  let width = UIScreen.main.bounds.width
  let height = UIScreen.main.bounds.height
  
  @Environment(\.dismiss) private var dismiss
  
  var body: some View {
    TabView {
      Rectangle()
        .frame(width: width, height: height)
        .foregroundColor(.red)
    }
    .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
    .frame(width: width, height: height, alignment: .center)
    .toolbarBackground(.hidden, for: .navigationBar)
    .ignoresSafeArea()
    .edgesIgnoringSafeArea(.all)
    .safeAreaPadding(0)
    //      .navigationBarHidden(true)
    .toolbar {
      ToolbarItem(placement: .navigationBarLeading) {
        Button {
          dismiss()
        } label: {
          Image(systemName: "chevron.left")
            .imageScale(.large)
            .foregroundColor(.black)
        }
      }
    }
  }
}

自分で試したこと

.toolBarや.navigationBarを削除してみたが、ズレる幅が小さくなるだけで根本鬼な解決には至らない

0 likes

1Answer

nak435
@nak435

↓以下でどうでしょうか。

struct NextView: View {
    var body: some View {
        ZStack {
            Color.black.overlay(
                GeometryReader { proxy in
                    TabView {
                        Rectangle()
                            .frame(width: proxy.size.width, height: proxy.size.height)
                            .foregroundColor(.red)
                        Rectangle()
                            .frame(width: proxy.size.width, height: proxy.size.height)
                            .foregroundColor(.green)
                        Rectangle()
                            .frame(width: proxy.size.width, height: proxy.size.height)
                            .foregroundColor(.blue)
                    }
                    .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
                }
            )
        }
        .edgesIgnoringSafeArea(.all)
    }
}
0Like

Your answer might help someone💌

LoginSign Up