SwiftUI分页加载时Progress View二次加载不显示问题

1. 确保状态变更触发视图重绘 #

问题大概率是状态更新没让SwiftUI察觉到需要重绘Progress View——毕竟动画组件对状态的敏感度比静态文本高。把控制加载状态的变量用@State或可观察对象，每次触发加载时明确更新状态：

@State private var isLoading = false
@State private var currentPage = 1

func fetchNextPage() {
    guard !isLoading else { return }
    isLoading = true
    // 模拟接口请求
    DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
        // 追加新数据逻辑
        currentPage += 1
        isLoading = false
    }
}

Section的footer直接绑定isLoading，别用计算属性绕弯，防止SwiftUI的视图优化跳过重绘：

List {
    Section {
        ForEach(dataItems) { item in
            Text(item.content)
        }
    } footer: {
        if isLoading {
            ProgressView()
                .frame(maxWidth: .infinity)
                .padding(.vertical)
        }
    }
}
.onScrollToBottom { // 自定义实现的滚动到底部检测逻辑
    fetchNextPage()
}

2. 给Progress View加唯一ID强制重建 #

SwiftUI的视图复用机制可能把旧的Progress View缓存起来，导致后续加载时动画不显示。给它绑定一个随加载状态变化的id，强制每次加载时重建视图：

if isLoading {
    ProgressView()
        .id(isLoading) // 用isLoading或currentPage当ID均可
        .frame(maxWidth: .infinity)
        .padding(.vertical)
}

这样每次isLoading从false切换到true，Progress View都会被重新创建，动画就能正常渲染。

3. 把加载视图放到列表最后，替代Section Footer #

如果Section的footer存在视图缓存问题，直接把加载视图作为列表的最后一个元素：

List {
    ForEach(dataItems) { item in
        Text(item.content)
    }
    // 加载视图直接放在列表末尾
    if isLoading {
        ProgressView()
            .frame(maxWidth: .infinity)
            .padding(.vertical)
            .id(currentPage)
    }
}

这种方式避开Section的视图复用逻辑，每次加载时加载视图都会被正确渲染。

4. 临时禁用动画干扰 #

有时候SwiftUI的隐式动画会打乱Progress View的渲染节奏，可以给Progress View单独禁用动画：

if isLoading {
    ProgressView()
        .frame(maxWidth: .infinity)
        .padding(.vertical)
        .animation(nil, value: isLoading)
}

或者在更新isLoading时用无动画的方式：

withAnimation(.none) {
    isLoading = true
}

内容的提问来源于stack exchange，提问作者Simon McNeil