본문 바로가기
iOS

[iOS][SwiftUI] 스톱워치 만들기

by teamnova 2023. 6. 19.

안녕하세요 오늘은 SwiftUI를 이용하여 스톱워치를 만들어볼텐데요, 전체적인 코드와 주석은 아래와 같습니다.

import SwiftUI

struct StopWatchView: View {
    // 타이머 값
    @State var counter: Double = 0.0

    // 타이머 객체
    var timer = Timer()

    var body: some View {
        VStack {
            // 타이머 값을 표시하는 레이블
            Text(String(format: "%.2f", counter))
                .font(.largeTitle)
                .fontWeight(.bold)
                .padding()
                .onReceive(timer) { _ in
                    // 타이머 값 0.01초 증가
                    self.counter += 0.01
                }

            HStack {
                // 타이머 시작 버튼
                Button(action: {
                    // 0.01초 간격으로 실행되는 타이머 시작
                    self.timer = Timer.scheduledTimer(withTimeInterval: 0.01, repeats: true) { _ in
                        self.counter += 0.01
                    }
                }) {
                    Text("Start")
                }

                // 타이머 중지 버튼
                Button(action: {
                    // 타이머 중지
                    self.timer.invalidate()
                }) {
                    Text("Stop")
                }

                // 타이머 재설정 버튼
                Button(action: {
                    // 타이머 중지 및 초기화
                    self.timer.invalidate()
                    self.counter = 0.0
                }) {
                    Text("Reset")
                }
            }
        }
    }
}

struct StopWatchView_Previews: PreviewProvider {
    static var previews: some View {
        StopWatchView()
    }
}

앱은 타이머 값을 표시하는 Text 뷰와 시작/중지/재설정 버튼으로 구성되어 있습니다.

타이머는 Timer 클래스를 사용하여 0.01초 간격으로 실행되며, 갱신될 때마다 counter 변수를 0.01초씩 증가시켜

Text 뷰의 값을 업데이트합니다. 시작 버튼을 누르면 타이머가 시작되고, 중지 버튼을 누르면 타이머가 중지됩니다.

재설정 버튼을 누르면 타이머가 초기화되고 Text 뷰의 값이 0으로 설정됩니다.