【SwiftUI基础篇】14 进度显示ProgressView、分割线Divider、EmptyView空视图

本文将介绍一些辅助类的视图，有助于我们在开发中灵活去运用。

一、ProgressView 载入进度显示

ProgressView可以显示任务完成进度的视图。使用进度视图来显示任务正在朝着完成的方向前进。进度视图可以显示确定(完成百分比)和不确定(进展或不进展)类型的进度。

1、做为载入图片使用（空转的进度环了）：

ProgressView()

要创建一个不确定的进度视图，使用不带进度值的初始化器，可以不传入 value，这样就会显示一个空转的进度环了。

2、通过初始化ProgressView，创建一个确定的进度视图。

绑定到一个指示进度的数值（progress），以及一个表示任务完成情况的总值。默认情况下，进度是0.0，总数是1.0。

下面的示例使用状态属性progress在确定的ProgressView中显示进度。进度视图使用其默认总数1.0，因为进度从初始值0.5开始，所以进度视图开始时只完成了一半。进度视图下面的“More”按钮允许用户以5%的增量增加进度:

@State private var progress = 0.5
VStack {
    ProgressView(value: progress)//当前进度（非绑定值）
    Button("增加进度", action: { progress += 0.05 })
}

注意：ProgressView 不会改变传入的值，所以这里传入的不是绑定值。

3、改变样式.progressViewStyle

我们可以通过自已定义一个progressViewStyle样式，遵循ProgressViewStyle协议：

struct DarkBlueShadowProgressViewStyle: ProgressViewStyle {
    func makeBody(configuration: Configuration) -> some View {
        ProgressView(configuration)
            .shadow(color: Color(red: 0, green: 0, blue: 0.6),
                    radius: 4.0, x: 1.0, y: 2.0)
    }
}

然后将我们定义的样式应用到进度条上：

var body: some View {
    VStack {
        ProgressView(value: 0.25)
        ProgressView(value: 0.75)
    }
    // 可以用 .progressViewStyle 来更改进度条样式
    .progressViewStyle(DarkBlueShadowProgressViewStyle())
}

 4、一个允许你通过点击手势来调整进度的视图

//定义一个圆型的载入样式
struct GaugeProgressStyle: ProgressViewStyle {
    var strokeColor = Color.blue
    var strokeWidth = 25.0
    
    func makeBody(configuration: Configuration) -> some View {
        let fractionCompleted = configuration.fractionCompleted ?? 0
        
        return ZStack {
            Circle()
                .trim(from: 0, to: CGFloat(fractionCompleted))
                .stroke(strokeColor, style: StrokeStyle(lineWidth: CGFloat(strokeWidth), lineCap: .round))
                .rotationEffect(.degrees(-90))
//请注意，我的自定义样式是如何将圆逆时针旋转90度，以便圆从顶部开始绘制。
        }
    }
}
//点击后载入一个圆
struct ContentView: View {
    @State private var progress = 0.2
    
    var body: some View {
        ProgressView(value: progress, total: 1.0)
            .progressViewStyle(GaugeProgressStyle())
            .frame(width: 200, height: 200)
            .contentShape(Rectangle())
            .onTapGesture {
                if progress < 1.0 {
                    withAnimation {
                        progress += 0.2
                    }
                }
            }
    }
}

 5、显示下载进度的示例：

ProgressView可以将SwiftUI绑定到Double以显示水平进度条。例如，这将创建一个标题为“下载”的进度条，该进度条的内容downloadAmount将确定进度条的填充程度：

VStack {
      ProgressView("正在下载中…", value: downloadAmount, total: 100)
}
@State private var downloadAmount = 0.0

实际上，您将需要某种方式来实际更改该值，例如计时器，网络请求或其他用户界面。例如，这将在几秒钟内填满进度栏：

struct ContentView: View {
    @State private var downloadAmount = 0.0
    let timer = Timer.publish(every: 0.1, on: .main, in: .common).autoconnect()

    var body: some View {
        VStack {
            ProgressView("正在下载中…", value: downloadAmount, total: 100)
        }
        .onReceive(timer) { _ in
            if downloadAmount < 100 {
                downloadAmount += 2
            }
        }
    }
}

注意：如果您将进度值设置为高于进度总计，则Xcode会很生气–确保如上所示限制其上限。

二、Divider 分割视图线

Divider 一种视觉元素，可用于分隔其他内容，用作分隔符。在 Stack 中使用时，VStack 中为水平方向，HStack 中为竖直方向在其他视图中使用时，为水平方向。

VStack {
    HStack {
        Text("左").font(.title)
        Divider()
        Text("右").font(.title)
    }
    VStack {
        Text("上").font(.title)
        Divider()
        Text("下").font(.title)
    }
    List {
        Section {
            Button("按钮 1") {}
            Button("按钮 2") {}
        }
        Divider()
        Section {
            Button("按钮 3") {}
        }
    }
    .listStyle(InsetGroupedListStyle())
}

三、EmptyView空视图

EmptyView是一个不包含任何内容的视图。你很少需要直接创建一个EmptyView。相反，EmptyView表示视图的缺失。

当SwiftUI视图类型定义了一个或多个带有泛型参数的子视图，并且允许子视图不存在时，SwiftUI会使用EmptyView。当没有子视图时，泛型类型参数中的子视图类型是EmptyView。

下面的示例创建了一个不带标签的不确定的ProgressView。ProgressView类型为它的子视图使用的类型声明了两个泛型参数Label和CurrentValueLabel。当两个子视图都不存在时，就像这里一样，结果类型是ProgressView<EmptyView, EmptyView>，如示例的输出所示:

let progressView = ProgressView()
print("(type(of:progressView))")
// Prints: ProgressView<EmptyView, EmptyView>

在泛型中如果一个视图类型没有初始化，就会被当成 EmptyView。

EmptyView()
//下面的Group{}与EmptyView()都可以做为空视图返回
Group{}

除非注明，网络人的文章均为原创，转载请以链接形式标明本文地址：https://www.55mx.com/post/128