見出し画像

New SwiftUI! - ProgressView

donguri

いわゆる"progress bar"、何かしら実行、処理中にその状況を知らせるためのインジケータです。まずは処理中を示す"Loawding"を表示のみさせます。

struct ContentView: View {
   var body: some View {
       ProgressView("Loawding")
   }
}

実行結果です。

画像1

ProgressView("Loawding")

指定した"Loawding"が表示され、くるくる回るアイコンが表示されます。これに"progress bar"を追加、表示させます。

"progress bar"に必要な処理の時間、その量を決めていきます。まずその量を示す変数Valueを作ります。そしてその量をどのタイミングで動かしていくかを指定します。

struct ContentView: View {
   @State private var valueAmount = 0.0
   
   var body: some View {
       VStack {
           ProgressView("Loawding",value:valueAmount,total:100)
           Button("Move plus"){
               valueAmount += 1
           }
       }
   }
}

変数です。

@State private var valueAmount = 0.0

そして、その処理の内容を決めます。今回はボタンの操作で、”progress bar"の量を変えていきます。

Button("Move plus"){
valueAmount += 1
}

ボタンを押すたびにバーが伸びていきます。

画像2

変数のデータの増減によって”progress bar"が変化する仕組みです。

サンプルをもう一つ、以下サイトで紹介されています。

struct ContentView: View {
   @State private var downloadAmount = 0.0
   let timer = Timer.publish(every: 0.1, on: .main, in: .common).autoconnect()
   var body: some View {
       VStack {
           ProgressView("Downloading…", value: downloadAmount, total: 100)
       }
       .onReceive(timer) { _ in
           if downloadAmount < 100 {
               downloadAmount += 2
           }
       }
   }
}

実行すると

画像3

となり、ローディングっぽくなっています。

こちらでも紹介されています。


この記事が気に入ったらサポートをしてみませんか？