解决 SwiftUI 中 `.refreshable()` 旋转指示器无限旋转问题

IOS

2024-05-24 10:22:44

SwiftUI 中的 .refreshable() 问题以及解决方案

简介

在 SwiftUI 中使用 .refreshable() 时，如果刷新操作的异步逻辑没有及时完成或没有正确更新 UI，旋转指示器可能会无限期地旋转。本文将探讨此问题的可能原因并提供几种有效的解决方案。

问题

当 .refreshable() 函数中的刷新逻辑触发异步操作时，旋转指示器会一直显示，直到异步操作完成并更新 UI。然而，如果异步操作没有及时完成或没有正确更新 UI，旋转指示器就会无限期地旋转。

原因

此问题的发生是因为 .refreshable() 函数中的刷新逻辑没有及时更新 UI。当异步操作被触发时，UI 将保持其当前状态，直到操作完成并更新 UI。如果异步操作没有及时完成或没有正确更新 UI，旋转指示器就会无限期地旋转。

解决方案

要解决此问题，有几种可能的解决方案：

1. 使用 .onReceive() 监听查询更新

可以使用 .onReceive() 监听查询更新，然后在更新收到后手动关闭旋转指示器：

struct ContentView: View {
  @State private var isRefreshing = false
  @State private var query: Query

  var body: some View {
    List() {
      // items ...
    }
    .refreshable {
      isRefreshing = true
      await query.refetchAsync()
    }
    .onReceive(query.updates) { _ in
      isRefreshing = false
    }
  }
}

2. 使用 .task() 执行异步刷新

也可以使用 .task() 将异步刷新逻辑移出 .refreshable() 函数：

struct ContentView: View {
  @State private var isRefreshing = false
  @State private var query: Query

  var body: some View {
    List() {
      // items ...
    }
    .refreshable {
      isRefreshing = true
    }

    .task {
      await query.refetchAsync()
      isRefreshing = false
    }
  }
}

3. 在刷新逻辑中更新 UI

如果刷新逻辑是在 .refreshable() 函数之外执行的，则需要在刷新完成后手动更新 UI。例如，可以使用 .refreshable() 来触发刷新操作，然后在另一个 .onAppear() 或 .onChange() 修饰符中更新 UI：

struct ContentView: View {
  @State private var isRefreshing = false
  @State private var query: Query

  var body: some View {
    List() {
      // items ...
    }
    .refreshable {
      isRefreshing = true
    }

    .onAppear {
      Task {
        await query.refetchAsync()
        isRefreshing = false
      }
    }
  }
}