ios - 带有 Swift UI 的圆形进度条
问题描述
我正在使用 Swift UI 创建倒数计时器应用程序。我试图在其中添加一个圆形进度条,但它的外观从未改变。
我准备了2个文件。其中一个是关于倒计时程序的编码,另一个文件是关于 UI 的编码。我使用键@ObservableObject、@Public 为过程代码和@ObservedObject 为UI 代码建立数据链接。
将“计数器”设置为变量的数字开始每秒倒数 1。我通过在 Xcode 的控制台中打印数字来确认它有效。
数字下降但进度条没有改变,最后当计数为 0 时进度条消失。
产品代码
import SwiftUI
class CountDownTimer: ObservableObject {
@Published var counter: CGFloat = 10
let interval = 1.0
var timer: Timer?
func start() {
timer = Timer.scheduledTimer(withTimeInterval: interval, repeats: true, block: { _ in
self.counter -= 1
print(self.counter)
if self.counter <= 0 {
self.timer?.invalidate()
self.timer = nil
}
})
}
func stop() {
self.timer?.invalidate()
}
}
用户界面代码
struct PresentationView: View {
@ObservedObject var countDownTimer = CountDownTimer()
var body: some View {
NavigationView {
VStack {
Spacer()
VStack {
ZStack {
Text(String(format: "%.0f", countDownTimer.counter))
.font(Font.largeTitle.monospacedDigit())
.fontWeight(.light)
.padding()
Circle()
.stroke(Color(.systemIndigo), style: StrokeStyle(lineWidth: 20, lineCap: .round, lineJoin: .bevel))
.aspectRatio(contentMode: .fit)
.padding()
Circle().trim(from: 0, to: countDownTimer.counter)
.stroke(Color(.systemTeal), style: StrokeStyle(lineWidth: 20, lineCap: .round, lineJoin: .bevel))
.aspectRatio(contentMode: .fit)
.rotationEffect(Angle(degrees: -90))
.padding()
}
Spacer()
// スタートボタンとストップボタン
HStack {
Button(action: {self.countDownTimer.stop()}) {
Text("STOP")
.fontWeight(.light)
.foregroundColor(.white)
}.frame(maxWidth: 75, maxHeight: 75)
.padding()
.background(Color(.systemIndigo))
.cornerRadius(100)
.padding()
Button(action: {self.countDownTimer.start()}) {
Text("START")
.fontWeight(.light)
.foregroundColor(.white)
}.frame(maxWidth: 75, maxHeight: 75)
.padding()
.background(Color(.systemTeal))
.cornerRadius(100)
.padding()
}
}
}
}
}
}
如果您知道如何解决此问题,请帮助我。我的英语可能会被打破,因为它是我的第二语言。
谢谢你。
解决方案
您可能需要endFraction
除以10,
Circle().trim(from: 0, to: countDownTimer.counter / 10) // Dividing by 10
.stroke(Color(.systemTeal), style: StrokeStyle(lineWidth: 20, lineCap: .round, lineJoin: .bevel))
.aspectRatio(contentMode: .fit)
.rotationEffect(Angle(degrees: -90))
.padding()
谢谢!
推荐阅读
- datetime - 将文本时间戳转换为谷歌表格中的正确日期和时间
- java - 使用graphql java kickstart的spring boot中的联合类型错误
- sql - 如何将字段移动到不同的表并维护关系?
- matlab - Matlab - 生成巨大、稀疏、非奇异且条件良好的矩阵
- r - 回归的 95% CI 方程?
- python-3.x - Selenium 无法点击按钮
- python - 加入两个长度不同的列表,重复最短
- python - 正则表达式:删除句子中“/”后的字符
- r - bind_cols 到数据框中并保留命名的数字名称
- c# - 如何在 dotnet core 3.1 MacOS 上使用 ECDsa 使用现有私钥签署消息?