UI 스케치

 

목표

설정 앱 메인화면 UI 틀을 구성해봅시다. ( 프로필제외 )

완성 화면

 

사용

Stack 

Text 

NavigationView 

List 

Image

고민해봐요

Q : VStack, HStack, ZStack?

 Stack으로 쌓아보아요! VStack, HStack, ZStack

Q : Image 생성 및 사이즈, 색상 커스텀 방법?

 Image는 어떻게 추가해요?

+)  .aspectRatio는 이미지의 원래 비율을 유지한 상태로 늘어나게끔 도와줘요.

Q : List 생성 및 카테고리 별 분할 방법?

List 생성

List 카테고리별 분할 

코드 맛보기

• Image 커스텀

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Section {
                    HStack {
                        Image(systemName: "hourglass")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 20, height: 20)
                            .padding(.all, 4)
                            .background(.indigo)
                            .foregroundColor(.white)
                            .cornerRadius(6)

                        Text("스크린 타임 화면")
                    }
                }
            }
            .navigationTitle(Text("설정"))
        }
    }
}