화면그리기

목표

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

사전 지식

VStack, HStack, ZStack, Text, Spacer

자가진단 테스트

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

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

참고자료

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

https://opentutorials.org/course/5028/32021

Stack으로 쌓아보아요.

https://opentutorials.org/course/5028/32023

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

https://opentutorials.org/course/5028/32027

수식 기호 입력하기

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()
    }
}