SwiftUI로 계산기앱 iOS독학

화면그리기

목표

완벽한 계산기를 만든다기 보다, 지금까지 배운 것을 기반으로 최소한으로 계산기처럼 보이는 것을 만들자!

사전 지식

VStack, HStack, ZStack, Text, Spacer

자가진단 테스트

Q1. VStack, HStack, ZStack이 어떤 역할을 하는지 알고 있나요?

Q2. Spacer가 어떤 역할을 하는지 알고 있나요?

참고자료

글자를 보여주는 Text 사용해보기

https://www.notion.so/7d7fd507fcf84b4483346f1c67670aaa#061f1b33be54419697af9478ec86cfd9

Stack으로 쌓아보아요.

https://www.notion.so/7d7fd507fcf84b4483346f1c67670aaa#d419038a7ac145bdb65fd9bd64499a41

컴포넌트 사이의 공간을 만들어주는 Spacer

https://www.notion.so/7d7fd507fcf84b4483346f1c67670aaa#54e2cf9aa0924058a76884b9d70f9c5c

수식 기호 입력하기

cmd + ctrl + space → 우측 상단의 문자 뷰어 열기 → 수학 기호

완성 화면

예제 코드

  • Text 스타일
  • ZStack, VStack, HStack을 이용해보기
import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            VStack {
                HStack {
                    Text("1")
                        .frame(width: 80, height: 80)
                        .background(.gray)
                        .cornerRadius(40)
                        .foregroundColor(.white)
                        .font(.system(size: 33))
                    Text("2")
                        .frame(width: 80, height: 80)
                        .background(.gray)
                        .cornerRadius(40)
                        .foregroundColor(.white)
                        .font(.system(size: 33))
                    Text("3")
                        .frame(width: 80, height: 80)
                        .background(.gray)
                        .cornerRadius(40)
                        .foregroundColor(.white)
                        .font(.system(size: 33))
                    Text("+")
                        .frame(width: 80, height: 80)
                        .background(.orange)
                        .cornerRadius(40)
                        .foregroundColor(.white)
                        .font(.system(size: 33))
                }
						}
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

댓글

댓글 본문
버전 관리
개발자리
현재 버전
선택 버전
graphittie 자세히 보기