SwiftUI -如何显示倒计时计时器

jdg4fx2g  于 2023-10-15  发布在  Swift
关注(0)|答案(1)|浏览(208)

我想显示一个倒计时计时器,它将采用当前的小时,分钟,秒,然后倒计时到00:00:00。我现在显示的是当前日期,但它还在增加.
我的期望:它会倒计时,当它回到00:00:00时,它会停止。
下面是我所有的代码

  1. struct TimerView: View {
  2. @State var timeRemaining = 24*60*60
  3. let timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()
  4. var body: some View {
  5. HStack(spacing: 12) {
  6. timerStringView(timer: "\(hourString(timer: timeRemaining))")
  7. timerStringView(timer: "\(minutesString(timer: timeRemaining))")
  8. timerStringView(timer: "\(secondsString(timer: timeRemaining))")
  9. }
  10. .frame(width: 300, height: 34)
  11. .background(Color.gray)
  12. .onReceive(timer) { _ in
  13. if timeRemaining > 0 {
  14. timeRemaining -= 1
  15. } else {
  16. timer.upstream.connect().cancel()
  17. }
  18. }
  19. }
  20. func timerStringView(timer: String) -> some View {
  21. Text(timer)
  22. .font(.system(size: 18, weight: .bold))
  23. .foregroundColor(.black)
  24. .background(Color.white)
  25. .cornerRadius(6)
  26. }
  27. func hourString(timer: Int) -> String {
  28. let date = Date()
  29. let calendar = Calendar.current
  30. let hours = calendar.component(.hour, from: date)
  31. return String(format: "%02i", hours)
  32. }
  33. func minutesString(timer: Int) -> String {
  34. let date = Date()
  35. let calendar = Calendar.current
  36. let minutes = calendar.component(.minute, from: date)
  37. return String(format: "%02i", minutes)
  38. }
  39. func secondsString(timer: Int) -> String {
  40. let date = Date()
  41. let calendar = Calendar.current
  42. let second = calendar.component(.second, from: date)
  43. return String(format: "%02i", second)
  44. }
  45. }
9lowa7mx

9lowa7mx1#

使用on appear将小时、分钟和秒全部加起来以设置@State。注意:把小时数乘以3600是错误的,所以我使用了一个额外的变量来修复我的机器上。

  1. struct ContentView: View {
  2. @State var timeRemaining:Int = 0
  3. let timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()
  4. var body: some View {
  5. HStack(spacing: 12) {
  6. timerStringView(timer: "\(hourString(timer: timeRemaining))")
  7. timerStringView(timer: "\(minutesString(timer: timeRemaining))")
  8. timerStringView(timer: "\(secondsString(timer: timeRemaining))")
  9. }
  10. .frame(width: 300, height: 34)
  11. .background(Color.gray)
  12. .onReceive(timer) { _ in
  13. if timeRemaining > 0 {
  14. timeRemaining -= 1
  15. } else {
  16. timer.upstream.connect().cancel()
  17. }
  18. }
  19. // Get the time
  20. .onAppear() {
  21. setTimer()
  22. }
  23. }
  24. func timerStringView(timer: String) -> some View {
  25. Text(timer)
  26. .font(.system(size: 18, weight: .bold))
  27. .foregroundColor(.black)
  28. .background(Color.white)
  29. .cornerRadius(6)
  30. }
  31. func hourString(timer: Int) -> String {
  32. let date = Date()
  33. let calendar = Calendar.current
  34. let hours = calendar.component(.hour, from: date)
  35. return String(format: "%02i", hours)
  36. }
  37. func minutesString(timer: Int) -> String {
  38. let date = Date()
  39. let calendar = Calendar.current
  40. let minutes = calendar.component(.minute, from: date)
  41. return String(format: "%02i", minutes)
  42. }
  43. func secondsString(timer: Int) -> String {
  44. let date = Date()
  45. let calendar = Calendar.current
  46. let second = calendar.component(.second, from: date)
  47. return String(format: "%02i", second)
  48. }
  49. func setTimer() {
  50. let date = Date()
  51. let calendar = Calendar.current
  52. let hours = calendar.component(.hour, from: date)
  53. let hourSeconds = hours * 3600
  54. let minuteSeconds = calendar.component(.minute, from: date) * 60
  55. let seconds = calendar.component(.second, from: date)
  56. timeRemaining = hourSeconds
  57. timeRemaining += minuteSeconds
  58. timeRemaining += seconds
  59. }
  60. }
展开查看全部

相关问题