SwiftUI-遷移をアニメーション化する

debugcn 投稿 Dev

squarehippo10

モーダルシートにサインアウトボタンがあり、ユーザーをログイン画面に戻すことができます。これを実現するために、最初にシートを閉じてから、asyncAfter（deadline :)を使用して、ログインページを表示する環境変数を設定します。すべて正常に機能しますが、シートが閉じられると、シートの下のビューからログインページへの移行はかなり不快になります。主に1つがないためです。上面図が消え、ログインビューが表示されます。カスタムトランジションを作成できることはわかっていますが、どこにアタッチするかがわかりません。たとえば、シートの下のビューをフェードアウトしたいとします。（ただし、私はあらゆる種類の移行を受け入れています！）

これは、トラフィックを誘導する構造体です。

struct ConductorView: View {
   @EnvironmentObject var tower: Tower
   let onboardingCompleted = UserDefaults.standard.bool(forKey: "FirstVisit")
    
   var body: some View {
      VStack {
         if tower.currentPage == .onboarding {
            Onboarding1View()
         } else if tower.currentPage == .login {
            LoginView()
         } else if tower.currentPage == .idle {
            LoginView()
         }
      }.onAppear{
         if self.onboardingCompleted {
            self.tower.currentPage = .login
         } else {
            self.tower.currentPage = .onboarding
         }
      }
   }
}

そして、これはシートのサインアウトボタンです。

Button(action: {
   self.presentationMode.wrappedValue.dismiss()
   DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
      self.tower.currentPage = .login
   }
}) {
   Text("Sign Out")
}

彼の気性

これは、複製されたコードの簡略化されたデモです（そして、モードを表示するために、少し長い遅延を作成しました）。もちろん、トランジションやアニメーションのタイプを変更するなどして、ニーズに合わせて調整する必要があります。Xcode12/ iOS14でテスト済み

class Tower: ObservableObject {
    enum PageType {
        case onboarding, login, idle
    }
    @Published var currentPage: PageType = .onboarding
}

struct ConductorView: View {
   @EnvironmentObject var tower: Tower
   let onboardingCompleted = false

   var body: some View {
      VStack {
         if tower.currentPage == .onboarding {
            Onboarding1View()
         } else if tower.currentPage == .login {
            Text("LoginView")
                .transition(.move(edge: .trailing))    // << here !!
         } else if tower.currentPage == .idle {
            Text("IdleView")
         }
      }
      .animation(.default, value: tower.currentPage)   // << here !!
      .onAppear{
         if self.onboardingCompleted {
            self.tower.currentPage = .login
         } else {
            self.tower.currentPage = .onboarding
         }
      }
   }
}


struct Onboarding1View: View {
   @EnvironmentObject var tower: Tower
    @Environment(\.presentationMode) var presentationMode
    @State private var isPresented = true
    var body: some View {
        Text("Login")
            .sheet(isPresented: $isPresented) {
                Button(action: {
                   self.presentationMode.wrappedValue.dismiss()
                   DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
                      self.tower.currentPage = .login
                   }
                }) {
                   Text("Sign Out")
                }
            }
    }
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-13

コメントを追加

サインイン

分類Dev

Related 関連記事

記事