iOS Study : 4주차 - SwiftUI

다크모드를 지원하는 방법

아래와 같이 ColorSchema를 켜서 다크 모드를 킬 수 있다.

아래처럼 다크모드 상태에서의 색 지정도 가능하다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Gang")
            .background(Color("GangColor"))
    }
}

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

 

컴포넌트를 구분하는 방법

Divider()를 사용하여 구분선을 사용 가능하고 색상, 크기 조정도 가능하다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Divider()   //구분선 표시
            HStack {
                Image(systemName: "heart")
                Divider()
                    .frame(height: 30)
                Text("Gang")
                Divider()
                    .frame(height: 30)
            }
            Divider()
                .background(.red)
                .frame(width: 150)
            HStack {
                Image(systemName: "bolt")
                Divider()
                    .frame(height: 30)
                Text("Gang")
                Divider()
                    .frame(height: 30)
            }
        }
    }
}

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

 

모달 창을 띄우는 방법

import SwiftUI

struct ContentView: View {
    
    @State var isShowingModal: Bool = false
    
    var body: some View {
        Button {    //버튼을 누르면 모달창이 뜸
            isShowingModal = true
        } label: {
            Text("Call Modal")
        }
        .fullScreenCover(isPresented: $isShowingModal) {
            //State 변수에 $를 붙이면 바인딩 변수
            ZStack {
                Color.orange.ignoresSafeArea()
                VStack {
                    Text("Modal View")
                    Button {    //버튼을 누르면 모달창이 사라짐
                        isShowingModal = false
                    } label: {
                        Text("dismiss")
                    }
                }
            }
        }
    }
}

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

 

경고창을 띄우는 방법

import SwiftUI

struct ContentView: View {
    
    @State var isShowingAlert: Bool = false
    
    var body: some View {
        Button {
            isShowingAlert = true
        } label: {
            Text("Show Alert")
        }
        .alert(isPresented: $isShowingAlert) {
            Alert(title: Text("This is Alert"), message: Text("This is message"), primaryButton: .default(Text("OK")), secondaryButton: .default(Text("Cancel")))
        }

    }
}

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

 

여러 화면을 이동시켜 주는 탭뷰를 만드는 방법

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            ZStack {
                Color.orange.ignoresSafeArea()
                Text("Gang")
            }
                .tabItem {
                    Text("item1")
                    Image(systemName: "heart")
                }
            Text("Gang2")
                .tabItem {
                    Label("item2", systemImage: "bolt.fill")
                }
        }
    }
}

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

 

스위치처럼 켜고 끄는 토글 방법

import SwiftUI

struct ContentView: View {
    
    @State var isToggle: Bool = false
    
    var body: some View {
        Toggle(isOn: $isToggle) {
            if isToggle {
                Text("Light On")
            }
            else {
                Text("Light Off")
            }
        }
        .toggleStyle(.switch)
        .tint(.yellow)
        .padding()
    }
}

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

 

글자를 입력 받는 방법

import SwiftUI

struct ContentView: View {
    
    @State var userID: String = ""
    
    var body: some View {
        VStack(alignment: .leading) {
            Text("ID")
            TextField("ID를 입력하세요", text: $userID)
                .textFieldStyle(.roundedBorder)
        }
        .padding()
    }
}

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