创建条形加载进度条

构建基本条形视图

创建条形加载进度条是提升用户体验的关键一步！🚀 你会发现这比想象中简单。首先，我们需要一个基本的矩形作为进度条的背景。你可以使用 Rectangle() 视图来轻松实现这一点。

Rectangle()
    .frame(height: 10) // 设置一个合适的高度
    .foregroundColor(.gray.opacity(0.3)) // 设定背景颜色，使其看起来不那么突兀

这个背景条将作为我们进度条的容器。记住，良好的设计始于坚实的基础。

实现进度填充

接下来，我们将添加一个表示进度的填充条。这个条的宽度会根据加载的百分比动态变化。你可以再次使用 Rectangle() 视图，并结合 frame(width:) 修饰符来控制其宽度。

Rectangle()
    .frame(width: geometry.size.width * progress) // progress 是一个0到1的值
    .foregroundColor(.blue) // 进度条的颜色

这里，progress 是一个 CGFloat 类型的值，范围从 0.0 到 1.0，代表加载的百分比。例如，当 progress 为 0.5 时，进度条将填充一半的宽度。

动态更新与动画

为了让进度条看起来更流畅，我们需要在 progress 值变化时添加动画效果。SwiftUI 的 animation() 修饰符让这变得异常简单。

1. 状态变量: 你需要一个 @State 变量来存储当前的 progress 值。

   @State private var progress: CGFloat = 0.0

2. 更新逻辑: 当数据加载或任务进行时，更新 progress 的值。

   // 模拟进度更新
   DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
       if self.progress < 1.0 {
           self.progress += 0.01
       }
   }

3. 添加动画: 将 .animation(.linear) 或 .animation(.spring()) 添加到你的进度条视图上。

   Rectangle()
       .frame(width: geometry.size.width * progress)
       .foregroundColor(.blue)
       .animation(.linear(duration: 0.1), value: progress) // 动画效果

   线性动画（linear）能提供平滑的过渡，而弹簧动画（spring）则能带来更生动的效果。选择你最喜欢的！

封装为可复用组件

为了让你的条形进度条在其他地方也能轻松使用，我们应该将其封装成一个独立的 SwiftUI 视图。这大大提高了代码的可维护性和复用性。

struct CustomProgressBar: View {
    var progress: CGFloat

    var body: some View {
        GeometryReader { geometry in
            ZStack(alignment: .leading) {
                Rectangle()
                    .frame(height: 10)
                    .foregroundColor(.gray.opacity(0.3))
                    .cornerRadius(5) // 添加圆角让它看起来更柔和

                Rectangle()
                    .frame(width: geometry.size.width * progress, height: 10)
                    .foregroundColor(.blue)
                    .cornerRadius(5)
                    .animation(.linear(duration: 0.1), value: progress) // 动画效果
            }
        }
        .frame(height: 10) // 确保整个组件的高度一致
    }
}

现在，你可以在任何地方使用 CustomProgressBar(progress: someValue) 来显示你的加载进度了！是不是很棒？✨ 这种模块化的开发方式能让你事半功倍。