7
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

Organization

[SwiftUI] フィードバックのUIに使うポップアップを作ってみる

Untitled.gif

フィードバックするためのUIであるポップアップはSwiftUIでどのように作るのが良いのでしょうか?
作るだけ作れたので共有します。

まずは表示するポップアップ自体のコンポーネントを作成

struct MyPopup: View {

  var body: some View {
    Text("Hello!")
      .foregroundColor(.white)
      .padding(16)
      .background(Color.pink)
      .cornerRadius(8)
  }
}

extensionを作る

次にポップアップを表示させたい画面から表示処理を呼び出せるようにView protocolにExtensionを作ります。

extension View {

  func popup<Content: View>(isPresented: Binding<Bool>, content: () -> Content) -> some View {

    if isPresented.wrappedValue {
      DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
        isPresented.wrappedValue = false
      }
    }

    return ZStack {
      self

      content()
        .opacity(isPresented.wrappedValue ? 1 : 0)
        .scaleEffect(isPresented.wrappedValue ? 1 : 0)
        .animation(.spring(response: 0.2, dampingFraction: 0.6, blendDuration: 0))
    }
  }
}

画面の上に表示したいので、ZStackで包みます。

自動で閉じるようにするために isPresentedがtrueになったらDispatchQueueを使って1秒後にBinding経由でisPresentedをfalseに戻します。


最後に表示する画面の作成

struct ContentView: View {

  @State var isPresented = false

  var body: some View {
    VStack {

      ...

      Button(action: {
        self.isPresented = true
      }) {
        Text("Show")
      }
    }
    .popup(isPresented: $isPresented) {
      MyPopup()
    }
  }
}

感想

こんな感じでいいんだっけ?という印象
n秒後に閉じるという処理はStateをどうやって制御していくのが良いのでしょうか?

React,Vueの世界ではどうやっているのかがヒントになりそう。
同様にStateなのか、CSSアニメーションで完結してしまっているのか。などなど。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
7
Help us understand the problem. What are the problem?