swiftUI loading

原创

mob649e81586edc 2023-07-15 08:41:06 ©著作权

文章标签 加载应用程序 Text 文章分类 Swift 移动开发

©著作权归作者所有：来自51CTO博客作者mob649e81586edc的原创作品，请联系作者获取转载授权，否则将追究法律责任

SwiftUI Loading

简介

在开发iOS应用程序时，我们经常需要在后台加载数据或执行其他耗时任务。在这些任务执行期间，用户可能会感到无聊或不知道应用程序是否在工作。为了提供更好的用户体验，我们可以在任务执行期间显示一个加载指示器，让用户知道应用程序正在忙碌中。

SwiftUI是一个用于构建用户界面的框架，它提供了一个简单而强大的方式来创建加载指示器。本文将向您介绍如何在SwiftUI中实现加载指示器。

步骤1：创建一个Loading状态

首先，我们需要在我们的视图中创建一个@State属性来跟踪加载状态。在这个示例中，我们将创建一个布尔类型的isLoading状态，用于指示加载是否正在进行。

@State private var isLoading = false

步骤2：显示加载指示器

接下来，我们需要在视图中根据加载状态显示相应的内容。当加载状态为true时，我们将显示一个加载指示器；当加载状态为false时，我们将显示其他内容。

if isLoading {
    ProgressView("Loading...")
        .progressViewStyle(CircularProgressViewStyle())
} else {
    Text("Content Loaded!")
}

在上面的代码中，我们使用了ProgressView来显示一个加载指示器，并使用CircularProgressViewStyle设置了圆形的样式。当加载状态为false时，我们显示了一个简单的文本。

步骤3：启动和停止加载状态

最后，我们需要在适当的地方启动和停止加载状态。在这个示例中，我们将使用一个按钮来模拟开始和停止加载。

Button(action: {
    isLoading.toggle()
}) {
    Text(isLoading ? "Stop Loading" : "Start Loading")
}

当用户点击按钮时，我们将切换加载状态的值。如果加载状态为true，则切换为false；如果加载状态为false，则切换为true。

完整示例代码

下面是一个完整的示例代码，展示了如何在SwiftUI中实现加载指示器：

import SwiftUI

struct ContentView: View {
    @State private var isLoading = false
    
    var body: some View {
        VStack {
            if isLoading {
                ProgressView("Loading...")
                    .progressViewStyle(CircularProgressViewStyle())
            } else {
                Text("Content Loaded!")
            }
            
            Button(action: {
                isLoading.toggle()
            }) {
                Text(isLoading ? "Stop Loading" : "Start Loading")
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}