Нажмите кнопку SwiftUI и go для перехода к следующему экрану (следующий вид) при обратном вызове сервера - PullRequest
Новая
       16

Нажмите кнопку SwiftUI и go для перехода к следующему экрану (следующий вид) при обратном вызове сервера

0 голосов
/ 15 апреля 2020

Я застрял на довольно простом шаге, когда я хочу нажать на кнопку «Показать индикатор загрузки», и если сервер возвращает ответ об успешном выполнении, тогда показать новое представление

Это довольно просто в UIKit, но с SwiftUI я застрял, чтобы сделать this.

  1. Мне нужно знать, как инициировать / добавлять индикатор активности. Я нашел несколько интересных примеров здесь . Могу ли я просто сохранить его как переменную let в моем виде просмотра?
  2. Затем, нажав кнопку Показать / развернуть индикатор
  3. Сделать запрос к серверу через мой API-интерфейс rest
  4. Подождите Некоторое время и покажу новое представление об успешном обратном вызове или сообщении об ошибке.

Ничего особенного, но я застрял здесь - кнопка, которая является частью моего NavigationView. Пожалуйста, помогите мне pu sh на новый экран. 

    Button(action: {
     // show indicator or animate
     // call rest api service
     // wait for callback and show next view or error alert

    })

Я нашел ссылку , но не уверен, как правильно ее использовать.

Не уверен, что мне нужно PresentationButton или NavigationLink вообще, так как у меня уже есть простая кнопка и я хочу что-то вроде пу sh нового контроллера вида.

Очень похож на вопрос этот но у меня нет Я считаю, что это полезно, поскольку я не знаю, как использовать шаг за шагом, как «Создать скрытую NavigationLink и привязать к этому состоянию»

РЕДАКТИРОВАНИЕ: Я также нашел этот видеоответ похоже, я понял, как сделать навигацию. Но все же нужно выяснить, как показывать индикатор активности при нажатии кнопки.

1 Ответ

2 голосов
/ 15 апреля 2020

Чтобы показать все, что вам нужно в какой-то момент в SwiftUI, просто используйте переменную @State. Вы можете использовать столько Bool, сколько вам нужно. Вы можете переключать новый вид, анимацию ...

пример: 

@State var showNextView = false
@State var showLoadingAnimation = false

Button(action: {
  self.showLoadingAnimation.toggle()
  self.makeApiCall()
}) {
  Text("Show next view on api call success")
}

// Method that handle your api call
func makeApiCall() {
  // Your api call
  if success {
    showLoadingAnimation = false
    showNextView = true
  }
}

Что касается анимации, я бы предложил использовать каркас Lott ie. Вы можете найти некоторые действительно интересные анимации:

https://github.com/airbnb/lottie-ios

Вы можете найти много анимаций здесь:

https://lottiefiles.com

И вы можете создать класс для реализации вашей анимации Лотта ie с помощью файла JSON, который вы поместили в свой проект: 

import SwiftUI
import Lottie

struct LottieRepresentable: UIViewRepresentable {

  let named: String // name of your lottie file
  let loop: Bool

  func makeUIView(context: Context) -> UIView {
    let view = UIView(frame: .zero)

    let animationView = AnimationView()
    let animation = Animation.named(named)
    animationView.animation = animation
    animationView.contentMode = .scaleAspectFit
    if loop { animationView.loopMode = .loop }
    animationView.play()

    animationView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(animationView)

    NSLayoutConstraint.activate([
      animationView.widthAnchor.constraint(equalTo: view.widthAnchor),
      animationView.heightAnchor.constraint(equalTo: view.heightAnchor)
    ])

    return view
  }

  func updateUIView(_ uiView: UIView, context: Context) { }
}

Создайте файл SwiftUI для использования вашего lott ie анимация в вашем коде: 

// MARK: - Show LottieRespresentable as view
struct LottieView: View {

  let named: String
  let loop: Bool
  let size: CGFloat

  var body: some View {
    VStack {
      LottieRepresentable(named: named, loop: loop)
        .frame(width: size, height: size)
    }
  }
}

Таким образом, конечный код будет выглядеть так с помощью NavigationLink, и ваш загрузчик будет начинаться в начале вашего вызова API и заканчиваться при вызове API успешно: 

import SwiftUI

//MARK: - Content view
struct ContentView: View {

  @State var showMessageView = false
  @State var loopAnimation = false

  var body: some View {
    NavigationView {
      ZStack {
        NavigationLink(destination: MessageView(),
                       isActive: $showMessageView) {
          Text("")

          VStack {
            Button(action: {
              self.loopAnimation.toggle()
              self.makeApiCall()
            }) {
              if self.loopAnimation {
                Text("")
              }
              else {
                Text("Submit")
              }
            }
          }

          if self.loopAnimation {
            LottieView(named: "Your lottie json file name",
                       loop: self.loopAnimation,
                       size: 50)
          }
        }
        .navigationBarTitle("Content View")
      }
    }
  }

  func makeApiCall() {
    // your api call
    if success {
      loopAnimation = false
      showMessageView = true
    }
  }
}
...