75142913在线留言
【SwiftUI基础篇】14 进度显示ProgressView、分割线Divider、EmptyView空视图_IOS开发_网络人

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

Kwok 发表于:2021-04-06 13:06:03 点击:6 评论: 0

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

一、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{}
除非注明,网络人的文章均为原创,转载请以链接形式标明本文地址:http://www.neter8.com/ios/128.html
标签:布局辅助Kwok最后编辑于:2021-04-06 14:06:54
0
感谢打赏!

《【SwiftUI基础篇】14 进度显示ProgressView、分割线Divider、EmptyView空视图》的网友评论(0)

本站推荐阅读

热门点击文章