【SwiftUI】 Pull To Refreshを実装する方法

2022年12月27日2023年7月31日

SwiftUI

目次 [ close ]

今回作成するアプリ

実装

コード

全体のコードはこちら。

import SwiftUI

struct ContentView: View {
    
    @State var nowDate = Date()
    @State var dateText = ""
    private let dateFormatter = DateFormatter()

    init() {
        dateFormatter.dateFormat = "YYYY/MM/dd(E) HH:mm:ss"
        dateFormatter.locale = Locale(identifier: "ja_jp")
    }
    
    
    var body: some View {
        ScrollView{
            
            Text(dateText.isEmpty ? "\(dateFormatter.string(from: nowDate)) 更新" : dateText)
                .frame(width: 360)
                .font(.system(size: 24, weight: .bold, design: .default))
                .foregroundColor(.teal)
                .padding(200)
        }
        .refreshable {
            do {
                try await Task.sleep(nanoseconds: 1 * 1000 * 1000 * 1000)
                nowDate = Date()
                dateText = "\(dateFormatter.string(from: nowDate)) 更新"
            } catch {
                //error handling
            }
        }
    }
}

解説

Pull To Refreshをするには、モディファイア.refreshableを追加するだけです。

Appleの公式サイトはこちら。

Apple Developer Documentation

.refreshable {
        }

現在時刻を表示するところは、下の記事を参考にしてください。

【SwiftUI】リアルタイム時刻を取得する方法

今回作成するアプリ現在時刻をリアルタイムに取得し表示するアプリを作成します。実装コード全体のコードはこちら。 import…

2022年12月26日 2023年7月31日

下記のように、何秒間くるくるを表示するかを決められます。

単位がナノセカンドなので、10の9乗でやっと1秒になります。

また、くるくるの間は非同期処理だと待ってくれないので、awaitで同期処理させます。

await Task.sleep(nanoseconds: 1 * 1000 * 1000 * 1000)

また、全体をtryキーワードを用いたdo-catch文で囲む必要があります。

do {
    try await Task.sleep(nanoseconds: 1 * 1000 * 1000 * 1000)
    nowDate = Date()
    dateText = "\(dateFormatter.string(from: nowDate)) 更新"
} catch {
    //error handling
}