1 year ago

#238983

test-img

Drew

stopwatch with milliseconds in SwiftUI

I am trying to make a stopwatch with milliseconds. For this, I have copied the code from Fini Eines (https://medium.com/geekculture/build-a-stopwatch-in-just-3-steps-using-swiftui-778c327d214b)

However, I am looking for a stopwatch with milliseconds. Therefore I have added my own var's and parameters. My goal is only to have a stopwatch, which consistently shows hours, minutes, seconds, milliseconds. Features for laps are not necessary. It just doesn't seem to work. Am I forgetting something?

This is my code:

struct Stopwatch: View {

/// Current progress time expresed in seconds
@State private var progressTime = 0
@State private var isRunning = false

/// Computed properties to get the progressTime in hh:mm:ss format
var hours: Int {
    progressTime / 3600
}

var minutes: Int {
    (progressTime % 3600) / 60
}

var seconds: Int {
    progressTime % 60
}

var milliseconds: Int {
    (progressTime % 60) / 1000
}

/// Increase progressTime each second
@State private var timer: Timer?

var body: some View {
    VStack {
        HStack(spacing: 10) {
            StopwatchUnit(timeUnit: hours, timeUnitText: "", color: .pink)
            Text(":")
                .font(.system(size: 48))
                .foregroundColor(.white)
                .offset(y: -18)
            StopwatchUnit(timeUnit: minutes, timeUnitText: "", color: .blue)
            Text(":")
                .font(.system(size: 48))
                .foregroundColor(.white)
                .offset(y: -18)
            StopwatchUnit(timeUnit: seconds, timeUnitText: "", color: .green)
            Text(",")
                .font(.system(size: 48))
                .foregroundColor(.white)
                .offset(y: -18)
            StopwatchUnit(timeUnit: milliseconds, timeUnitText: "", color: .green)

        }

        HStack {
            Button(action: {
                if isRunning{
                    timer?.invalidate()
                } else {
                    timer = Timer.scheduledTimer(withTimeInterval: 1, repeats: true, block: { _ in
                        progressTime += 0
                    })
                }
                isRunning.toggle()
            })
 }
        }
    }

struct StopwatchUnit: View {
var timeUnit: Int
var timeUnitText: String
var color: Color

/// Time unit expressed as String.
/// - Includes "0" as prefix if this is less than 10.
var timeUnitStr: String {
    let timeUnitStr = String(timeUnit)
    return timeUnit < 10 ? "0" + timeUnitStr : timeUnitStr
}

var body: some View {
    VStack {
        ZStack {
            HStack(spacing: 2) {
                Text(timeUnitStr.substring(index: 0))
                    .font(.system(size: 48))
                    .frame(width: 28)
                Text(timeUnitStr.substring(index: 1))
                    .font(.system(size: 48))
                    .frame(width: 28)
            }
        }

        Text(timeUnitText)
            .font(.system(size: 16))
    }
    .foregroundColor(.white)
}
}

extension String {
    func substring(index: Int) -> String {
        let arrayString = Array(self)
        return String(arrayString[index])
    }
}

Thanks for any help!

swiftui

stopwatch

0 Answers

Your Answer

Accepted video resources